💡 상태는 공유 여부에 따라 로컬 상태(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..

디자인 시안  쇼핑카트 앱 만들기: 단계별 구현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 구성.주요 기능이메일 및 비밀번호 입력 폼.입력 데이터의 유효성 검사 및 저장.로그인 버튼 클릭 시 홈 화면으로 전환. 이미지 다운로드 해주세요..

Stack 위젯은 Flutter에서 여러 자식 위젯을 겹치게 배치할 수 있게 해주는 컨테이너 위젯입니다 Stack 내의 모든 자식은 오버레이 구조로 배열되어, 리스트의 앞쪽에 있는 위젯이 아래쪽에 위치하게 됩니다. Stack 위젯은 주로 위젯들 간의 위치를 상대적으로 정의할 때 사용됩니다.  Stack 위젯과 alignment 속성의 사용 import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Materi..

ListView 사용법과 주요 property가장 일반적으로 사용되는 스크롤 위젯ListView는 주로 다음과 같은 방식으로 사용일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 (적은 데이터에 사용시 용이함)ListView.builder를 사용하여 동적으로 호출ListView.separated는 ListView.builder 기능에 구분선 사용 가능주요 propertyreverse: true이면 bottom에서부터 리스트 표시padding: 리스트 아이템 간격 (EdgeInsets로 적용)itemCount: 동적 리스트 아이템 개수 (ListView.builder/ListView.separated에서 사용 가능)itemBuilder: 각 동적 리스트 아이템 정의 (ListVi..

플러터를 이용해서 간단한  recipe App을 만들며 문법에 익숙해져보도록 하겠습니다.만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지를 넣어줍니다.  ▼ 앱에 들어갈 이미지이미지 폴더 전체 사용 설정 (pubspec.yaml) # To add assets to your application, add an assets section, like this: assets: - assets/images/ assets/images/ 해당 경로 하위의 모든 파일을 가져올 수 있게 됩니다.  폰트 사용 설정 (pubspec.yaml)     # example: fonts: - family: PatuaOne fon..