개발노트

이번 포스팅에서는 카메라 사용권한을 사용자에게 얻은 뒤, 카메라로 영상을 녹화하고, 원하는 앨범명을 설정한 뒤, 저장하는 기능을 구현합니다. 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..

전체사이트,체크박스, Search 기능이 있는 Row가 ListView와 함께 Scroll되어야하기 때문에 NestedScrollView를 사용하여 SliverToBoxAdapter 에 Row를 넣어주고, body에 ListView.builder()를 넣었습니다. GoRouter를 이용하여 url로 화면 진입가능하도록 설정, Web 확장성 고려해보았습니다. 단말기마다 크기가 다르기 때문에 MediaQuery와 LayoutBuilder를 사용하여 비율로 위젯크기를 설정하였습니다.

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() 메서드가 있으며, 이를 활용한 페이지 전환..

Google Font Google Font에서 원하는 Font를를 적용하는 2가지 방법을 설명드리겠습니다. 1. Material Design 2 에서 Code Generator로 생성된 Code를 사용하는 방법 2. 구글 폰트에서 원하는 폰트를 가져오는 방법 + 번외편: 위 과정이 다 귀찮고 나는 TextStyle을 통일하기만 하면된다면, Typography 를 사용하는 방법 우선 pub에 들어가서 Google Font 패키지를 프로젝트에 설치합니다. pub 설치링크: https://pub.dev/packages/google_fonts/install google_fonts | Flutter Package A Flutter package to use fonts from fonts.google.com. Su..

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..

NestedScrollView 개발하다보면 각각의 위젯마다 스크롤이 따로되는 위젯들을 마주하게됩니다. 이를 하나의 스크롤로 묶어서 제어하고 싶을 때 NestedScrollView를 사용하면됩니다. NestedScrollView는 Flutter에서 사용되는 스크롤 가능한 위젯의 중첩된 구조를 만들기 위한 유용한 위젯입니다. 이것은 여러 슬리버 (Sliver) 위젯과 스크롤 가능한 컨텐츠를 함께 사용하여, 복잡한 스크롤 레이아웃을 만들 수 있게 해줍니다. 주로 스크롤 가능한 헤더와 본문을 함께 사용하여 구현됩니다. NestedScrollView는 머티리얼 디자인 앱에서 많이 사용되며, 다음과 같은 주요 구성 요소로 구성됩니다: Header Slivers: 이 부분에는 앱의 헤더 또는 헤더와 관련된 위젯이 포..

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

AnimatedList AnimatedList가 앞서 소개해드린 ListView 애니메이션 효과 구현 보다 더욱 간단한 이유는 위젯 자체에서 Animation을 제공한다는 점입니다. 따라서 Animation Tween을 따로 구현할 필요가 없어 소스가 더욱 간결해집니다. ListView 위젯에 애니메이션 효과를 넣어야한다면 AnimatedList를 사용하는 것이 더욱 간단합니다. 예시. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @o..