이번 글에서는 로그인 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 상태 관리 정리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()..

💡 우리가 배울 여러 상태 관리 방법을 이용해 데이터 일관성을 유지 해보자!StatefulWidgetInheritedWidgetProvider(라이브러리)Riverpod(라이브러리)1단계: 기본 위젯 (StatelessWidget & StatefulWidget) 💡  StatelessWidget이란 상태 변화 없이 항상 동일한 UI를 그리는 위젯import 'package:flutter/material.dart';void main() { runApp( MaterialApp( home: MySatelessWidget(), ), );}class MySatelessWidget extends StatelessWidget { const MySatelessWidget({super.key..

디자인 시안  쇼핑카트 앱 만들기: 단계별 구현Flutter를 사용해 쇼핑카트 앱을 만드는 과정입니다. 이 앱에서는 기본적인 UI 설계와 기능 구현을 단계별로 진행합니다. 1. 기본 코드 설계앱의 구조는 기본적으로 StatefulWidget과 StatelessWidget을 이용하여 UI를 구성합니다. 기본 코드에서 MaterialApp을 설정하고, ShoppingCartPage라는 페이지를 메인으로 설정합니다.void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Mater..

▼ 좀 더 자세히 알고싶다면 아래의 GitHub를 참고하세요!! GitHub - flutter-coder/flutter-bookContribute to flutter-coder/flutter-book development by creating an account on GitHub.github.com프로젝트 소개Flutter를 사용하여 로그인 화면과 홈 화면을 구현합니다. StatelessWidget과 StatefulWidget의 사용법.TextFormField를 활용한 입력 폼 구성.Navigator를 사용한 화면 전환.Material Design을 활용한 UI 구성.주요 기능이메일 및 비밀번호 입력 폼.입력 데이터의 유효성 검사 및 저장.로그인 버튼 클릭 시 홈 화면으로 전환. 이미지 다운로드 해주세요..