1.
[Flutter] (MVVM 활용) 플러터 프로젝트 생성 - 1
이번 프로젝트에 목적은 Flutter를 사용해서 MVVM 패턴과 riverpod 프레임워크를 학습하는데 있습니다. Provider 계열Provider: 객체의 의존성 주입을 관리하는 데 사용됩니다. 주로 서비스 클래스나 리포
maze910.tistory.com
2.
[Flutter] (MVVM 활용) Http 통신 클라이언트 Dio 객체를 만들어 보자 - 2
REST API 호출: Dio는 GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 지원합니다.비동기 네트워크 처리: 비동기적으로 네트워크 요청을 처리하여 애플리케이션의 응답성을 유지합니다.에러 처리: HTTP 상태
maze910.tistory.com
3.
[Flutter] (MVVM 활용) API에서 사용할 데이터 구조를 정의하기 위해 Post 클래스를 만들어 봅시다.(모
API에서 받아올 데이터의 구조를 정의하고, 이를 Dart 객체로 변환하는 작업을 수행하자. Post 클래스를 정의하고, 이 클래스에서 JSON 데이터를 객체로 변환하는 메서드(fromJson)와 객체를 JSON으로 변
maze910.tistory.com
4.
[Flutter] (MVVM 활용) 데이터 접근 계층인 PostRepository 만들어 봅시다. - 4
Repository라는 이름을 붙이는 이유는 데이터 접근 계층을 나타내기 위해서입니다. 주요 목적은? Repository는 API, 데이터베이스, 로컬 파일, 캐시(데이터 소스) 등에서 데이터를 동일한 인터페이스
maze910.tistory.com
5.
[Flutter] (MVVM 활용) PostRespository를 중앙에서(컨테이너) 관리하는 Provider 계열을 만들어 보자. - 5
ref는 다른 Provider에 쉽게 접근할 수 있는 역할을 합니다.ref는 Provider의 라이프사이클을 관리합니다.ref.read(): 다른 Provider의 값을 읽을 때 사용.ref.watch(): 다른 Provider의 상태를 구독하고, 상태가 변
maze910.tistory.com
6.
[Flutter] (MVVM 활용) 화면의 데이터(상태)를 관리하는 PostListViewModel 을 먼저 만들어 보자. - 6
lib/view_models/post_list_view_model.dart 파일 생성import 'package:class_mvvm/models/post.dart';import 'package:class_mvvm/repository/post_repository.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// StateNotifier// 1. 멤버 변수로 T
maze910.tistory.com
7.
[Flutter] (MVMM 활용) viewModel 을 관리하는 Provider 계열을 만들어 보자 - 7
lib/state_noti_provider/post_list_view_model_provider.dart 파일 생성import 'package:class_mvvm/models/post.dart';import 'package:class_mvvm/providers/provider/post_repository_provider.dart';import 'package:class_mvvm/view_models/post_list_view_model.da
maze910.tistory.com
8.
[Flutter] (MVVM 활용) PostListPage 화면을 만들어 보자 그런데 뷰 모델은 어떻게 가지고 올까? - 8
main.dartimport 'package:class_mvvm/view/post/post_list_page.dart';import 'package:flutter/material.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// 우리 앱에서 사용하는 모든 Provider 를 하나의 컨테이너(ProviderContainer)
maze910.tistory.com
9.
[Flutter] (MVVM 활용) PostDetailViewModel 만들기(상세보기 화면 데이터 관리) - 9
PostListPage - onTab() 추가import 'package:class_mvvm/models/post.dart';import 'package:class_mvvm/providers/state_noti_provider/post_list_view_model_provider.dart';import 'package:class_mvvm/view/post/post_detail_page.dart';import 'package:flutter/mater
maze910.tistory.com
10.
[Flutter] (MVVM 활용) PostDetailViewModel을 Provider 통해서 관리 해보자. - 10
lib/providers/state_noti_provider/post_detail_view_model_provider.dart// 새로운 개념 추가import 'package:class_riverpod_mvvm/providers/provider/post_respisitory_provider.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import '../../mod
maze910.tistory.com
11.
[Flutter] (MVVM 활용) PostDetailView 화면 완성 하기 - 11
PostListPage 에서 PostDetailPage 위젯 생성 : ListView.separated( itemBuilder: (context, index) { Post post = postList[index]; return ListTile( onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(postId: po
maze910.tistory.com
12.
[Flutter] (MVVM 활용) 게시글 생성 화면의 뷰 모델(PosCreateViewModel) 만들어 보자
게시글 생성 화면lib/view/post/post_create_pageimport 'package:flutter/material.dart';class PostCreatePage extends StatefulWidget { const PostCreatePage({super.key}); @override State createState() => _PostCreatePageState();}class _PostCreatePageState
maze910.tistory.com
'Flutter > MVVM 활용' 카테고리의 다른 글
| [Flutter] (MVVM 활용) 데이터 접근 계층인 PostRepository 만들어 봅시다. - 4 (0) | 2024.11.19 |
|---|---|
| [Flutter] (MVVM 활용) API에서 사용할 데이터 구조를 정의하기 위해 Post 클래스를 만들어 봅시다.(모델링 작업) - 3 (0) | 2024.11.19 |
| [Flutter] (MVVM 활용) Http 통신 클라이언트 Dio 객체를 만들어 보자 - 2 (0) | 2024.11.19 |
| [Flutter] (MVVM 활용) 플러터 프로젝트 생성 - 1 (0) | 2024.11.19 |
| [Flutter] (MVVM 활용) riverpod 개념 정리 (2) | 2024.11.19 |