개발노트

앱 설정값을 각각의 화면에 제공해야할 경우가 있습니다. (앱의 음소거 상태 등...) InheritedWidget 를 main.dart 에서 최상위 위젯으로 두면 InheritedWidget 에서 정의한 데이터를 모든 화면에서 쉽게 사용할 수 있습니다. 하지만, InheritedWidget 의 한계점은 값을 제공할뿐, 값의 수정이 불가능하다는 점입니다. 이를 보완하는 방법은 StatefulWidget을 하나 만들어서 InheritedWidget 을 자식으로 설정합니다. 값의 수정하는 Function() 을 StatefulWidget에 만들어줍니다. 이 Function()을 InheritedWidget 에서 받을 수 있도록 InheritedWidget 의 reqired에 추가합니다. 전달된 Function..

Flutter LifeCycle 이용하기 Flutter 애플리케이션의 Life Cycle(생명주기)은 애플리케이션이 시작되고 종료될 때 다양한 이벤트와 상태 변화를 관리하는 중요한 부분입니다. Flutter 애플리케이션의 라이프사이클은 다음과 같은 주요 단계로 나눌 수 있습니다: resumed: 애플리케이션이 활성화된 상태입니다. 사용자가 앱을 화면에 보고 상호작용하는 상태입니다. inactive: 애플리케이션이 비활성화된 상태입니다. 다른 앱으로 전환하거나 홈 버튼을 누른 경우 앱이 이 상태로 전환됩니다. paused: 애플리케이션이 일시정지된 상태입니다. 전화가 오거나 다른 중요 이벤트로 앱이 일시정지될 때 발생합니다. detached: 애플리케이션이 분리된 상태입니다. 이 상태는 애플리케이션이 완전..

핸드폰에 저장되어있는 이미지, 동영상을 가져오거나 촬영할 때, ImagePicker를 사용하면됩니다. 앞서 포스팅한 camera 패키지와 다른점 녹화시간을 지정하는 기능을 제공하지않으며 기본적인 촬영 버튼 등. UI를 제공한다는 점입니다. 준비물. 사용하기 위해서 pubdev에서 패키지를 설치해줍니다. - pubdev ImagePicker 설치링크: https://pub.dev/packages/image_picker image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev IOS사용을 ..

이번 포스팅에서는 카메라 사용권한을 사용자에게 얻은 뒤, 카메라로 영상을 녹화하고, 원하는 앨범명을 설정한 뒤, 저장하는 기능을 구현합니다. Flutter App 내에서 Camera를 사용해야한다면 pubdev에서 제공되는 Camera Package를 적용하면됩니다. + Camera녹화전 카메라와 마이크 녹음 권한허용을 사용자에게 요청하기위해 Permission_handler를 사용합니다. + 녹화된 영상을 저장하기 위해 gallery_saver를 사용합니다. 준비물 및 세팅. 1. 아래 링크를 통해 Project에 Camera를 설치합니다. - pubdev Camera 패키지 설치 링크: https://pub.dev/packages/camera/versions/0.10.5+5 camera | Flutt..

GoRouter GoRouter 방식(Navigator 2.0)이 필요한 이유 Flutter가 Web을 지원하면서 url 방식으로 Router를 설정하여 Navigation 할 수 있는 방식이 필요해졌습니다. 만약 Android와 IOS만 지원하는 App을 개발중이라면 앞서 포스팅한 Navigator 1.0방식을 사용하셔도됩니다. - Navigator 1.0방식: https://mroh1226.tistory.com/71 8. [Flutter] Navigator.push(), pop() 화면 전환하기 Flutter에서 Navigator 클래스는 앱 내에서 화면을 전환하는 데 사용됩니다. 새 화면 띄울때 사용하는 push() 현재 화면을 종료할때 사용하는 pop() 메서드가 있으며, 이를 활용한 페이지 전환..

ThemeMode main.dart에 작성되어있는 MaterialApp 위젯의 themeMode: 속성에 ThemeMode.dark, ThemeMode. light, ThemeMode. system 3가지 옵션을 줘서 강제로 Mode를 설정할지, 사용자의 Mode에 따라 설정할지 테마를 정할 수 있습니다. themeMode: ThemeMode.dark 일경우: 강제로 dark 모드로 설정됨 themeMode: ThemeMode.light 일경우: 강제로 light 모드로 설정됨 themeMode: ThemeMode.system 일경우: 사용자 모드에 따라 설정됨 themeMode: ThemeMode.system 으로 설정하여 다크모드, 라이트모드 테마 따로 지정하기 Theme.system 일 경우, - ..

LayoutBuilder LayoutBuilder는 부모 위젯의 제약 조건(constraints)을 사용하여 자식 위젯의 크기와 위치를 조절하는데 사용됩니다. 이 위젯은 주로 부모 위젯이 자식 위젯에 대한 크기나 제약 조건을 지정하는 경우에 유용합니다. LayoutBuilder의 자식 위젯은 BuildContext와 BoxConstraints를 매개변수로 받아 해당 제약 조건 내에서 레이아웃을 조정할 수 있습니다. LayoutBuilder 와 MediaQuery 비교 MediaQuery는 디바이스의 화면 크기와 특성을 얻는데 사용됩니다. 이는 앱의 반응형 디자인 및 다양한 화면 크기에 대응하는데 유용합니다. MediaQuery를 사용하면 디바이스의 화면 크기, 화면 밀도, 방향 등과 같은 정보를 얻을 수..

ListWheelScrollView ListWheelScrollView 위젯은 Flutter에서 사용자에게 원하는 항목을 선택할 수 있는 회전 목록을 만드는 데 사용되는 위젯 중 하나입니다. 이 위젯은 원형 목록을 나타내며, 사용자가 항목을 회전하고 선택할 수 있게 해줍니다. 주로 선택 목록, 설정 또는 날짜 및 시간 선택과 같은 사용자 상호 작용 요소를 구현할 때 사용됩니다. itemExtent: 항목의 크기를 지정하는 속성입니다. 모든 항목은 동일한 크기여야 합니다. children: ListWheelScrollView에 표시할 항목을 정의하는 위젯 목록입니다. controller: 스크롤 위치를 제어하는데 사용되는 FixedExtentScrollController를 지정합니다. magnificati..

CustomScrollView CustomScrollView는 Flutter에서 스크롤 가능한 컨텐츠를 구축하고 사용자 정의 스크롤 동작을 구현하는 데 사용되는 위젯입니다. CustomScrollView는 스크롤을 통해 여러 슬리버(slivers)를 관리하고 각 슬리버가 다른 레이아웃을 가질 수 있도록 해줍니다. 슬리버는 스크롤 가능한 영역 내에서 다양한 위젯 및 레이아웃을 정의하는 데 사용됩니다. CustomScrollView를 사용하면 다음과 같은 장점이 있습니다: 다양한 레이아웃 및 위젯 조합: 여러 슬리버를 사용하여 다양한 위젯 및 레이아웃을 조합할 수 있으므로 복잡한 UI를 구축할 때 유용합니다. 스크롤 제어: 슬리버 간에 스크롤 동작을 제어할 수 있으므로 스크롤 가능한 영역을 사용자 지정할 수..

AnimationController, Animation으로 애니메이션 효과 적용하기 개인적으로 노마드코더에서 Flutter를 배우면서 AnimationController, Animation 작성 방법과, 이것들을 사용하려면 왜 with SingleTickerProviderStateMixin 을 해줘야하는지 이해하기까지 어려웠습니다. 이 글에서는 AnimationController, Animation을 생성하고 애니메이션 효과를 적용하는 방법 2가지를 소개하고, 이를 AnimatedModalBarrier, SlideTransition, RotationTransition 위젯에 적용시켜보겠습니다. 구현할 애니메이션 설명 ListTile의 속성 leading:에 들어있는 Icon을 90도 회전시키는 애니메이션..