전체 글 (354) 썸네일형 리스트형 riverpod 과 MVVM 활용 - 게시글 생성 화면의 뷰 모델(PosCreateViewModel) 만들어 보자(12) 기본 생성 화면import 'package:flutter/material.dart';class PostCreatePage extends StatefulWidget { const PostCreatePage({super.key}); @override State createState() => _PostCreatePageState();}class _PostCreatePageState extends State { @override Widget build(BuildContext context) { return const Placeholder(); }} ConsumerStatefulWidget 활용import 'package:flutter/material.dart';import 'package:f.. riverpod 과 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: post.id); .. riverpod 과 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 '../../models/post.dart';import '../../view_models/post_detail_view_model.dart';final postDetailViewModelProvider = StateNotifierProvider.family, int>((ref, postId) .. riverpod 과 MVVM 활용 - PostDetailViewModel 만들기(상세보기 화면 데이터 관리) (9) PostListPage - onTab() 추가 onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return PostDetailPage(); })); } PostDetailPage 기본 화면 설정 import 'package:flutter/material.dart';class PostDetailPage extends StatelessWidget { const PostDetailPage({super.key}); @override Widget build(BuildContext context) { print("여기는 상세보기 화면 입니.. riverpod 과 MVVM 활용 - PostListPage 화면을 만들어 보자 그런데 뷰 모델은 어떻게 가지고 올까? (8) main.dartimport 'package:class_riverpod_mvvm/view/post/post_list_page.dart';import 'package:flutter/material.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// 우리 앱에서 사용하는 모든 Provider 를 하나의 컨테이너(ProviderContainer) 로 묶어 관리 합니다.void main() { runApp( const ProviderScope( child: MaterialApp( home: NovaBlog(), ), ), );}class NovaBlog extends StatelessWidget { c.. riverpod 과 MVVM 활용 - viewModel 을 관리하는 Provider 계열을 만들어 보자(7) import 'package:class_riverpod_mvvm/providers/provider/post_respisitory_provider.dart';import 'package:class_riverpod_mvvm/view_models/post_list_view_model.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';import '../../models/post.dart';/// PostListViewModel 을 관리하는 프로바이더 생성 입니다.final postListViewModelProvider = StateNotifierProvider> ((ref) { final _postRepositoryImpl = ref.read(po.. riverpod 과 MVVM 활용 - 화면의 데이터(상태)를 관리하는 PostListViewModel 을 먼저 만들어 보자(6) // 리버팟 중에 notifier 계열이 상태 관리를 담당해주는 클래스이다.import 'package:class_riverpod_mvvm/models/post.dart';import 'package:class_riverpod_mvvm/repository/post_repository.dart';import 'package:flutter_riverpod/flutter_riverpod.dart';// StateNotifier// 1. 멤버 변수로 T state 변수를 가지고 있다.// 2. 캡슐화에 핵심이다.class PostListViewModel extends StateNotifier> { // 통신 요청을 통해서 데이터를 가져오는 비즈니스 로직을 담당 시킬꺼다. final PostRepository.. riverpod 과 MVVM 활용 - PostRespository를 중앙에서(컨테이너) 관리하는 Provider 계열을 만들어 보자(5) ref는 다른 Provider에 쉽게 접근할 수 있는 역할을 합니다.ref는 Provider의 라이프사이클을 관리합니다.ref.read(): 다른 Provider의 값을 읽을 때 사용.ref.watch(): 다른 Provider의 상태를 구독하고, 상태가 변경되면 자동으로 반응.ref.listen(): 상태가 변경될 때 특정 로직을 실행할 때 사용. // PostRepositoryImpl 인스턴스를 제공하는 Riverpod Provider 계열 입니다.// 컨테이너에 넣는 코드import 'package:class_riverpod_mvvm/providers/provider/dio_provider.dart';import 'package:class_riverpod_mvvm/repository/post_rep.. 이전 1 2 3 4 ··· 45 다음