전체 글
-
Flutter_18. App State_Provider(feat. Riverpod)> Frontend/Flutter 2023. 5. 21. 18:04
0. 학습내용 - State - Provider -Riverpods 1. State의 두 종류, App State 와 Widget State App State: Flutter App 전반에서 사용되는 data 로, 여러 Widget 에서 공통적으로 사용되는 것을 의미. Widget State: Ephemeral State | Local State라고도 불리며, 한 Widget 에서만 사용되는 것을 의미. 2. Provider 란 ? concept of "InheritedWidget" and "ChangeNotifier" to manage application state Provider를 통해서 전달해줘도 되지만, 이번 포스트는 Rivepods를 사용할 예정 3. Riverpods Riverpod: sta..
-
Flutter_17. GridView & Inkwell & FadeImage & Stack> Frontend/Flutter 2023. 5. 17. 17:35
0) 학습 내용 GridView & Navigator.push Inkwell & BoxDecoration meals.dart setup FadeImage Stack & Positioned ModelItemTrait setup 1) GridView & Navigator.push Controls the layout of grid: default [top to bottom], [left to right ], [horizontally by 2 ] body: GridView( padding: const EdgeInsets.all(24), // gridDelegate: controls the layout of Grid : top to bottom, left to right, horizontally 2 gridDel..
-
Flutter_16. Flutter Internals, Way of Render with Tree, Key, Mutating Values> Frontend/Flutter 2023. 5. 16. 21:13
0) 학습 내용. Flutter Render 와 Tree Render 와 Tree를 통해 Flutter예제 Key Mutating Values ( final, const, var) 1) Flutter Render 와 Tree Widget Tree: Widget 군집체) 1. Widget Tree는 APP UI를 구성하는 위젯들의 계층 구조 2. Widget Tree는 APP의 화면 구조를 정의하고, 각 위젯이 어떻게 배치되고 상호작용하는지 결정. 3. Widget Treesms 불변성을 가지며, 상태가 변경되면, 새로운 위젯 트리가 생성 Element Tree: (Widget Tree 의 사용 설명서) 1. Element Tree는 Widget Tree 기반으로 실제로 화면에 렌더링되는 요소를 나타냄. ..
-
Flutter_15. Building Responsive and adaptive User Interfaces> Frontend/Flutter 2023. 5. 15. 21:25
0) 학습 목표 화면 잠금 MediaQuery를 사용하여, responsive 앱 생성 화면 회전에 따른 showModalBottomSheet 수정 1) 화면 잠금 (적용 X,확인용) import 'package:flutter/services.dart'; main.dart 화면에 import. void main() { // make sure that locking orientation and run the app. WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, // locked orientation ]).then((fn) { runApp( main.d..
-
Flutter_14. Theme in Widget & Dark Mode & Named Constructor & For in> Frontend/Flutter 2023. 5. 12. 20:25
0) 학습 내용 main.dart에서 작성된 Theme 을 widget에서 사용 Dark Mode Constructor ( named Constructor) For in 1) main.dart에서 작성된 Theme 을 widget에서 사용 ... 생략 theme: ThemeData().copyWith( ... 생략 main.dart에서 만들어진 theme 을 widget에서 사용해보기 (expenses_list.dart에서) return Dismissible( key: ValueKey(expenses[index]), //create key obj background: Container(color: Theme.of(context).colorScheme.error.withOpacity(0.3), // set..
-
Flutter_14. Dropdown and Validation> Frontend/Flutter 2023. 5. 9. 21:16
0. 학습 내용 Swipe 삭제 및 SnackBar를 사용해 Message 및 Undo 노출 Style 변경 1. Swipe 삭제 및 SnackBar를 사용해 Message 및 Undo 노출 ...expenses_list.dart 생략 Widget build(BuildContext context) { // ListView is used when there are many items // builder is used to create scrollable list only they are visible return ListView.builder( itemCount: expenses.length, // number of length itemBuilder: (BuildContext context, int ind..
-
Flutter_13. Dropdown and Validation> Frontend/Flutter 2023. 5. 8. 19:07
0. 학습 내용. Dropdown Button and DropdownMenuItem를 활용해 Drop-down 만들기 Validation 만들어 빈칸 체크 Modal에서 Save 버튼 클릭시, 새로운 Expense 추가. 1. Dropdown Button and DropdownMenuItem ... 생략 DropdownButton( //initial data: value: _selectedCategory, // DropdownMenuItem: need to set the child parameter to another widget, which simply defines what will be shown on the screen. items: Category.values .map((category) => ..
-
Flutter_12. DatePicker> Frontend/Flutter 2023. 5. 6. 13:02
0) 학습 내용 DatePicker를 사용하여 선택된 Date를 저장하기. 1) 완성된 코드 import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; final formatter = DateFormat.yMd(); class NewExpense extends StatefulWidget { const NewExpense({Key? key}) : super(key: key); @override State createState() => _NewExpenseState(); } class _NewExpenseState extends State { // => currently no need var _enteredTitle = ''; void ..