이번 포스팅에서는 게시글 목록 화면과 상세보기 화면을 만들면서 자동 갱신 기능을 구현해보겠습니다.📌 게시글 목록 (PostListPage)- 데이터 로드, 무한 스크롤 & 새로고침 기능, 새로운 게시글 추가 시 자동 갱신📌 게시글 상세보기 (PostDetailPage)- 게시글 데이터 표시, 삭제 & 수정 기능, 삭제 시 자동 갱신기술설명Riverpod 상태 관리NotifierProvider, AutoDisposeNotifier 사용pull_to_refresh 패키지무한 스크롤 & 새로고침 기능 구현Navigator.push()상세 페이지로 이동 (PostDetailPage)ref.listen() 활용게시글 추가/삭제 시 자동으로 목록을 갱신 1. 데이터 모델 정의게시글과 관련된 데이터를 다루기 위해..

📖 [Flutter 개발일지] 독서 기록 앱 만들기 - 노트 기능 구현공통 컴포넌트와 Riverpod 상태 관리로 메모 작성/조회 기능 효율적으로 개발하기1. 공통 컴포넌트 NoteBookInfo로 코드 재사용하기공통 컴포넌트 목적 글쓰기 페이지와 글보기 페이지에서 책 정보를 표시하는 UI가 필요할 때, (리팩토링 전) 중복된 코드는 유지보수가 어려워지고 코드도 지저분해져서 간결화 필요.NoteBookInfo라는 공통 컴포넌트를 만들어서 한 번만 UI를 작성하고, 필요한 곳에서 재사용할 수 있도록 함. 코드가 깔끔해지고, 유지보수도 쉬워짐NoteBookInfoNoteBookInfo 위젯은 책 정보(제목, 저자, 이미지)를 표시하는 역할책 추가/변경/삭제 버튼도 이 위젯에서 관리상황동작Note 추가한 책..

Flutter에서 Dio를 활용하여 로그인 시스템을 구축하는 방법을 정리해봤습니다.로그인 기능을 구현할 때, JWT 기반 인증, 자동 로그인 유지, 상태 관리(ViewModel) 등을 함께 다루면 더욱 완성도가 높아집니다. 이번 글에서는 로그인 시스템 전체 흐름과 Dio + Riverpod을 활용한 구현 방법을 차근차근 알아보겠습니다. 💡 로그인 시스템의 흐름로그인은 단순해 보이지만, 내부적으로 다음과 같은 과정을 거칩니다.1️⃣ 사용자가 아이디와 비밀번호 입력 후 로그인 버튼 클릭2️⃣ Dio를 사용하여 서버에 로그인 요청 (username, password 전송)3️⃣ 서버가 로그인 성공 시 JWT 토큰 발급4️⃣ Dio가 서버 응답(JWT 토큰, 사용자 정보) 수신5️⃣ FlutterSecureS..

Flutter에서 로그인 기능을 구현하려면, 먼저 프로젝트를 설정하고 기본적인 UI를 만들어야 합니다.이 글에서는 프로젝트 설정 → 기본 UI 구성 → 로그인 화면 구현 → 입력값 검증 → UI 디테일 보완까지 차근차근 정리해보겠습니다. 1. 프로젝트 기본 설정Flutter 프로젝트에서 사용할 필수 패키지를 추가합니다.pubspec.yaml 수정 dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.8 flutter_svg: ^2.0.6 intl: ^0.18.1 dio: ^5.2.0 # 서버와 통신하는 HTTP 클라이언트 flutter_riverpod: ^2.3.6 # 상태 관리를 위한 Riverpod logger: ^1.3.0 # 콘솔..

Flutter에서 MVVM(Model-View-ViewModel) 패턴을 사용하면 코드의 유지보수성과 테스트 용이성이 크게 향상됩니다. 이번 글에서는 MVVM 개념부터 실제 구현까지 단계별로, 이해를 돕기 위해 Todo 리스트 예제를 중심으로 설명드리겠습니다. 앱 아키텍처앱 아키텍처는 애플리케이션의 구조와 구성 요소 간의 상호작용을 정의하는 설계 방법론입니다. 쉽게 말해, 코드의 역할을 명확히 나누고 정리된 방식으로 구현하는 것입니다.앱 아키텍처의 핵심 목표역할 분리: 각 컴포넌트가 자신의 역할에만 집중하도록 설계유지보수 용이성: 코드 수정이나 기능 추가가 간편확장성: 프로젝트가 커져도 쉽게 관리 가능MVC vs MVVM 비교  항목 MVC MVVM구조Model, View, ControllerModel,..

RiverpodRiverpod은 Flutter에서 상태를 관리하기 위한 강력하고 유연한 라이브러리입니다.앱에서 데이터를 공유하고, 상태를 변경하거나 구독(상태 변경 알림)을 처리하는 데 사용됩니다.Riverpod의 목적효율적인 상태관리앱에서 데이터를 여러 위젯에서 쉽게 공유하고 관리.의존성 관리특정 데이터가 필요한 위젯에만 정확히 데이터를 제공.안정성과 테스트 용이성Riverpod은 앱 상태를 독립적으로 관리해 테스트와 유지보수가 쉬움.왜 사용할까?구독과 변경 알림이 쉬움상태가 바뀌면 구독한 위젯에 자동으로 알림이 감.👉 내가 바뀐 데이터만 업데이트하니까 효율적!글로벌 상태도 안전하게 관리 가능앱 어디서든 필요한 데이터를 쉽게 접근하고 관리할 수 있습니다.기존 Provider보다 업그레이드된 기능Riv..

Flutter에서 상태를 공유하고 효율적으로 관리하려면 InheritedWidget을 사용하는 방법이 있습니다.InheritedWidget은 위젯 트리에서 데이터를 공유하고 자식 위젯들에게 알림을 줄 수 있는 강력한 도구입니다.InheritedWidget을 활용해 도서 관리 앱을 구현한 예제를 중심으로 개념과 코드를 정리해 보겠습니다. InheritedWidgetInheritedWidget은 위젯 트리에서 데이터를 공유하기 위해 사용됩니다. 부모 위젯에서 상태를 관리하고, 자식 위젯들이 그 상태를 참조하거나 변경할 수 있도록 합니다.이전의 props drilling(프로퍼티 전달) 문제를 해결하고, 트리가 깊어져도 데이터를 효율적으로 관리할 수 있는 구조를 제공합니다. 특징설명데이터 공유부모 위젯이 관리..

StatefulWidgetStatefulWidget은 Flutter에서 상태를 가지는 위젯을 정의하는 데 사용됩니다. 상태(State)는 시간이 지남에 따라 변경될 수 있는 데이터를 의미하며, 이 상태의 변화에 따라 UI를 다시 렌더링할 수 있습니다. StatefulWidget은 두 가지 주요 클래스를 조합하여 작동합니다:StatefulWidget 클래스:변경되지 않는 부분(위젯 자체)을 정의.상태를 관리할 State 객체를 생성.createState() 메서드를 통해 상태 객체를 반환.State 클래스:상태를 보유.build() 메서드를 사용해 UI를 생성.상태가 변경되면 setState()를 호출하여 화면을 다시 그림.StatefulWidget vs StatelessWidget특징StatefulWid..

1. 기본 흐름데이터 모델링앱에서 다룰 데이터를 정의하고 샘플 데이터를 생성합니다.class를 사용해 데이터를 체계적으로 관리합니다.UI 위젯 설계StatelessWidget: 변경되지 않는 고정 UI를 설계.StatefulWidget: 사용자 상호작용에 따라 변경되는 UI를 설계.반복적인 UI 생성리스트 데이터를 사용해 동적으로 UI를 생성합니다.ListView.builder 또는 List.generate를 활용.페이지 전환 및 네비게이션 구현Navigator 또는 BottomNavigationBar로 화면 이동을 관리.2. 주요 개념 설명2.1 List.generate: 반복 UI 생성Flutter에서 동일한 구조의 UI를 반복적으로 생성해야 할 때 사용하는 방법입니다.주요 특징정적 데이터 반복 생성..

Flutter를 활용한 어플 개발은 UI 컴포넌트 생성, 데이터 모델링, 화면 간 이동 및 상태 관리를 포함한 여러 단계를 거칩니다. 이번 글에서는 기본적인 Flutter 개념과 함께 간단한 당근마켓 UI 구현 과정을 따라가 보겠습니다.1단계: Flutter 프로젝트 설정 및 테마 구성프로젝트 생성Flutter CLI로 프로젝트를 생성하고, 필요한 패키지를 추가합니다.flutter create carrot_market_uicd carrot_market_uiflutter pub add google_fonts intlgoogle_fonts: 구글 폰트를 활용해 텍스트 스타일을 꾸밈.intl: 숫자 포맷, 날짜 처리를 지원.테마 파일 작성Flutter 앱의 스타일을 통일하기 위해 테마 설정을 추가합니다.the..