20. Flutter -게시글 상세보기, 데이터 바인딩

1. 상세보기 위해 id값 전달하기

1. post_list_body.dart

import 'package:blog/ui/detail/post_detail_page.dart';
import 'package:blog/ui/list/post_list_vm.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PostListBody extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    //1. 페이지 들어오면서 ViewModel이 만들어져야함 watch로 보기

    PostListModel? model = ref.watch(postListProvider);

    if (model == null) {
      return CircularProgressIndicator();
    } else {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                leading: Text("${model.posts[index].id}"),
                title: Text("${model.posts[index].title}"),
                trailing: IconButton(
                  icon: Icon(Icons.arrow_forward_ios),
                  onPressed: () {
                    //context가 없으면 아무것도 할 수가 없다.
                    //스택이 하나 더 쌓인다. 매개변수 전달이 가능하다.
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                PostDetailPage(model.posts[index].id)));
                  },
                ),
              );
            },
            separatorBuilder: (context, index) => Divider(),
            itemCount: model.posts.length),
      );
    }
  }
}

2. post_detail_page.dart

import 'package:blog/ui/detail/components/post_detail_body.dart';
import 'package:flutter/material.dart';

import '../components/custom_appbar.dart';

class PostDetailPage extends StatelessWidget {
  int id;

  PostDetailPage(this.id);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: "Post Detail Page"),
      //body에 넣어서 만들기
      body: PostDetailBody(id),
    );
  }
}

import 'package:blog/ui/detail/components/post_detail_body.dart';
import 'package:flutter/material.dart';

import '../components/custom_appbar.dart';

class PostDetailPage extends StatelessWidget {
  final int id;

  PostDetailPage(this.id);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: "Post Detail Page"),
      body: PostDetailBody(id),
    );
  }

3. post_detail_body.dart

import 'package:blog/ui/detail/post_detail_vm.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PostDetailBody extends ConsumerWidget {
  int id;

  PostDetailBody(this.id);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    PostDetailModel? model = ref.watch(postDetailProvider(id));

    if (model == null) {
      return CircularProgressIndicator();
    }

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: ElevatedButton(
              child: Icon(CupertinoIcons.trash_fill),
              onPressed: () {},
            ),
          ),
          SizedBox(height: 10),
          Text("id : ${model.id}", style: TextStyle(fontSize: 20)),
          Text("title : ${model.title}"),
          Text("content : ${model.content}"),
          Text("createdAt : ${model.createdAt}"),
          Text("updatedAt:  ${model.updatedAt}")
        ],
      ),
    );
  }
}

4. post_detail_vm.dart

1. post_detail_vm.dart 기존 코드

// 1. 창고(ViewModel)
class PostDetailVM extends StateNotifier<PostDetailModel?> {
  PostDetailVM(super.state);

  // async를 쓰려고 Future타입으로 리턴
  Future<void> notifyInit() async {
  }
}

//..중략..

// 3. 창고 관리자 (Provider)
// 물음표를 넣은 이유는 일단 null을 넣어놓고 갱신시켜줄 것이므로
final postDetailProvider = StateNotifierProvider<PostDetailVM, PostDetailModel?>((ref) {
  return PostDetailVM(null)..notifyInit();
});

2. ViewModel 생성시 초기 파라미터 전달하는 문법 추가 코드(StateNotifierProvider에 .family를 붙이고 제네릭과 파라미터를 추가해준다.)

• 수정하면 창고 생성(post_detail_body) 코드를 수정해야 한다.

//1. 창고(View)
import 'package:blog/core/utils.dart';
import 'package:blog/data/post_repository.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PostDetailVM extends StateNotifier<PostDetailModel?> {
  PostDetailVM(super.state);

  //notifyinit 해서 데이터 받고? family데이터 받기
  Future<void> notifyInit(int id) async {
    Map<String, dynamic> one = await PostRepository().findById(id);
    //객체 만들어서 상태를 new해서 다시 만들어준다.
    state = PostDetailModel.fromMap(one);
  }
}

//2. 창고 데이터(State) DTO 같은거다! //내부 데이터 필요하면 _클래스 만들다.
//통신해서 받아야 할 데이터
class PostDetailModel {
  int id;
  String title;
  String content;
  String createdAt;
  String updatedAt;

  PostDetailModel.fromMap(map)
      : this.id = map["id"],
        this.title = map["title"],
        this.content = map["content"],
        this.createdAt = formatDate(map["createdAt"]),
        this.updatedAt = formatDate(map["updatedAt"]);
}
//3. 창고 관리자 (Provider)
final postDetailProvider =
//이름이 있는 생성자(family) ,타입을 적고 id를 넣으면 된다.
    StateNotifierProvider.autoDispose
        .family<PostDetailVM, PostDetailModel?, int>((ref, id) {
  print("나 만들어져? $id");
  //? 붙이 이유는 아직 데이터를 넣지않기때문에 나중에 바꿔준다.
  return PostDetailVM(null)..notifyInit(id);
});

5. post_repository.dart

import 'package:blog/core/utils.dart';
import 'package:dio/dio.dart';

class PostRepository {
  // 싱클톤으로 데이터 바인딩 하는법 , get 만들거면 instnace에 _ 붙이고
  //static PostRepository instnace = PostRepository._single();
  //PostRepository._single();

  // 하는일: 통신 후 body 데이터만 응답
  // List<dynamic> or Map<String,dynamic>
  Future<List<dynamic>> findAll() async {
    //1. 통신 -> response [header, body]
    Response response = await dio.get("/api/post");

    //2. body 부분 리턴
    //body 부분이 컬렉션이면 파싱 할 때 List<dynamic>으로 받아드린다.
    //body 부분이 json이면 Map<String,dynamic>으로 받아드린다.
    List<dynamic> resposebody = response.data["body"];

    //list의 map타입
    return resposebody;
  }

  Future<Map<String, dynamic>> findById(int id) async {
    //1. 통신 -> response [header, body]
    Response response = await dio.get("/api/post/$id");

    //2. body 부분 리턴
    //body 부분이 컬렉션이면 파싱 할 때 List<dynamic>으로 받아드린다.
    //body 부분이 json이면 Map<String,dynamic>으로 받아드린다.
    Map<String, dynamic> resposebody = response.data["body"];

    //list의 map타입
    return resposebody;
  }
}