18. Flutter- List<dynamic> or Map<String,dynamic> 파싱 및 데이터 받기

1. Spring 서버(MVC)와 Flutter 서버(MVVM) 차이점

2. Flutter-Blog 데이터 받기

1. main.dart

import 'package:blog/core/theme.dart';
import 'package:blog/ui/list/post_list_page.dart';
import 'package:blog/ui/write/post_write_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'core/utils.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      debugShowCheckedModeBanner: false,
      theme: theme(),
      initialRoute: "/",
      //상세보기는 id값이 다르기 때문에 설정을 하지 못한다. (동적이기 때문에)
      routes: {
        "/": (context) => PostListPage(),
        "/write": (context) => PostWritePage(),
      },
    );
  }
}

2. post_list_vm.dart

import 'package:blog/data/post_repository.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

//list_vm은 Service라고 생각하면 된다.
//-------------------------------------------------
//1. 창고
// "?" 붙인 이유는 null 값이 들어 올 수 있음!
class PostLiveVM extends StateNotifier<PostListModel?> {
  PostLiveVM(super.state);

  //view는 리턴을 해줄필요가없다.
  //Future쓰는 이유는 awiat 사용할려고
  Future<void> notifyInit() async {
    //1. 통신을 해서 응답 받기
    List<dynamic> list = await PostRepository().findAll();

    //2. 파싱 : 맵타입으로 되어있으니까 map타입으로 파싱한다.
    List<_Post> posts = list.map((e) => _Post.fromMap(e)).toList();

    //3. 상태를 갱신 시킨다.
    state = PostListModel(posts); //깊은 복사 (기존 데이터를 건드리지 않는다.)
  }
}

//2. 창고 데이터(State)
//통신해서 받아야 할 데이터
class PostListModel {
  List<_Post> posts;

  PostListModel(this.posts);
}

//_ 언더바를 쓰면 그 파일에서 찾을 수 있다. 다른 파일에서는 못 찾느다.
class _Post {
  int id;
  String title;

  //fromMap = Entity와 같다고 생각하면 된다.
  //JSON(중간언어, 공용어)

  //요청 해서 JSON 데이터날아오면 자동으로 Map타입으로 자동으로 컨버팅 해준다. 자기 오브젝트로 만들어주는 게 좋다.
  _Post.fromMap(map)
      : this.id = map["id"],
        this.title = map["title"];
//this.content = map["contnet"]; // 이건 필요없는 이유는 우리는 다 만들어줄거기때문에
}

//3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostLiveVM, PostListModel?>((ref) {
  return PostLiveVM(null)..notifyInit();
});

3. 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: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PostDetailPage(),
                        ));
                  },
                ),
              );
            },
            separatorBuilder: (context, index) => Divider(),
            itemCount: model.posts.length),
      );
    }
  }
}

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

else {
return Padding(
.... (생략)
itemCount: model.posts.length),
  );
}

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PostDetailPage(),
  ));

4. post_detail_vm.dart

//1. 창고(View)
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

//2. 창고 데이터(State)
//통신해서 받아야 할 데이터
class PostDetailModel {}

//3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostDetailVM, PostDetailModel?>((ref) {
  //? 붙이 이유는 아직 데이터를 넣지않기때문에 나중에 바꿔준다.
  return PostDetailVM(null);
});

5. core→ utils.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

final navigatorKey = GlobalKey<NavigatorState>();

final dio = Dio(
  BaseOptions(
    baseUrl: "http://192.168.0.152:8080", // 서버 IP:PORT 입력
    contentType: "application/json; charset=utf-8",
  ),
);

final navigatorKey = GlobalKey<NavigatorState>();

final dio = Dio(
  BaseOptions(
    baseUrl: "http://192.168.0.152:8080", // 서버 IP:PORT 입력
    contentType: "application/json; charset=utf-8",
  ),
);

// GET 요청
Future<void> fetchData() async {
  try {
    final response = await dio.get('/posts');
    print(response.data);  // 서버에서 반환된 데이터를 출력
  } catch (e) {
    print("Error: $e");
  }
}

// POST 요청
Future<void> sendData(Map<String, dynamic> data) async {
  try {
    final response = await dio.post('/posts', data: data);
    print(response.data);  // 서버에서 반환된 데이터를 출력
  } catch (e) {
    print("Error: $e");
  }
}

6. post_repository.dart

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

class PostRepository {
  // 하는일: 통신 후 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;
  }
}

Future<List<dynamic>> findAll() async {
  Response response = await dio.get("/api/post");

  List<dynamic> resposebody = response.data["body"];

  return resposebody;
}

Future<Map<String, dynamic>> findById(int id) async {
  Response response = await dio.get("/api/post/$id");

  Map<String, dynamic> resposebody = response.data["body"];

  return resposebody;
}

3. JSON 데이터 MAP 파싱하기!

1. JSON 데이터 MAP 수업 예제 코드

String json = '{"id":1, "title":"제목1"}';
Map<String,dynamic> map = {
  "id":1,
  "title":"제목1"
};

class Post {
  int id;
  String title;
  
  Post(this.id, this.title);
}

void main() {
  Post post = Post(map["id"], map["title"]);
  print(post.id);
  print(post.title);
}

2. JSON fromMAP 파싱 수업 예제 코드

String json = '{"id":1, "title":"제목1"}';
Map<String,dynamic> map = {
  "id":1,
  "title":"제목1"
};

class Post {
  int id;
  String title;
  
  Post.fromMap(map):
  this.id = map["id"],
  this.title = map["title"];
}

void main() {
  Post post = Post.fromMap(map);
  print(post.id);
  print(post.title);
}

Map<String,dynamic> map = {
  "id":1,
  "title":"제목1"
};

class Post {
  int id;
  String title;

  Post.fromMap(map):
  this.id = map["id"],
  this.title = map["title"];
}