개발/Flutter

Provider플러터 앱 내에서 전역 상태를 관리하기 위한 패키지기본적인 사용법은 아래와 같다.ChangeNotifier 를 상속받는 State 클래스에 전역 변수들 및 업데이트 함수들을 넣는다.최상위 Widget 의 build 함수에서 ChangeNotifierProvider 를 생성한다. (State 와 Wdget 을 연결)State 값이 필요한 하위 Widget 에서 context.watch() 를 통해 이벤트를 listen 한다. (또는 read, select 도 가능)설치는 아래와 같이// 커맨드로 설치flutter pub add provider// 또는 pubspec.yaml 에 아래와 같이 추가하고 flutter pub getprovider: ^6.1.2  Code Template//////..

Go Router플러터 앱 내에서 여러 screen 간의 이동을 처리할 수 있게 해주는 패키지url 기반으로 다양한 케이스들을 처리할 수 있다. path 와 query 처리 (예: "user/:id")여러개의 screen 으로 이동할 수 있는 sub-routes 기능Redirection 지원 (예: 인증되지 않은 사용자일 경우 로그인 화면으로 리다이렉트)멀티 Navigator 지원  설치는 아래와 같이$ flutter pub add go_router또는 pubspec.yaml 에 추가하고 flutter pub getdependencies: go_router: ^14.2.3   Code Template// 라우팅 설정class MyApp extends StatelessWidget { const MyApp..

Hive로컬 DB 이다. 모든 데이터는 box 에 저장된다.box 는 SQL 테이블과 비슷한 개념이지만 컬럼 같은 structure 가 따로 없고 임의의 Key-Value 형태 데이터를 담을 수 있다.box 에 저장되는 데이터는 암호화되어 저장된다. int, string, list 등 기본 데이터 타입 이외에 임의의 데이터 타입을 저장하려면 TypeAdapter 를 사용해야 한다.TypeAdpater 는 모델 클래스에 Annotation 을 추가한다. (HiveType, HiveField 등)그리고 터미널에서 아래의 명령어를 실행하면 TypeApdter 가 자동으로 생성된다.flutter pub run build_runner build  설치는 아래와 같이 추가dependencies: hive: ^2.2..

SharedPreferences가볍게 사용하기 좋은 로컬 저장소 라이브러리이다.Key-Value 형태로 데이터를 저장 및 불러올 수 있다.데이터 타입별로 read & write 함수가 있다.설치는 아래와 같이 실행flutter pub add shared_preferences  Code Template// 초기화final SharedPreferences prefs = await SharedPreferences.getInstance();// Writeawait prefs.setInt('counter', 10);await prefs.setBool('repeat', true);await prefs.setDouble('decimal', 1.5);await prefs.setString('action', 'Start..

GestureDetector특정 위젯에 대해 제스쳐 이벤트를 처리할 수 있도록 해준다.제스쳐란 탭(Tap), 더블탭(Double Tap), 오래 누르기(Long Press), 드래그(Drag), 확대/축소(Scaling) 등을 말한다.버튼처럼 기본적으로 Tap 이벤트를 처리하지 못하는 위젯들도 GestureDetector 로 감싸주면 제스쳐 이벤트를 처리할 수 있다.  Code Templateimport 'package:flutter/material.dart';/// Flutter code sample for [GestureDetector].void main() => runApp(const GestureDetectorExampleApp());class GestureDetectorExampleApp ext..

LinearProgressIndicatorline 형태의 프로그레스바이다.0.0에서 1.0 사이의 값을 직접 지정할 수 있는 Determinate 방식과값지정 없이 전체 진행 시간(?)을 지정할 수 있는 Indeterminate 방식으로 사용할 수 있다.혹은 둘 사이를 전환할 수도 있다.  Code Templateimport 'package:flutter/material.dart';/// Flutter code sample for [LinearProgressIndicator].void main() => runApp(const ProgressIndicatorApp());class ProgressIndicatorApp extends StatelessWidget { const ProgressIndicator..

Navigation앱은 보통 여러개의 앱화면(screen)으로 구성된다.플러터에서 각 screen 또는 page 를 route 라고 부르며, 각 route 를 이동할 수 있는 기능을 제공한다.앱을 구성하는 routes 가 간단한 경우는 Navigator 를 사용하고 복잡한 경우는 Router 를 사용한다.우선 Navigator 의 주요 기능은 아래와 같다. (Router 는 나중에..)Navigator.push: 새로운 route 로 이동한다.Navigator.pop: 이전 route 로 이동한다.각 route 를 이동할때 안드로이드 스타일(MaterialPageRoute) 또는 iOS 스타일(CupertinoPageRoute) 을 지정할 수 있다.이때는 아래의 위젯들도 같이 맞춰줘야 한다.Materia..

Dialog팝업 대화 상자를 띄운다.AlertDialog 를 호출해서 띄우며 주요 속성은title: 상단의 타이틀 텍스트content: 가운데의 메인 텍스트actions: 하단의 버튼들  Code Templateimport 'package:flutter/material.dart';/// Flutter code sample for [showDialog].void main() => runApp(const ShowDialogExampleApp());class ShowDialogExampleApp extends StatelessWidget { const ShowDialogExampleApp({super.key}); @override Widget build(BuildContext context) { r..

ListTile고정 높이를 가지고 text, leading icon, trailing icon 등을 가지는 row리스트의 아이템으로 많이 쓰인다.예를 들면 이런거주요 속성은title: 타이틀 텍스트leading: 타이틀 왼쪽 끝에 위치하는 아이콘trailing: 타이틀 오른쪽 끝에 위치하는 아이콘subtitle: 타이틀 아래에 위치하는 서브타이틀 텍스트dense: 텍스트 및 아이콘을 조금더 작은 크기로 표시isThreeLine: 서브타이틀에 멀티라인 허용  Code Templateimport 'package:flutter/material.dart';/// Flutter code sample for [ListTile].void main() => runApp(const ListTileApp());class ..

Card모서리와 그림자를 가지는 패널연관된 정보를 같이 보여줄때 주로 쓰인다. (앨범 정보, 장소 정보, 연락처 세부사항 등)예를 들면 이런거  Code Templateimport 'package:flutter/material.dart';void main() { runApp(MaterialApp( home: ComplexCardExample(), ));}class ComplexCardExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Complex Card Widget Example'), ..