최근 많은 앱에서 사용자 참여도를 높이기 위해 복권이나 룰렛 같은 게임 요소를 도입하고 있습니다. 특히 토스의 복권 기능은 직관적인 UI와 부드러운 애니메이션으로 많은 사랑을 받고 있죠. 이번 포스트에서는 Flutter를 사용해서 토스 복권과 비슷한 스크래치 복권을 구현하는 방법을 단계별로 알아보겠습니다.- 가독성있게 해야하는데 빨리 해본다고 코드가 지저분한점 양해 바랄게요 ㅠ ... 영상 미리보기 프로젝트 구조먼저 전체적인 구조를 살펴보겠습니다:lib/├── module/│ └── main/│ └── earn/│ └── muppitto/│ └── muppitto_view.dart # 메인 복권 페이지 1. 메인 복권 페이지 구현먼저 복권을 구..

2025년 5월 20일, Dart 팀이 Dart 3.8을 공식 발표했습니다. 이번 릴리스는 생산성 향상과 크로스 플랫폼 개발을 위한 여러 가지 유용한 기능이 포함되어 있으며, 코드 포맷팅과 문법 개선, 크로스 컴파일, 웹 핫리로드, FFI 개선 등이 주요 핵심입니다.이번 블로그에서는 Dart 3.8의 핵심 기능들을 간결하게 정리해보겠습니다.1. 코드 포맷터(Formatter) 개선Dart 3.8부터 dart format 명령어를 실행하면 더 똑똑한 스타일 자동 정리가 적용됩니다.trailing comma 자동 처리→ 이제 불필요한 줄바꿈을 줄이고, 더 깔끔한 포맷을 유지합니다.중첩된 컬렉션 / 메서드 체이닝 정렬 개선→ 가독성이 더욱 향상된 코드 스타일 제공기존 스타일을 유지하고 싶다면 analysis_..

예전 프로젝트를 업데이트하고 다시 빌드하려는데, 갑자기 다음과 같은 에러가 발생했습니다.include of non-modular header inside framework module 'firebase_core.FLTFirebasePlugin'Firebase 관련 헤더 파일에서 발생하는 이 에러는 대부분 iOS의 Build Settings 설정 문제로 발생합니다. 처음에는 뭔가 복잡한 문제일 줄 알고 이것저것 시도해봤는데, 알고 보니 아주 간단한 설정 하나로 해결됐습니다.해결 방법Xcode에서 프로젝트를 엽니다.상단 탭에서 Build Settings로 이동한 후, All을 선택합니다.검색창에 Allow Non-modular Includes In Framework Modules를 입력합니다.해당 항목을 Y..

Flutter로 앱을 개발하면서 서버 API를 호출하는 작업은 거의 모든 프로젝트에서 기본적으로 들어가는 요소다. 하지만 간단해 보이는 API 호출도 실제 운영 환경에서는 다양한 예외 상황과 문제를 발생시킬 수 있다. 이번 글에서는 Flutter에서 API를 호출할 때 반드시 고려해야 할 사항들을 정리해본다.1. 적절한 예외 처리와 에러 메시지 제공API 호출은 항상 성공한다는 보장이 없다. 네트워크 단절, 서버 다운, 인증 만료, 데이터 포맷 오류 등 다양한 이유로 실패할 수 있다. 이런 상황을 고려하지 않고 try-catch 없이 호출만 한다면 앱이 크래시나 무반응 상태로 이어질 수 있다.예외는 반드시 잡아야 한다 (try-catch)사용자에게 의미 있는 에러 메시지를 보여주자 (예: "인터넷 연결을..

Flutter 앱을 개발하다 보면 print() 함수만으로는 한계가 느껴질 때가 많습니다. 디버깅을 위해 로그를 찍었지만, 원하는 정보가 제대로 보이지 않거나, 출력 순서가 꼬여서 원인을 파악하는 데 애를 먹은 경험이 누구나 있을 겁니다.이럴 때 유용하게 사용할 수 있는 도구가 바로 logger 패키지입니다. logger는 단순한 로그 출력 그 이상을 제공하며, 개발 초기부터 도입하면 디버깅뿐 아니라 유지보수 단계에서도 매우 큰 도움이 됩니다.logger가 왜 필요할까?기본 print() 함수는 너무 단순해서 로그의 종류(예: 에러, 경고, 정보 등)를 구분할 수 없고, 포맷도 일정하지 않아 가독성이 떨어집니다. 반면 logger는 로그 레벨, 컬러 출력, 스택 트레이스 표시, 타임스탬프 등 다양한 기능..

긴 리스트나 섹션이 많은 화면을 구성하다 보면, 사용자에게 현재 보고 있는 구간이 어디인지 명확하게 보여주는 UI가 필요할 때가 많습니다. 이럴 때 유용하게 사용할 수 있는 Flutter 라이브러리가 바로 flutter_sticky_header입니다.이번 글에서는 flutter_sticky_header 라이브러리를 통해 스크롤 중에도 헤더가 고정되는 UI를 어떻게 구현할 수 있는지 소개하고, 실제로 적용할 수 있는 코드 예제와 함께 왜 이 라이브러리가 유용한지를 설명해보겠습니다.flutter_sticky_header란?flutter_sticky_header는 이름 그대로 스크롤 중에도 헤더가 상단에 고정(sticky) 되도록 만들어주는 라이브러리입니다. Flutter의 CustomScrollView와 S..

앱을 개발하다 보면, 카카오 로그인은 비교적 쉽게 붙일 수 있는 소셜 로그인 기능 중 하나다.개발 단계에서는 잘 작동하지만, 앱을 배포하고 나면 갑자기 카카오 로그인이 작동하지 않는 문제가 생길 수 있다.나도 실제로 배포 후 이런 문제를 겪었고, 삽질 끝에 해결한 방법을 공유해본다.증상디버그 모드에서는 로그인 잘 됨.하지만 릴리즈(배포) 버전에서는 아무런 반응 없이 실패하거나, 로그인 창 자체가 안 뜸.PlatformException이나 kakao_flutter_sdk 내부에서 실패 로그가 나오는 경우도 있음.원인배포된 앱에서는 key hash (키 해시) 값이 다르기 때문이다.디버그 키와 릴리즈 키는 서로 다르기 때문에, 카카오 개발자 센터에 릴리즈 키 해시를 등록하지 않으면 배포 앱에서 인증이 실패하..

​GetIt은 Flutter에서 의존성 주입(Dependency Injection, DI)을 간편하게 구현할 수 있도록 도와주는 라이브러리입니다. 이를 통해 싱글턴 객체를 효율적으로 관리하고, 애플리케이션 전역에서 동일한 인스턴스를 손쉽게 호출할 수 있습니다.​왜 GetIt을 사용해야 할까?전역 객체 관리: Provider 없이도 의존성을 전역적으로 관리할 수 있습니다.​싱글턴 패턴 지원: 한 번 등록하면 앱 어디서든 동일한 인스턴스에 접근할 수 있습니다.​직관적인 API: getIt() 한 줄로 객체를 가져올 수 있습니다.​생성자 주입 지원: 팩토리 패턴을 통해 객체 생성 로직을 유연하게 관리할 수 있습니다.​GetIt 설치dependencies: get_it: ^7.6.4 GetIt 인스턴스 등록i..

Flutter에서 로컬 데이터를 저장할 때 가장 많이 사용되는 라이브러리 중 하나가 Hive다. SQLite와 달리 스키마를 정의할 필요가 없고, 빠른 속도를 자랑하며, 복잡한 관계형 데이터 없이도 간단한 데이터 저장 및 관리가 가능하다. 이 글에서는 Hive의 개념부터 설치, 설정, 예제 코드까지 상세히 설명해보겠다.1. Hive란?Hive는 경량 Key-Value 기반 NoSQL 데이터베이스로, Flutter 및 Dart 애플리케이션에서 로컬 데이터를 저장할 때 사용된다.다음과 같은 특징이 있다.빠른 성능: SQLite보다 읽기/쓰기 속도가 빠르다.NoSQL 구조: 테이블을 정의할 필요 없이, 객체를 바로 저장할 수 있다.직렬화 불필요: JSON처럼 변환할 필요 없이, Dart 객체 그대로 저장이 가..

Flutter에서 버튼은 앱의 주요 상호작용 요소 중 하나입니다. 하지만 기본 버튼 스타일을 그대로 사용하는 경우 디자인이 다소 밋밋할 수 있습니다. 이번 글에서는 Flutter의 ButtonStyle을 활용해 다양한 스타일을 적용하는 방법을 정리해보겠습니다.Flutter의 버튼 스타일링을 다룰 때 ButtonStyle을 이해하는 것이 핵심입니다. 이를 통해 색상, 크기, 패딩, 테두리, 그림자 등의 다양한 속성을 커스터마이징할 수 있습니다.ButtonStyle 기본 개념Flutter의 ButtonStyle은 ElevatedButton, TextButton, OutlinedButton 등에 공통적으로 적용할 수 있는 스타일 속성을 정의하는 클래스입니다. 즉, 버튼을 꾸밀 때 하나의 스타일을 여러 버튼에 ..