Nick Dev

목차 AppLifecycleState 관리 velocity_x 패키지 기초 사용법 flutter_native_splash 패키지 1. AppLifecycleState 관리 class _MyHomePageState extends State with WidgetsBindingObserver { int _counter = 0; late ShakeDetector detector; @override void initState() { WidgetsBinding.instance.addObserver(this); detector = ShakeDetector.autoStart( onPhoneShake: () { setState(() => _counter++); }, shakeThresholdGravity: 1.5, );..

fastcampus의 [15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발] 강의를 참고해 작성했습니다. 1. 다국어 지원하는 방법_어플 이름 설정하기 android → app → main 으로 가서 AndroidManifest.xml 파일 열기 우측 상단의 'Open for Editing in Android Studio' 클릭하면 새 윈도우 열림 3 번째 사진과 같이 원하는 String을 먼저 영문으로 설정 → 기본적으로 영어권 사람들에게 보여질 문자들 우측 상단의 Open editor를 클릭해 번역할 언어 설정 국가 표시에서 Korean을 찾은 후 빨간 네모 칸에 'Shake Count App'의 한글 번역을 적는다 저장 후 'values-ko-rKR' 디렉토리 밑에 strings...

1. MaterialApp( ... ) Widget theme : ThemeData( ... ) colorScheme : 앱의 전반적인 색을 설정 primary : 메인 색상 secondary : 두 번째 색상 bottomNavigationBarTheme 앱 하단의 네비게이션바 정의할 때 사용 showSelectedLabels : false일 경우, 선택된 항목의 label이 표시되지 않음 showUnselectedLabels : false일 경우, 선택되지 않은 항목 label 표시되지 않음 selectedItemColor : 선택된 항목의 색을 결정할 수 있음 둘 다 false로 설정하면 항상 Icon만 보이게 설정 가능 2. Scaffold Widget appBar를 화면에 따라 보이거나 사라지게 ..

Theme 관련 코드는 실무 시 따로 디렉토리 만들어서 관리하는 것이 유지 보수에 좋다 1. ThemeData : Material Design Theme에 대한 색상 및 Typography 값을 정의하고 보유하는 클래스 colorScheme 앱의 전반적인 색의 theme을 정해 간편하게 디자인 가능 간편한 방식 2가지 ColorScheme.light() or .dark() ColorScheme.fromSeed ( ... ) textScheme 앱 전반적으로 사용할 수 있는 다양한 스타일의 텍스를 캡슐화하는 인터페이스 bodyMedium, Large 등 정의해놓고 이후에 Text Widget에서 style에서 선언해 사용 가능 useMaterial3 useMaterial3: true 앱이 Material3..

목차 1. bottomNavigationBar 2. Navigator 3. go_router 1. bottomNavigationBar ( 페이지 간의 이동은 아님 ) import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp( home: HomeWidget(), )); } class HomeWidget extends StatefulWidget { const HomeWidget({super.key}); @override State createState() => _HomeWidgetState(); } class _HomeWidgetState extends State { late int index; @override void i..

1. 외부 라이브러리 사용하는 방법 dependencies: flutter: sdk: flutter english_words: ^4.0.0// pub.dev 에서 가져온 외부 라이브러리 cupertino_icons: ^1.0.2 pubspec.yaml flutter에서 환경 설정하는 파일 version : 안드로이드 버전 변경 / ios는 따로 주의사항 : 여기서 간격은 2칸씩이다 dependencies : 외부 라이브러리 가져오는 곳 pub.dev 에서 외부 라이브러리 가져올 수 있음 dependencies 아래에 넣으면 된다 ^ (caret) : 1.0.2 ≤ version < 2.0.0 의 버전은 사용할 수 있다는 의미 2. 로컬 데이터 사용하기 # pubspec.yaml assets: - asse..

1. CallBack class TestWidget extends StatefulWidget { const TestWidget({super.key}); @override State createState() => _TestWidgetState(); } class _TestWidgetState extends State { int value = 0; @override Widget build(BuildContext context) { return Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Count : $value', style: const TextStyle(fontSize: 30), ), TestButton(addCounter..

1. CheckBox Widget class TestCheckBox extends StatefulWidget { const TestCheckBox({super.key}); @override State createState() => _TestCheckBoxState(); } class _TestCheckBoxState extends State { late List values; @override void initState() { super.initState(); values = [false, false, false]; } @override Widget build(BuildContext context) { return Row( children: [ Checkbox( value: values[0], onCha..

Flutter cross platform이다 (android, ios 등 한번에 작업 가능) 대부분 widget으로 구성되어 있다 → UI의 가장 기본적인 단위 widget들간의 관계 : Widget Tree로 표현 가능 state stateless widget : 화면 갱신할 필요 없는 정적 화면 구성시 사용하는 widget stateful widget : 특정 상황에서 화면 갱신할 필요 있는 화면 구성 시 사용하는 widget 변경사항 반영 hot reload : 변경 사항을 build 하지 않으면서 바로 앱에 반영해준다. 즉, 앱의 상태가 변하지 않으며 변경 코드를 반영해준다 ( ex. 폰트 변경, color 변경 등...) hot restart : 변경 사항을 반영할 때 앱을 재시작하며 반영한다...