이번 글에서는 로그인 UI를 구성하고, 이를 위한 위젯들을 정리해보겠습니다.디자인 시안을 확인한 후, 필요한 위젯을 만들고 LoginPage와 LoginBody를 구성하겠습니다.UI에 사용될 파일  디자인 시안1. 프로젝트에 assets 폴더 및 이미지 추가 로그인 화면에서 로고 및 기타 이미지 파일을 사용하기 위해 assets/ 폴더를 추가하고, 이미지 파일을 프로젝트에 포함해야 합니다.Flutter에서는 pubspec.yaml 파일에서 assets 폴더 및 이미지 파일을 등록해야 이를 사용할 수 있습니다. # To add assets to your application, add an assets section, like this: assets: - assets/ # - images/a_..

Flutter로 블로그 앱을 만들기 위한 기본 프로젝트 설정을 정리한 글입니다. 필요한 라이브러리, 테마 설정, 네비게이션 및 기본 페이지 구조까지 포함되어 있습니다.1. 프로젝트에 필요한 라이브러리 추가pubspec.yaml에 필요한 라이브러리를 추가합니다.cupertino_icons: ^1.0.8flutter_svg: ^2.0.6intl: ^0.18.1dio: ^5.2.0 # 서버와 통신하기 위해 필요한 라이브러리 입니다.flutter_riverpod: ^2.3.6 # 상태관리 Riverpod 라이브러리 입니다.logger: ^1.3.0 # 콘솔창에서 결과물을 쉽게 확인할 수 있도록 하는 Log 라이브러리입니다.flutter_secure_storage: ^8.0.0 # 어플리케이션 Secure Sto..

📝 Flutter Riverpod을 활용한 MVVM 패턴 정리Flutter에서 Riverpod을 활용한 MVVM 패턴을 적용하면 상태 관리를 더욱 간결하고 효율적으로 할 수 있습니다.이번 포스팅에서는 기본적인 MVVM 패턴을 Riverpod을 활용하여 개선하는 과정을 살펴보겠습니다.1️⃣ MVVM 패턴이란?👉 UI(View)와 비즈니스 로직(Model)을 ViewModel을 통해 분리하여 코드의 유지보수성과 테스트 용이성을 높이는 패턴👉 기존의 setState() 방식 대신 Riverpod을 활용하여 전역 상태 관리2️⃣ MVVM 패턴 구현이번 구현에서는 Riverpod을 사용하여 MVVM 패턴을 적용할 것입니다.📌 구조Model (todo_item.dart): 데이터 모델을 정의.ViewMode..

📝 Flutter MV 패턴 & MVVM 패턴 정리Flutter에서 MV (Model-View) 패턴과 MVVM (Model-View-ViewModel) 패턴을 활용하여 코드의 유지보수성과 가독성을 높일 수 있습니다.이번 포스팅에서는 MV → MVVM으로 발전하는 과정을 코드 예제와 함께 살펴보겠습니다.1️⃣ MV (Model-View) 패턴 적용👉 Model과 View만 존재하는 구조👉 비즈니스 로직이 View에 포함됨 (View와 Model이 강하게 결합됨)📌 Step 1: Model 생성 (todo_item.dart)👉 Model은 데이터를 표현하는 역할을 담당// Modelclass TodoItem { String title; bool isDone; TodoItem({required..

📝 Flutter MVVM 패턴 정리Flutter에서 애플리케이션을 개발할 때, 유지보수성과 확장성을 높이기 위해 MVVM (Model-View-ViewModel) 패턴을 적용할 수 있습니다.이번 포스팅에서는 MVVM 패턴의 개념과 코드 예제를 통해 어떻게 구조화할 수 있는지 알아보겠습니다. 1️⃣ 앱 아키텍처란?✅ 개념애플리케이션의 전반적인 구조와 구성요소, 그리고 이들 간의 관계와 상호작용을 정의하는 설계 원칙입니다.쉽게 말해, 앱을 구성하는 방법론을 의미합니다.다양한 아키텍처 패턴이 존재하지만, 기본 원리는 동일합니다.역할별로 레이어를 나누어 각 레이어가 자신의 역할에 집중하도록 설계.이를 통해 수정, 테스트, 유지보수가 용이해집니다.2️⃣ MVC 패턴을 사용하는 이유✅ 개념가장 기본적인 디자인 ..

📝 Flutter Riverpod 상태 관리 정리Flutter에서 상태 관리를 쉽게 하기 위해 Riverpod을 활용할 수 있습니다.Riverpod에는 여러 가지 Provider가 존재하며, 각각의 역할이 다릅니다.이번 포스팅에서는 Provider, StateNotifierProvider, NotifierProvider의 차이점을 정리하고,주석을 포함한 예제 코드와 함께 개념을 설명하겠습니다. 1️⃣ Provider (단순 데이터 제공)✅ 개념Provider는 단순히 데이터를 제공하는 역할을 합니다.상태 변경이 필요 없는 정적인 데이터를 관리할 때 사용됩니다.한 번 데이터를 제공하면 더 이상 변경할 수 없습니다.✅ 코드 예제import 'package:flutter_riverpod/flutter_riv..

3단계: InheritedWidget으로 상태 관리하기 💡 InheritedWidget은 props drilling 문제를 해결하기 위한 Flutter의 기본 상태 관리 방법 중 하나다.하위 위젯들이 중첩된 경우 상태나 데이터를 전달하기 어려운 상황에서 상위 위젯의 상태를 공유하고, 하위 위젯들이 이를 활용할 수 있도록 돕는다.하지만 몇 가지 단점이 존재해 더 나은 상태 관리 라이브러리인 Provider나 Riverpod을 많이 사용하는데, 이에 대해서는 다음 포스팅에 언급하겠다.Inherited_Parent// InheritedWidget 내장 데이터 타입을 상속받아 구현한다.import 'package:flutter/cupertino.dart';import '../common.utils/logger..

2단계: 도서 관리 앱으로 상태 변화 관리하기 💡 도서 관리 앱 - 위젯 트리 구조 (StatefulWidget을 이용한 상태 관리)homePage (StatefulWidget)| ├── 공유 상태: 대출 목록에 추가된 도서 목록 (공유 상태)|├── Library (Store 역할)| ├── Book 1 (도서 목록)| ├── Book 2| ├── Book 3| └── Book 4|└── BorrowList (Cart 역할) ├── Book 2 (대출 목록에 추가된 책) └── Book 4 코드 구성 main.dart import 'package:flutter/material.dart';import 'home_screen.dart';void main()..