개발 note

폴더 및 파일 만들기 pubspec.ymal 파일 설정 기본 코드 입력 앱 테마 설정 main.dart 파일 완성 dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.6 google_fonts: ^6.2.1 intl: ^0.20.0 font_awesome_flutter: ^10.8.0홈 화면ImageContainerimport 'package:carrot_market_ui/screens/main_screens.dart..

Flutter에서 Key의 역할과 필요성Key는 Flutter 애플리케이션에서 위젯의 고유성을 보장하고, 상태를 관리하는 데 중요한 역할을 합니다. 특히, 위젯 트리에서 요소의 순서가 변경되거나 목록이 동적으로 업데이트될 때 Key는 의도하지 않은 UI 동작을 방지하는 핵심 요소입니다. Key란 무엇인가?Flutter는 모든 위젯마다 Element라는 객체를 내부적으로 생성해 트리를 만듭니다.Flutter에서 Key는 각 위젯을 고유하게 식별하기 위한 속성입니다.복잡한 위젯 트리 구조에서 위치가 바뀌거나, 재구성될 때 위젯을 정확히 식별하는 데 중요한 역할을 합니다.Key의 작동 방식Flutter는 Key를 통해 위젯을 고유하게 식별합니다. 같은 타입이라도 Key가 다르면 Flutter는 이를 별개의 위..

Flutter는 각 위젯마다 Element 객체를 생성해 트리 구조를 만듭니다.Element는 위젯의 타입, 위치 정보를 저장하고 자식 Element와 연결되어 전체 트리를 구성합니다구현할 화면 코드import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: MyHomePage()));}class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State createState() => _MyHomePageState();}class _MyHomePageState extends State { final listTile = [ T..

Flutter에서 위젯의 생명 주기는 중요한 개념입니다. 특히, StatelessWidget과 StatefulWidget은 동작 방식이 다르기 때문에 각각의 생명 주기를 이해하는 것이 중요합니다. State 생명 주기 StatelessWidget과 StatefulWidget은 빌드될 때마다 새로 생성됩니다.StatelessWidget은 build 메서드가 호출되면서 한 번만 생성되고 끝납니다.StatefulWidget은 내부적으로 State 객체를 생성하며, 생성된 State 객체는 메모리에 유지되면서 생명 주기를 가집니다.한 번 생성된 State는 재사용되며, 필요할 때만 build 메서드가 다시 호출되어 업데이트됩니다.  StatefulWidget의 생명 주기StatefulWidget의 생명 주기는 ..

GestureDetector 위젯  GestureDetector는 사용자가 화면에서 수행하는 다양한 터치 이벤트를 감지하고 처리하는 기본적인 Flutter 위젯입니다.GestureDetector 자체는 화면에 표시되지 않으며, child에 지정된 위젯에 사용자 이벤트가 발생할 때 이벤트를 처리할 수 있습니다.이 위젯은 다양한 사용자 이벤트에 대한 콜백 함수들로 구성되어 있어, 각 이벤트에 맞는 동작을 정의할 수 있습니다.주요 GestureDetector 콜백 함수onTap: 사용자가 화면을 가볍게 탭할 때 호출됩니다. (예: 버튼 클릭 효과)onDoubleTap: 사용자가 화면을 빠르게 두 번 탭할 때 호출됩니다. (예: 이미지 확대)onLongPress: 사용자가 화면을 오래 누르고 있을 때 호출됩니다..

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 메서드는 각각 새로운 할 일을 추가하고, 삭제하는 로직을 포함하고..