flutterui(10)
-
📌 Day 14: Riverpod 상태 관리 패턴 (Provider와 비교하며 배우는 실전 적용법)
Flutter에서 Provider는 강력하지만, 전역 상태 공유 및 유지보수 측면에서 단점이 있습니다.Riverpod은 Provider의 단점을 보완하고, 보다 강력한 상태 관리 기능을 제공합니다. 📃 개요✅ StateProvider, StateNotifierProvider를 활용하여 상태를 관리하는 방법 🔔 주제🔸 Riverpod이란? 기존 Provider와의 차이점🔸 Riverpod 패키지 설치 및 프로젝트 설정🔸 StateProvider를 활용한 간단한 상태 관리🔸 StateNotifierProvider를 활용한 복잡한 상태 관리🔸 ConsumerWidget과 ref.watch() 사용법 1️⃣ Riverpod 이란? 기존 Provider 와의 차이점🔸 Riverpod 은 ..
2025.03.07 -
📌 Day 13: Provider 상태 관리 적용 테스트 (Counter 앱, 다크모드까지)
📃 개요 ⚠️ 이전 글(Day 12)에서 다룬 내용처럼 Flutter에서 setState()만으로 상태를 관리하면 코드가 복잡해지고, 여러 위젯에서 상태를 공유하기 어렵습니다. ⚠️ Provider를 사용하면 setState() 없이도 여러 위젯에서 상태를 공유하고 효율적으로 관리할 수 있습니다. ✅ 이번 글에서는 Provider를 적용하여 setState() 없이 상태를 관리하는 Counter 앱을 자세히 확인해 봅니다.✅ 기존 하나의 페이지에서 동작했던 Counter 앱을 보너스(TodoList 앱) 처럼 구성해 봅니다.✅ ChangeNotifier를 활용해 상태를 저장하고, UI 업데이트를 자동으로 수행할 수 있습니다.✅ Consumer를 활용하여 특정 위젯만 상태가 변경될 때 리빌드할 수 있습니..
2025.03.06 -
📌 Day 12: Provider 패턴 적용 (ChangeNotifier, Consumer)
📃 개요⚠️ Flutter에서 setState()만으로 상태를 관리하면 코드가 복잡해지고, 여러 위젯에서 상태를 공유하기 어렵습니다.📌 Flutter에서 상태(State)를 관리하는 것은 앱 개발의 핵심 요소입니다. ⚠️ 상태가 여러 화면에서 공유될 경우, 적절한 상태 관리 패턴이 필요합니다.📌 Provider 패턴은 Flutter에서 공식적으로 권장하는 상태 관리 방법 중 하나로, 보다 효율적인 방식으로 전역 상태를 공유할 수 있습니다. ✅ Provider 패턴이란? → Flutter에서 상태를 효율적으로 관리하는 방법✅ ChangeNotifier와 Consumer의 역할과 사용법✅ 전역 상태 관리와 UI 업데이트 최적화 방법✅ ChangeNotifier를 활용하면 setState() 없이 UI를..
2025.03.05 -
📌 Day 11: 상태 관리 개념 및 setState() 이해
📃 개요⚠️ Flutter에서 상태(State)를 관리하는 방법을 모르고 개발하면, 앱의 UI가 예상대로 동작하지 않을 수 있습니다.⚠️ 잘못된 상태 관리는 코드 복잡도를 증가시키고, 유지보수를 어렵게 만듭니다.📌 Flutter 개발에서 "상태(State)"를 관리하는 것은 필수적인 개념입니다.📌 Flutter에서 가장 기본적인 상태 관리 방법은 setState()를 활용하는 것입니다. ✅ 상태(State)란? → UI에 영향을 주는 데이터✅ setState()란? → 상태가 변경될 때 화면을 다시 그려주는 역할✅ setState()를 사용하면 StatefulWidget에서 UI를 업데이트할 수 있습니다.✅ 상태 관리는 앱의 동적인 데이터(예: 버튼 클릭, API 호출 결과)를 UI에 반영하는 과정..
2025.03.04 -
📌 Day 10: Flutter 다양한 버튼 정리 , Buttons !
Flutter에서 사용할 수 있는 버튼 종류는 다양하다.((추가 예정) Material 3 디자인을 기반으로 한 버튼도 포함됨)Flutter에서 사용 가능한 버튼들 소개.✅ 1. ElevatedButton (입체감 있는 기본 버튼)🔸 특징: 배경색이 있는 버튼, 기본적으로 입체적인 느낌을 줌.🔸 사용 예: 일반적인 클릭 버튼, 폼 제출 버튼 등.📌 예제 코드ElevatedButton( onPressed: () { print("ElevatedButton 클릭됨!"); }, child: const Text("ElevatedButton"),)✅ 2. TextButton (텍스트만 있는 버튼)🔸 특징: 배경이 없는 텍스트 버튼, 클릭 시 색상이 변함. 🔸 사용 예: "더 보기", "취소" 같..
2025.02.28 -
📌 Day 9: Flutter 입력 폼 가이드! (TextField, Form, 유효성 검사까지)
📃 개요 ⚡ Flutter에서 사용자 입력을 받을 때, 어떻게 하면 더 효율적으로 관리할 수 있을까?⚠️ Flutter에서 텍스트 입력 필드(TextField)를 올바르게 사용하지 않으면, 입력값을 관리하기 어렵고 UX가 나빠질 수 있다.✅ TextField를 활용하면 사용자 입력을 쉽게 받을 수 있다.✅ TextEditingController를 사용하면 입력값을 실시간으로 제어할 수 있다.✅ Form과 TextFormField를 사용하면 여러 입력 필드를 그룹화하고, 유효성 검사를 적용할 수 있다.✅ 키보드 제어까지 추가하면 UX가 더욱 향상된다! 🔔 오늘 배울 내용🔸 TextField를 사용한 기본 입력 필드 구현🔸 TextEditingController를 활용한 입력값 제어🔸 Form과 F..
2025.02.27