플러터 riverpod 통신 + mvvm 패턴 (Post 데이터 - DIO 사용)

toMap() { return {"userId": userId, "id": id, "title": title, "body": body}; } } "> toMap() { return {"userId": userId, "id": id, "title": title, "body": body}; } } "> toMap() { return {"userId": userId, "id": id, "title": title, "body": body}; } } ">

class Post {
  int userId;
  int id;
  String title;
  String body;

  Post(
      {required this.userId,
      required this.id,
      required this.title,
      required this.body});

  Post.fromMap(Map<String, dynamic> body)
      : userId = body["userId"],
        id = body["id"],
        title = body["title"],
        body = body["body"];

  Map<String, dynamic> toMap() {
    return {"userId": userId, "id": id, "title": title, "body": body};
  }
}

import 'package:dio/dio.dart';
import 'package:future_app_02/post.dart';

class PostRepository {
  Dio dio = Dio();

  Future<Post> findById(int id) async {
    // dio 통신 -> List, Map -> final
    // -> Response<Map<String, dynamic>>
    // -> Response<List<dynamic>>
    final response =
        await dio.get("<https://jsonplaceholder.typicode.com/posts/${id}>");

    final body = response.data!;

    Post post = Post.fromMap(body);
    //print(body);
    //print(body.runtimeType);
    return post;
  }
}

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:future_app_02/post.dart';
import 'package:future_app_02/post_repository.dart';

class PostModel {
  Post post;
  PostModel(this.post);
}

class PostViewModel extends StateNotifier<PostModel?> {
  PostViewModel(super.state);
  Future<void> notifyInit() async {
    Post post = await PostRepository().findById(1); // 통신
    state = PostModel(post); // 상태 변경
  }
}

final postProvider = StateNotifierProvider<PostViewModel, PostModel?>((ref) {
  PostViewModel viewModel = PostViewModel(null); // 창고 만들면서 상태값 null 초기화
  viewModel.notifyInit(); // ViewModel 상태값 초기화 (통신 다운받기)
  return viewModel; // 창고관리자와 창고 연결
});

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:future_app_02/post.dart';
import 'package:future_app_02/post_viewmodel.dart';

class PostPage extends StatelessWidget {
  PostPage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          HeaderPic(),
          PostDetail(),
          ElevatedButton(onPressed: () {}, child: Text("값변경")),
        ],
      ),
    );
  }
}

class PostDetail extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    PostModel? model = ref.watch(postProvider);

    if (model == null) {
      return CircularProgressIndicator();
    } else {
      Post post = model.post;
      return Text(
          "id : ${post.id}, userId: ${post.userId}, title : ${post.title}");
    }
  }
}

class HeaderPic extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1 / 1,
      child: Image.network("<https://picsum.photos/id/50/200/200>",
          fit: BoxFit.cover),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:future_app_02/post_page.dart';

void main() {
  runApp(ProviderScope(child: const MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PostPage(),
    );
  }
}