코드로 우주평화

이번 글에서는 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()..

웹뷰를 구현했을 때, 막상 홈버튼이나 뒤로 가기 버튼이 없을 때가 있다. (혹은 위 이미지 처럼 엉뚱한 페이지로 빠지기도 한다) 이럴 때는 WebViewController를 이용해 해당 WebView 위젯을 컨트롤할 수 있다. WebViewController 사용법 해당 HomeScreen 클래스 안에 null이 올 수 있는 controller라는 공용 변수를 선언한다. class HomeScreen extends StatelessWidget { WebViewController? controller; ... WebView 위젯 파라미터에 onWebViewCreated를 추가한다 이때 받은 controller을 앞서 생성해두었던 공용 변수 this.controller 에 할당한다. class HomeScr..

webview_flutter 사용법 webview_flutter 는 웹페이지를 앱 형태로 보여주기위해, WebView 위젯을 제공하는 Flutter 플러그인이다. 설치방법 pubspec.yaml 파일의 dependencies 에 'webview_flutter: {버전}' 을 추가한다. Pub get 하는 거 잊지 말긔. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 webview_flutter: ^3.0.0