[Flutter] shimmer 패키지로 스켈레톤 UI 적용하기

구현 목표기존에는 화면 중앙에 로딩 스피너를 배치했는데,데이터를 불러온 뒤에 시선이 다시 화면 상단으로 이동해야 하는 점이 다소 불편하다고 느꼈다. 그래서 시선 이동을 최소화하고 사용자 경험을 높이기 위해홈 화면 로딩 시 로딩 스피너 대신 스켈레톤 UI를 적용하기로 했다. shimmer 패키지플러터에서 손쉽게 shimmer 효과를 적용할 수 있도록 도와주는 패키지다.스켈레톤 UI를 만들 때 자주 활용되며, `baseColor`, `highlightColor`, `child`만 지정하면 간단하게 적용할 수 있다. 그 외에는 다음과 같은 옵션들을 제공한다. shimmer | Flutter packageA package provides an easy way to add shimmer effect in Flut..

• format_list_bulleted Flutter
• · 2025. 9. 10.
• textsms

[Flutter] Android에서 FCM 알림 아이콘 변경하기

구현 목표푸시 알림 전송 시 기본적으로 앱 아이콘이 사용되는데,이것을 알림 전용 아이콘으로 수정해서 더 깔끔하고 직관적으로 보이도록 하고 싶었다. 알림 아이콘 이미지 추가하기알림 아이콘은 다음과 같이 흰색 단색 + 투명 배경 이미지만 허용된다. `android/app/src/main/res/drawable/ic_stat_ic_notification.png` 경로에생성한 아이콘 파일을 추가했다. (파일 이름은 원하는 대로 작성하면 된다.) 간단하게 `drawble` 디렉터리에만 PNG 파일을 추가해도 되지만,더 선명한 아이콘 이미지나, 색상을 변경하는 등 디테일한 설정을 원한다면`drawable-mdpi`, `drawable-hdpi`, `drawable-xhdpi` 등 기기 해상도별로 이미지 파일을 따로..

• format_list_bulleted Flutter
• · 2025. 9. 5.
• textsms

[Flutter] Android에서 FCM 연동(3) - Topic으로 알림 수신 개별 설정하기

구현 목표모든 사용자들에게 동일하게 전송되는 알림이 있는데,설정 화면에서 각각의 알림을 개별적으로 On/Off 할 수 있도록 구현해 보았다. Token과 Topic의 차이점FCM(Firebase Cloud Messaging)을 통해 사용자가 알림을 수신하는 방식에는 대표적으로 두 가지가 있다.Token 방식: 특정 사용자에게만 알림을 보낼 때 사용Topic 방식: 다수의 사용자에게 동일한 알림을 보낼 때 사용 항목 Token Topic대상단일 기기 (1:1)여러 기기 (그룹)사용 목적사용자마다 다른 알림 전송동일한 알림을 다수에게 전송사용 예시 1:1 메시지, 주문 상태 등 이벤트, 공지 등전송 방식개별 토큰으로 전송topic으로 전송유지 조건앱 삭제·재설치 시 토큰 변경될 수 있음구독 취소 전까지 유지..

• format_list_bulleted Flutter
• · 2025. 8. 8.
• textsms

[Flutter] Android에서 FCM 연동(2) - 알림 클릭 시 웹 링크로 이동하기

구현 목표사용자가 알림을 클릭했을 때, 지정된 웹 링크로 이동하는 기능을 구현한다. FCM 메시지 수신 시 기기 상태상태설명Foreground앱이 켜져 있고 사용자에게 보여지고 있는 상태Background앱은 실행 중이지만 백그라운드로 전환된 상태 (예: 홈 버튼 누름)Terminated앱이 완전히 종료된 상태각 상태에 따라 알림 수신 및 처리 방식이 다르므로, 상태에 맞는 코드를 구현해야 한다. 기본 설정기본적인 FCM 연동 방법은 다음 글을 참고한다. [Flutter] Android에서 FCM 연동(1) - 푸시 알림 수신 테스트 flutter pub add url_launcher`url_launcher` 패키지를 설치한다. import 'package:url_launcher/url_launche..

• format_list_bulleted Flutter
• · 2025. 8. 5.
• textsms

[Flutter] Android 15에서 edge-to-edge로 인해 앱 화면이 가려지는 이슈

앱이 Android 15(API수준 35) 이상을 타겟팅해야 함얼마 전에 구글플레이에서 다음과 같은 메일을 받았다. 콘솔에서 더 자세히 확인해 봤더니 2025년 8월 31일까지프로덕션 앱을 안드로이드 15 (API 수준 35) 이상을 타겟팅하지 않으면더 이상 앱을 업데이트할 수 없다고 한다. flutterCompileSdkVersion = '35'flutterTargetSdkVersion = '35'그래서 기존 `34`였던 sdk 버전을 `35`로 올리고 앱을 다시 게시했다. Android 15 Edge-to-edge버전 업데이트 후 기능이 잘 작동하는지 이것저것 확인해 보던 중Bottom sheet를 올렸을 때 화면 하단의 내비게이션바와 앱 화면이 겹치는 것을 확인했다. 사용자들이 텍스트를 확인하거나 ..

• format_list_bulleted Flutter
• · 2025. 7. 18.
• textsms

[Flutter] Android에서 FCM 연동(1) - 푸시 알림 수신 테스트

구현 목표플러터로 만든 안드로이드 앱에서 매일 특정 시간에 DB를 조회해서조건 충족 시 푸시 알림을 보내는 기능을 구현해보려고 한다. 우선 이전 글에서 Flutter와 Firebase 기초 연동까지 구현했다. [Flutter] Android 앱에 Firebase 연동 기초 설정Firebase 프로젝트 생성 및 앱 등록Firebase에서 프로젝트를 생성하고 안드로이드 앱을 등록하면 `google-services.josn` 파일을 다운 받을 수 있다.이 파일을 `android\app\google-services.json` 디렉토리로 이동한divheer.tistory.com 이번에는 FCM 토큰을 등록해서 알림을 수신할 수 있도록 간단하게 테스트를 해 보자. FCM 메시지 수신 시 기기 상태상태설명Foregr..

• format_list_bulleted Flutter
• · 2025. 7. 16.
• textsms

[Flutter] Android 앱에 Firebase 연동 기초 설정

Firebase 프로젝트 생성 및 앱 등록Firebase에서 프로젝트를 생성하고 안드로이드 앱을 등록하면 `google-services.josn` 파일을 다운 받을 수 있다.이 파일을 `android\app\google-services.json` 디렉토리로 이동한다.민감할 수 있는 정보들이 들어있기 때문에 나는 이 파일을 `.gitignore`에 추가했다. Flutter 앱에 Firebase 추가필수 CLI 도구 설치npm install -g firebase-toolsFirebase CLI를 설치한다. firebase login다음 명령어를 실행하여 Google 계정으로 Firebase에 로그인한다. dart pub global activate flutterfire_cli디렉터리에서 다음 명령어를 실행하..

• format_list_bulleted Flutter
• · 2025. 7. 15.
• textsms

[Flutter] 앱 스토어 리뷰 요청 기능 구현하기

리뷰 요청 기능을 추가한 이유앱 출시 후 약 6개월이 지났지만, 아직 앱 스토어에 작성된 리뷰가 없다.리뷰가 하나라도 있으면 앱의 신뢰도를 높이는 데 도움이 될 것 같다는 생각이 들었다.그래서 앱 내에 리뷰 요청 기능을 추가해서 적극적으로 리뷰 작성을 유도하기로 했다. 리뷰를 요청하는 두 가지 방법인앱 리뷰 API 사용하기안드로이드와 iOS 모두 인앱 리뷰를 요청할 수 있는 API를 제공한다.UI를 따로 구성할 필요가 없기 때문에 가장 간단하게 구현할 수 있는 방식이지만OS별로 제한사항이 많기 때문에, 사용자 경험을 커스터마이징 하기 어렵다. 앱은 사용자에게 평점 버튼 또는 카드를 표시하기 전이나 표시하는 동안 사용자 의견 관련 질문 (예: '앱이 마음에 드십니까?') 또는 예측 질문 (예: '이 앱을 ..

• format_list_bulleted Flutter
• · 2025. 6. 1.
• textsms

[Flutter] 릴리즈 모드에서 로그 출력 제거하기

`print()`로 로그를 출력하면 다음과 같은 경고 메세지가 뜬다. 지금까지는 이 메세지를 그냥 무시해 왔는데 앱을 배포하기 위해서는 릴리즈 모드에서 로그가 출력되지 않도록 할 필요성을 느꼈다. 프로덕션 코드에서는 print() 호출을 피해라DO avoid `print` calls in production code.For production code, consider using a logging framework. If you are using Flutter, you can use `debugPrint` or surround `print` calls with a check for `kDebugMode`다트 공식문서에서 프로덕션 코드에서는 `print()`를 피하라는 경고와 함께, 로그를 출력할 다른 방..

• format_list_bulleted Flutter
• · 2024. 12. 11.
• textsms

[Flutter] 뒤로 가기 두 번 눌러서 앱 종료되도록 하기 | PopScope

앱 실행 중에 마지막 스택에서 뒤로 가기 버튼을 누르면 "뒤로 가기를 한 번 더 누르시면 종료됩니다"라는 내용의 스낵바가 뜨는 기능을 구현해 보자.  PopSope 위젯 추가하기DateTime? backPressedTime;@overrideWidget build(BuildContext context) { return PopScope( canPop: false, onPopInvoked: (bool didPop) { if (didPop) { return; } DateTime nowTime = DateTime.now(); if (backPressedTime == null || nowTime.differ..

• format_list_bulleted Flutter
• · 2024. 11. 27.
• textsms