💡 우리가 배울 여러 상태 관리 방법을 이용해 데이터 일관성을 유지 해보자!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..

💡 상태는 공유 여부에 따라 로컬 상태(Local State)와 공유 상태(Shared State)로 나눌 수 있다! Differentiate between ephemeral state and app stateHow to tell the difference between ephemeral and app state.docs.flutter.dev로컬 상태(Local State) : 공유되지 않는 상태BottomNavigationBar의 현재 선택한 탭공유 상태(Shared State) : 여러 위젯에서 공유되어 표현되는 상태로그인한 유저 정보특정 게시글의 좋아요 표시쇼핑 앱의 장바구니💡  공유 상태는 상태가 변경될 경우, 동일한 상태를 보여주기 위해 동기화가 필요  ※ 상태 관리 이해하기💡 공유 상태가..

상태(State)란?**상태(State)**는 변수에 할당된 값입니다. StatefulWidget에서는 이 상태가 변할 때마다 UI가 업데이트되어 사용자에게 변화가 반영됩니다.상태의 특징StatelessWidget: 고정된 상태. 변경되지 않는 값을 사용.예: 사진처럼 항상 동일한 UI.StatefulWidget: 변화할 수 있는 상태. 값이 변경될 때마다 UI가 업데이트됨.예: 동영상처럼 시간이 지나면서 변화를 반영하는 UI.StatelessWidget 과 고정 상태import 'package:flutter/material.dart';void main() { runApp(MaterialApp(home: MyStatelessWidget()));}// Stateless// 상태의 변화 없이 항상 동일한 ..

Flutter에서 Dio를 사용하여 API 호출 및 데이터 처리이번 포스트에서는 Dio 라이브러리를 사용하여 Flutter 앱에서 API 호출을 구현하고, 응답 데이터를 처리하는 방법을 살펴보겠습니다. API에서 받은 데이터를 모델 클래스를 사용해 효율적으로 관리하고, UI에서 이를 표시하는 방법도 함께 설명합니다.※ Dio란?Dio는 Flutter와 Dart에서 HTTP 요청을 쉽게 처리할 수 있는 강력한 라이브러리입니다. GET, POST, PUT, DELETE와 같은 다양한 HTTP 메서드를 지원하며, 요청과 응답에 대한 다양한 기능을 제공합니다. 이 예제에서는 GET 요청을 사용하여 JSON 데이터를 받아오는 방법을 살펴봅니다. Dio 패키지 설치▼아래 링크에 들어가 Installing에서 dio..

학습 목표1. Dart 비동기 프로그래밍에 대한 개념을 이해하기2. Future 타입에 대해 이해하고 사용하는 방법 익히기3. Future.delayed 함수를 사용해 비동기 작업을 처리하기 Dart 비동기 처리와 콜백 함수 활용Dart에서 비동기 프로그래밍은 프로그램이 다른 작업을 기다리지 않고 동시에 여러 작업을 처리할 수 있도록 도와주는 방식입니다. Future 타입을 사용하면 미래에 결과가 반환될 것이라는 약속을 나타낼 수 있습니다. ★ 키워드 묶음 ★   async / await / Future : 1회만 응답을 돌려 받는 경우Future 타입이 뭘까?Future 객체는 미래에 어떤 값이나 오류를 반환할 것이라는 약속을 나타냅니다. async 키워드가 붙은 함수 내부에서 await 키워드를 사용..

Flutter: 부모-자식 위젯 간의 데이터 전달이번 블로그 포스트에서는 Flutter에서 부모 위젯과 자식 위젯 간에 데이터를 전달하는 방법을 살펴보겠습니다. 이 예제에서는 부모 위젯에서 자식 위젯으로, 또 자식 위젯에서 부모 위젯으로 데이터를 전달하는 과정을 단계별로 보여줍니다. 이 방법은 Flutter에서 상태 관리와 이벤트 처리를 효율적으로 구현하는 데 유용합니다. 1. 부모 위젯 (ParentsView)부모 위젯은 StatefulWidget을 사용하여 상태를 관리합니다. 자식 위젯에서 발생한 이벤트에 따라 부모 위젯의 화면을 업데이트하도록 설정합니다. 부모 위젯 코드 class ParentsView extends StatefulWidget { const ParentsView({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 구성.주요 기능이메일 및 비밀번호 입력 폼.입력 데이터의 유효성 검사 및 저장.로그인 버튼 클릭 시 홈 화면으로 전환. 이미지 다운로드 해주세요..