개발 note

dependencies: flutter: sdk: flutter provider: ^6.1.2 import 'package:flutter/material.dart';import 'package:my_mvvm_v01/start04/view_models/todo_view_model.dart';import 'package:provider/provider.dart';// MaterialApp 앱 안에서 외부 라이브러리(프로바이더) 위젯을 감싸 주어야 한다.void main() => runApp( MaterialApp( // (_) => TodoViewModel() --> 매개 변수를 사용 안 할 꺼면 _ 를 선언한다. home: ChangeNotifierProvider..

ChangeNotifier는 Flutter에서 상태 변화가 있을 때 UI에 자동으로 알림을 주기 위한 클래스로, MVVM 패턴에서 ViewModel을 통해 UI와 데이터를 연결하는 데 매우 유용합니다.뷰 모델// ViewModel 클래스 - 상태와 로직을 담당 한다.import 'package:flutter/material.dart';import 'package:my_mvvm_v01/start02/models/todo.dart';class TodoViewModel extends ChangeNotifier{ // 데이터가 필요하다. List todos = []; // 할 일을 추가하는 기능 void addTodo(String title){ final newTodo = Todo(id: DateT..

Model: 애플리케이션의 데이터 구조와 비즈니스 로직을 담당합니다. 데이터를 정의하거나 데이터를 처리하는 로직이 포함됩니다.View: **사용자 인터페이스(UI)**를 담당합니다. Flutter에서는 화면에 표시되는 위젯들이 View 역할을 하며, ViewModel을 통해 데이터를 받아 화면에 표시합니다.ViewModel: 비즈니스 로직과 UI 사이의 중간 역할을 합니다. View에서 받은 요청을 처리하고, Model에서 데이터를 가져와 View에 전달하는 역할을 합니다. model// todo의 모델 클래스 - 할 일 데이터를 정의class Todo{ final String id; final String title; Todo({required this.id, required this.titl..

하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture또는 간단히 Monolith 라고 부릅니다. 먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 데이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다. UI와 데이터 로직이 한 곳에 있음StatefulWidget을 사용하여 UI와 데이터 로직을 하나의 파일에 결합했습니다.상태 변경 및 UI 업데이트:addTodo와 removeTodo 메서드는 각각 새로운 할 일을 추가하고, 삭제하는 로직을 포함하고..

[Flutter] Dio 통신The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.dev  dio install | Dart packageA powerful HTTP networkimaze910.tistory.comdependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. ..

The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.dev  dio install | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.dev pubspec.yaml에 dio:^5.7.0를 붙여넣어 줍..

TabBar와 TabBarView 개념TabBar: 여러 개의 탭을 화면에 표시하며, 각 탭을 클릭할 수 있도록 해주는 위젯입니다. 사용자가 탭을 클릭하면 해당 탭에 대한 내용을 표시합니다.TabBarView: TabBar와 연결되어 각 탭에 해당하는 내용을 표시하는 역할을 합니다. 사용자가 탭을 선택하면 이 위젯이 해당하는 내용을 보여줍니다.TabControllerTabController: 탭의 상태를 관리하는 클래스입니다. 탭의 개수와 현재 활성화된 탭을 추적합니다. SingleTickerProviderStateMixin을 사용하여 애니메이션과 상태 관리를 돕습니다.length: 탭의 개수를 지정합니다.vsync: 애니메이션의 성능을 최적화하는 데 사용됩니다. 이 예제에서는 this를 사용하여 현재 ..

화면 아래쪽에서 올라오는 다이얼로그showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오도록 보여줌showModalBottomSheet()는 사용자가 Bottom Sheet 외부를 터치하면 Bottom Sheet가 자동으로 닫히지만, showBottomSheet()는 사용자가 Bottom Sheet 외부를 터치해도 Bottom Sheet가 닫히지 않음다이얼로그를 닫기 위해서는 닫히게 하려면, Navigator.of(context).pop()을 호출하면 됨 import 'package:flutter/material.dart';void main(){ runApp(BottomSheetApp());}class BottomShee..

💡 작업 순서constants.dart 파일 작업 theme.dart 파일 작업.. header.dart… details.dart 구조 constants.dart 파일 작업import 'package:flutter/material.dart';// 3개 상수 미리 정의 (재활용)const kPrimaryColor = MaterialColor( 0xFFeeeeee, { 50: Color(0xFFeeeeee), 100: Color(0xFFeeeeee), 200: Color(0xFFeeeeee), 300: Color(0xFFeeeeee), 400: Color(0xFFeeeeee), 500: Color(0xFFeeeeee), 600: Color(0xFFeeeeee), ..