Flutter 앱을 개발하다 보면 이미지를 다룰 일이 많다. 하지만 원본 이미지는 용량이 크고 해상도도 높아서 그대로 사용하면 앱 성능이 저하되거나, 업로드 시 많은 데이터가 소모될 수 있다. 이를 해결하기 위해 우리는 이미지 크기를 조절하는 리사이징(Resizing) 작업을 해야 한다.오늘은 Flutter에서 빠르고 간편하게 이미지 크기를 조절할 수 있는 fast_image_resizer 패키지를 소개하려고 한다. 이 패키지를 사용하면 높은 성능과 간단한 코드만으로 이미지를 효율적으로 리사이징할 수 있다.왜 이미지 리사이징이 필요할까?이미지 크기를 줄이는 것은 앱 개발에서 중요한 역할을 한다. 특히 다음과 같은 상황에서 필수적이다.1. 사용자가 사진을 업로드할 때스마트폰에서 찍은 원본 사진은 보통 해상..

Flutter에서는 다양한 애니메이션과 인터랙션을 쉽게 구현할 수 있습니다. 이번에는 사용자의 움직임(터치 또는 드래그)에 따라 이미지가 기울어지는 카드 효과를 만들어보겠습니다. 이 효과는 게임 카드, 상품 카드, 포켓몬 카드 등 다양한 곳에서 활용할 수 있습니다. 특히 3D 느낌을 강조할 수 있는 디자인 요소로, UI의 생동감을 더하는 데 유용합니다. 0. 결과물 1. 기울기 효과란?일반적인 정적인 UI가 아니라, 사용자의 입력(터치 또는 마우스 이동)에 따라 카드가 기울어지는 효과를 구현하는 것이 목표입니다.! 사용자가 카드를 터치하고 움직이면, 기울기가 변함! 손을 떼면 원래 위치로 부드럽게 복귀! 기울기에 따라 빛 반사(Glare) 효과 적용이제 이를 어떻게 Flutter에서 구현할지 살펴보겠습니..

Flutter가 3.29 버전으로 업데이트되면서 다양한 성능 향상과 기능 개선이 이루어졌습니다. 특히, Web, iOS, macOS 플랫폼 지원이 더욱 강화되었으며, 개발자 경험을 향상시키는 여러 기능이 추가되었습니다. 이번 업데이트의 핵심 내용을 정리해 보겠습니다.주요 업데이트1. Web 성능 최적화Flutter Web은 지속적으로 개선되고 있으며, 이번 3.29 버전에서는 WebAssembly (Wasm) 기반 렌더러가 실험적으로 도입되었습니다. 이를 통해 기존보다 로딩 속도와 실행 성능이 크게 향상되었습니다. 또한, 더 나은 메모리 관리와 최적화된 렌더링을 제공하여 웹 애플리케이션의 사용자 경험을 개선할 수 있습니다.WebAssembly 적용하기WebAssembly를 활성화하려면 flutter bu..

이번에는 앱에 Google 광고(Google AdMob)를 적용하는 방법을 정리해보려고 합니다.직접 적용해본 경험을 바탕으로 최대한 쉽게 설명해볼게요.Google AdMob이란?Google AdMob은 Google에서 제공하는 모바일 광고 플랫폼입니다. 앱에 광고를 삽입해서 수익을 창출할 수 있습니다. 배너 광고, 전면 광고, 보상형 광고 등 다양한 형식이 있습니다. 1️⃣ Google AdMob 계정 생성 및 설정Google AdMob을 사용하려면 먼저 계정을 만들어야 합니다.Google AdMob에 접속해서 로그인새 앱 추가 → 앱 정보를 입력하고 "앱 추가" 선택광고 단위 생성 → 배너, 전면, 보상형 광고 중 원하는 유형 선택광고 단위 ID 복사 (Flutter 코드에서 사용)💡 Tip: 실제 ..

안녕하세요, Flutter를 사랑하는 여러분! 😃Flutter & Dart 개발자들에게 희소식이 있습니다! 바로 Dart 3.7이 출시되면서 코드 포맷팅 스타일이 대폭 개선되었어요. ✅ 더 깔끔한 코드!✅ 가독성 개선!✅ 불필요한 줄 바꿈 최소화!이번 글에서는 Dart 3.7의 새로운 포맷팅 스타일이 어떻게 변했는지 간단히 정리해드릴게요.👀 업데이트된 스타일을 바로 적용해보고 싶다면 끝까지 읽어주세요!1. 함수 및 생성자 인자 정렬 방식 개선기존 Dart 포맷터는 코드 스타일을 맞춰주긴 했지만… 가끔 너무 빡빡한(?) 줄 바꿈으로 가독성을 해치는 경우가 있었죠.기존 Dart 3.6 포맷팅final user = User( name: 'Ms Joo', age: 30, email: 'jooe@exam..

문제 발생 상황Flutter 프로젝트에서 Firebase를 설정한 후, iOS 빌드를 실행할 때 다음과 같은 오류가 발생:*** Terminating app due to uncaught exception 'cohttp://m.firebase.core', reason: '`FirebaseApp.configure()` could not find a valid GoogleService-Info.plist in your project. Please download one from https://console.firebase.google.com/.' 또는 실행 중 Xcode에서 Firebase 초기화 시 크래시 발생(앱이 실행되지 않고 종료됨) 에러 원인 분석위 오류는 GoogleService-Info.plist..

Flutter 면접에서 가장 기본적이지만 중요한 개념 중 하나가 클래스 기반 위젯(StatefulWidget, StatelessWidget) vs 함수형 위젯(Function Widget) 입니다.면접관이 다음과 같은 질문을 던진다면 어떻게 대답해야 할까요?"왜 클래스 기반 위젯을 함수형 위젯 대신 사용하는 것이 좋은가?"이 질문은 Flutter의 context, const, 성능 최적화, 위젯 라이프사이클 등 중요한 개념들을 이해하고 있는지를 테스트하기 위한 것입니다.1️⃣ 클래스 기반 위젯이 더 좋은 이유1. context 유지 가능클래스 기반 위젯에서는 context가 위젯 인스턴스에 포함되어 있어, 위젯이 재생성되더라도 context를 유지할 수 있습니다.반면, 함수형 위젯은 context가 함수..

1. 문제 상황Flutter에서 Column 위젯을 사용할 때, 맨 위에 여백을 추가하면서도 각 요소 간 간격을 유지하고 싶을 때가 있다.보통 SizedBox(height: 18.h)를 사용하여 간격을 조절하지만, 맨 처음 요소의 위쪽에도 동일한 여백을 적용하려면 별도의 빈 위젯이 필요하다.이때 **SizedBox.shrink()**를 사용하면 불필요한 공간을 차지하지 않으면서도 유동적으로 빈 공간을 추가할 수 있다.2. SizedBox.shrink()란?SizedBox.shrink()는 공간을 차지하지 않는 빈 위젯을 제공하는 SizedBox의 한 형태이다.기본적으로 SizedBox()는 특정 width 또는 height 값을 설정하여 빈 공간을 추가할 때 사용되지만,SizedBox.shrink()는 ..

Flutter 앱에서 날짜와 시간을 선택할 때, 과거 날짜나 현재 시간보다 이전 시간을 제한해야 하는 경우가 종종 있습니다. 이번 블로그에서는 **Flutter의 CupertinoDatePicker**와 유효성 검사 로직을 활용해 이러한 요구사항을 처리하는 방법을 소개합니다. 요구사항과거 날짜는 선택할 수 없다.사용자가 현재 날짜 이전의 날짜를 선택하려고 하면 이를 제한해야 합니다.현재 시간 및 과거 시간은 선택할 수 없다.동일한 날짜일 경우, 현재 시간보다 이전 시간을 선택하면 제한하도록 설정합니다.오늘 날짜와 현재 시간 이후는 선택 가능해야 한다.오늘 날짜인 경우, 현재 시점에서 몇 분 뒤의 시간까지 정상적으로 선택되도록 구현해야 합니다.제한 위반 시 사용자 알림 제공.잘못된 선택을 시도할 경우 사용..

Flutter를 활용하여 배너 UI를 구현하고, 배너 전환 애니메이션까지 적용한 과정을 공유합니다. 이번 작업에서는 반응형 디자인과 자연스러운 사용자 경험을 위해 애니메이션 효과를 추가하고, UI 구조를 체계적으로 구성했습니다.구현 목표상단 제목과 날짜 표시: 배너의 상단에 텍스트 형태로 제목과 날짜를 표시.하단 반투명 배경과 버튼: 하단에는 반투명한 검정 배경 위에 "글자" 버튼과 숫자 수를 표시.반응형 UI: 다양한 화면 크기를 지원하기 위해 ScreenUtil을 적용.애니메이션 효과: 배너 전환 시 자연스러운 애니메이션 적용.import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart..