> Frontend
-
Flutter_19. HTTP Requests> Frontend/Flutter 2023. 5. 31. 08:02
0. 학습내용 Http Request 1. HTTP Request 1) http package 설치 2) http package 설치 import 'package:http/http.dart' as http; 3) FireBase > Realtime Database 생성 > (생략) 4) Get Method 사용 void _loadItems() async { final url = Uri.https( 'URL 주소.app', '[firebase bucket 이름 ].json'); final response = await http.get(url); if (response.statusCode >= 400) { setState(() { _error = 'Failed to fetch Data'; }); } fina..
-
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) => ..