[Flutter] 44. Stateless와 Stateful의 생명주기 1. 위젯 생명 주기란?Flutter에서 위젯의 생명 주기는 중요한 개념이다. Stateless 위젯과 Stateful 위젯은 동작 방식이 다르기 때문에, 각ㄱ각의 생명 주기를 이해하는 것이 중요하다. (1) Stateless 위젯의 생명 주기Stateless-Stateful 위젯은 모두 빌드될 때마다 새로 생성된다.Stateless 위젯은 build 메서드가 호출되면서 한 번만 생성되고 끝난다.Stateful 위젯은 내부적으로 State 객체를 생성하고, 생성된 State 객체는 메모리에 유지되면서 생명 주기를 가진다.한 번 생성된 State는 재사용되며, 필요할 때만 build 메서드가 다시 호출되어 업데이트 된다.(2) Stat..

[Flutter] 43. GestureDetector란? 1. GestureDetector의 개념GestureDetector는 사용자가 화면에서 수행하는 다양한 터치 이벤트를 감지하고, 처리하는 기본적인 위젯이다.GestureDetector는 화면에 표시되지 않으며, child로 지정된 위젯에 사용자 이벤트가 발생할 때 이벤트를 처리할 수 있다.이 위젯은 다양한 사용자 이벤트에 대한 콜백 함수들로 구성되어 있다.  2. 시나리오 코드import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override ..

[Flutter] 42. Provider 라이브러리  1. Provider 라이브러리 설치하기https://pub.dev/packages/provider provider | Flutter packageA wrapper around InheritedWidget to make them easier to use and more reusable.pub.dev  provider: ^6.1.2   2. 리팩토링(1) View - todo_screen.dartimport 'package:flutter/material.dart';import 'package:mvvm_project_v01/start_04/view_models/todo_view_model.dart';import 'package:provider/provid..

[Flutter] 41. ChangeNotifier란? *ChangeNotifier는 Flutter에서 상태 변화가 있을 때, UI에 자동으로 알림을 주기 위한 클래스이다.*MVVM 패턴에서 ViewModel을 통해 UI와 데이터를 연결하는 데 매우 유용하다.  시나리오 코드(1) View-model에서 ChangeNotifier 상속 처리// ChangeNotifier를 상속한다.class TodoViewModel extends ChangeNotifier // 할 일을 추가하는 기능void addTodo(String title){ final newTodo = Todo(id: DateTime.now().toString(), title: title); todos.add(newTodo); // 상태 ..

[Flutter] 40. MVVM 구조란? 1. MVVM 패턴의 정의MVVM 패턴은 애플리케이션을 세 역할로 나눠, 유지 보수성과 재사용성을 높이는 디자인 패턴이다.UI 업데이트와 상태관리는 플러터에서 필수적인 부분! -> MVVM 패턴을 사용해 코드 구조를 효율적으로 관리할 수 있다.*MVVM 구조 + 클린 아키텍처 : 코드에 대한 기본적인 이해가 없다면 어렵다.  2. MVVM 패턴의 구성Model: 애플리케이션의 데이터 구조와 비즈니스 로직을 담당한다. 데이터를 정의하거나 데이터를 처리하는 로직이 포함된다.View: 사용자 인터페이스를 담당한다. Flutter에서는 화면에 표시되는 위젯들이 View 역할을 하고, ViewModel을 통해 화면에 데이터를 받아 표시한다.ViewModel: 비즈니스 로..

[Flutter] 39. 모노리스 구조의 개념과 특징 1. 모노리스 구조란?하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 모노리식 구조(Monolithic Architecture) 즉 모노리스 구조(Monolith)라고 부른다.(1) UI와 데이터 로직이 한 곳에 존재한다.(2) 구조가 간단하다. 작은 규모의 앱이나 간단한 기능을 가진 앱에 적합한 구조!    2. 시나리오 코드(1) 화면에 input form 띄우기import 'package:flutter/material.dart';void main() => runApp(TodoApp());class TodoApp extends StatelessWidget { const TodoApp({super.key}); @o..

[Flutter] 38. dio 라이브러리를 사용한 HTTP통신 1. pub.dev - dio 라이브러리 사용하기https://pub.dev/packages/dio dio | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.dev dio: ^5.7.0  2. JSONPlaceHolder를 사용한 HTTP 통신 *JSONPlaceholderhttps://jsonplaceholder.typicode.com/todos   *async-await (동기적 통신)*_JsonMap:import 'package..

[Flutter] 37. TabBar 위젯이란? 1. TabBar 위젯에 대해(1) TabBar와 TabBarView 개념 (2) TabController  (3) 위젯 생명주기  2. 시나리오 코드import 'package:flutter/material.dart';import 'package:class_v04/main.dart';void main(){ runApp(MyApp());}class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState();}// 부모 클래스의 상태를 접근 수정 등 역할 수정// SingleTickerProviderStateMixin - 애니..

[Flutter] 36. BottomSheet 위젯이란? 1. BottomSheet 위젯이란?BottomSheet 위젯이란 화면 아래쪽에서 올라오는 다이얼로그를 의미한다.,showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오게 보여준다.  2. 시나리오 코드 (1) 기본import 'package:flutter/material.dart';void main() { runApp(BottomSheetApp());}class BottomSheetApp extends StatelessWidget { const BottomSheetApp({super.key}); @override Widget build(BuildContext..

[Flutter] 34. Form 따라 만들어보기  (1) IconButton 만들기import 'package:flutter/material.dart';void main() { runApp(FeedbackFormApp());}// 한 파일안에 여러개의 클래스를 만들 수 있다.class FeedbackFormApp extends StatelessWidget { const FeedbackFormApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: t..