코드로 우주평화

Flutter로 안드로이드 앱을 개발할 때에는 '뒤로 가기 버튼'의 동작을 핸들링하는 것이 중요합니다.   안드로이드에서는 위 이미지와 같은 '뒤로 가기 버튼'을 통해 현재 화면을 종료하고 이전 화면으로 돌아가는 기능을 제공합니다. 문제는 앱을 실행 중일 때에 뒤로 가기 버튼을 누르면 앱이 그대로 종료될 수 있다는 것입니다.  만약 앱 내에서 무언가 열심히 진행하다가 손이 미끄러져서(?) 뒤로 가기 버튼을 누르게 된다면??? 그 순간 앱이 곧바로 꺼지면서 휘발성 상태 값들이 사라지게 됩니다. 그렇기 때문에 안드로이드 앱을 개발할 때에는 사용자가 실수로 앱을 종료하지 않도록 뒤로 가기 버튼을 제어할 필요가 있습니다. Flutter에서는 WillPopScope 위젯을 사용하여 이러한 동작을 제어할 수 있습니..

이번 글에서는 Flutter 프로젝트에서 안드로이드 13(API 33) 이상의 이미지 권한을 어떻게 처리하는지 정리해 보겠습니다. 문제의 시작저는 현재 Facepop 이라는 사진 편집 앱을 개발하고 있습니다. Facepop - Google Play 앱재치있는 단체사진 Facepop으로 만들고 안전하게 공유하세요!play.google.com 앱을 완성하고 나서 제 안드로이드 폰으로 앱이 정상 동작하는 것을 확인하고 기쁜 마음으로 플레이스토어 출시를 했습니다. 그런데 앱을 다운받은 다른 사용자들에게서 '갤러리' 탭이 동작하지 않는다는 제보를 받았습니다. Facepop은 사진 편집 앱이기에 갤러리 탭에서 사진을 선택하는 과정이 필수적이었고 사진을 불러올 수 없는 것은 매우 치명적인 상황이었습니다. 하지만 확인..

이번 글에서는 Flutter 앱에서 iOS 알림 동작을 세밀하게 설정하는 방법을 다뤄보겠습니다. 특히, 앱 실행 중 알림 표시, 알림음 재생, 앱 아이콘 배지 표시와 같은 기능을 설정하고 iOS 버전에 따라 알림 스타일이 다르게 동작하도록 처리하는 방법을 알아보겠습니다. 먼저 변경 전 코드와 변경 후 코드를 보여드리겠습니다. 변경할 파일은 AppDelegate.swift 입니다.  변경 전, 기존 코드import UIKitimport Flutter@UIApplicationMain@objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunching..

Flutter 앱에서 TextField를 사용해 한글을 입력할 때, 간혹 자음과 모음이 분리되는 현상이 발생합니다. 예를 들어 "안녕하세요"를 입력하려고 하면 "ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ"처럼 입력되는 경우입니다. 이 문제는 입력기(IM)가 한글을 조합하는 과정에서 Flutter가 TextField의 값을 바로 수정하도록 구현했을 때 발생합니다. 이번 글에서는 이 문제를 어떻게 해결할 수 있는지 알아보겠습니다.  자음과 모음이 분리되는 이유한글은 자음, 모음, 자음을 조합하여 한 글자를 만듭니다. 예를 들어 "안"은 "ㅇ + ㅏ + ㄴ"이 결합된 글자입니다. Flutter에서 onChanged 이벤트를 사용하다 보면 텍스트를 수정하는 과정에서 입력기(IME)가 이 조합 과정을 끝내기도 전에 TextField..

문제 상황Flutter에서 FloatingActionButton을 사용할 때, 버튼을 터치하면 사각형 모양의 ripple effect(물결 효과)가 보이는 경우가 있습니다. 버튼은 원형인데 터치 효과가 사각형으로 보이면 UI가 어색해 보이죠. 문제의 화면 원인이 현상이 발생하는 이유는 Material Design의 터치 피드백 처리 방식 때문입니다. FloatingActionButton이 Container 안에 직접 들어있을 때는 기본적으로 사각형 영역에 대해 ripple effect가 적용됩니다. 아래 코드는 FloatingActionButton이 Container 안에 직접 들어있을 코드 예제입니다.Container( decoration: BoxDecoration( gradient: Linea..

Flutter 앱을 개발했지만 앱의 아이콘이 기본 Flutter 아이콘이거나, 앱을 실행했을 때 기본 Flutter 스플래시 화면이 뜨는 경우가 있습니다. 이것은 아직 앱 아이콘과 스플래시 화면을 설정하기 않았기 때문입니다. 이번 글에서는 앱의 아이콘과 실행 시 나타나는 스플래시 화면을 어떻게 변경하고 커스터마이징할 수 있는지 알아보겠습니다.  1. 준비 단계1.1. 필요한 이미지 준비하기앱 아이콘 이미지: 정사각형 이미지 (권장 크기: 1024x1024 px, PNG 형식)스플래시 이미지: 앱 실행 중 나타나는 이미지를 준비 (배경이 투명한 PNG 추천)1.2. 이미지 경로 지정이미지를 프로젝트 내 assets 디렉터리에 저장합니다. 예제 구조는 다음과 같습니다.root/├── assets/│ └─..

Flutter로 앱을 개발했습니다. 그렇다면 출시를 해야겠죠? 이 글은 Flutter로 개발한 앱을 Google Play 스토어에 출시하는 과정을 정리했습니다. 목차1. 계정 생성2. 앱 빌드하기3. 앱 생성 및 등록정보4. 내부 테스트5. 비공개 테스트6. 프로덕션 검수  1. 계정 생성Google Play 개발자 계정 생성- Google Play Console에 접속합니다.- Google Play 개발자 계정 등록합니다.    - 계정 등록비는 25 달러 인데, 한 번만 결제하면 됩니다.    - 결제 후 본인 확인 및 계정 활성화 과정을 진행합니다. 본인 확인이 완료되면 이메일로 알림을 받는데요. 이 과정이 며칠 걸린다고 합니다. 본인 확인을 기다리면서 앱 빌드를 준비합니다.  2. 앱 빌드하기키스..

Flutter에서 Wrap 위젯 사용법Flutter로 앱을 개발할 때, 여러 개의 위젯을 한 줄에 배치해야 하거나 화면 크기에 맞춰 유동적으로 배치하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 Wrap 위젯이죠. 오늘은 Wrap 위젯의 사용법과 장점에 대해 소개해보겠습니다.  Wrap 위젯이란?Wrap은 말 그대로 아이템을 감싸주는 레이아웃입니다. 보통 Row나 Column을 사용하면 아이템들이 한 방향으로만 배치돼서 화면 크기에 따라 넘쳐버리는 문제가 생기곤 하는데요. 반면, Wrap은 공간이 부족할 때 자동으로 줄바꿈을 해주기 때문에, 반응형 레이아웃을 쉽게 만들 수 있습니다.   기본 사용법Wrap 위젯의 기본적인 구조는 아래와 같습니다.Wrap( spacing: 20.0, // 열 사이의..

void main() { DateTime now = DateTime.now(); // 현재 날짜시간 print(now); // 2023-01-01 20:17:51.546 print(now.year); // 2023 //년, 월, 일, 시, 분, 초, 밀리 Duration duration = Duration(seconds: 60); // 기간을 나타냄 print(duration); // 0:01:00.000000 print(duration.inDays); // 0 print(duration.inHours); // 0 print(duration.inMinutes); // 1 print(duration.inSeconds); // 60 print(duration.inMilliseconds); // 60000 D..

main import 'package:flutter/material.dart'; import 'package:image_carousel/screen/home_screen.dart'; void main() { runApp( MaterialApp( home: HomeScreen(), ), ); } 설명은 생략 HomeScreen StatefulWidget class _HomeScreenState extends State { Timer? timer; PageController controller = PageController( initialPage: 0, ); State에 Timer 와 PageController 선언 initialPage는 인덱스니까 당연히 0 @override void initState()..