25일차 과제 링크 👉 25일차 과제

Json Serialization 연습

Post

• https://jsonplaceholder.typicode.com/posts/1
• 게시글 번호에 해당하는 게시글을 가져오는 API

  {
  	"userId": 1,
  	"id": 1,
  	"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  	"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }

• json 데이터 받아와서 Post 인스턴스 만들어보기

  import 'package:dio/dio.dart';
  
  class Post {
    int userId;
    int id;
    String title;
    String body;
  
    Post({
      required this.userId,
      required this.id,
      required this.title,
      required this.body,
    });
  
    factory Post.fromMap(Map<String, dynamic> map) {
      return Post(userId: map['userId'], id: map['id'], title: map['title'], body: map['body']);
    }
  }
  
  Future<Post?> getData(int userId) async {
    Dio dio = Dio();
    var url = 'https://jsonplaceholder.typicode.com/posts/$userId';
    var response = await dio.get(url);
  
    if (response.statusCode == 200) {
      return Post.fromMap(response.data);
    }
    return null;
  }
  
  void main() async {
    for (var i=1; i<10; i++) {
      var res = await getData(i);
      if (res != null) {
        print(res.title);
      }
    }
  }

Posts

• https://jsonplaceholder.typicode.com/posts
• 100개의 게시글을 가져오는 API

  [
  	{
  		"userId": 1,
  		"id": 1,
  		"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  		"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  	},
  	{
  		"userId": 1,
  		"id": 2,
  		"title": "qui est esse",
  		"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  	},
  	{
  		"userId": 1,
  		"id": 3,
  		"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
  		"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  	},
  
  	...
  
  ]

• json 데이터 받아와서 Post 인스턴스들 만들어보기

  import 'package:dio/dio.dart';
  
  class Post {
    int userId;
    int id;
    String title;
    String body;
  
    Post({
      required this.userId,
      required this.id,
      required this.title,
      required this.body,
    });
  
    factory Post.fromMap(Map<String, dynamic> map) {
      return Post(userId: map['userId'], id: map['id'], title: map['title'], body: map['body']);
    }
  
    @override
    String toString() => 'Post: $id | $body\n';
  }
  
  Future<Post?> getData(int userId) async {
    Dio dio = Dio();
    var url = 'https://jsonplaceholder.typicode.com/posts/$userId';
    var response = await dio.get(url);
  
    if (response.statusCode == 200) {
      return Post.fromMap(response.data);
    }
    return null;
  }
  
  Future<List<Post>> readData() async {
    Dio dio = Dio();
    var url = 'https://jsonplaceholder.typicode.com/posts';
    var response = await dio.get(url);
  
    if (response.statusCode == 200) {
      // List<dynamic> 타입을 List<Map<String, dynamic>>으로 변환
      var data = List<Map<String, dynamic>>.from(response.data);
      // data 안에 있는 각각의 요소들을 Post 인스턴스로 변환
      return data.map((e) => Post.fromMap(e)).toList();
    }
    return [];
  }
  
  void main() async {
    var res = await readData();
    print(res);
  }

ListView.seperator에서 ListView의 최상단 위젯에 구분선 추가하기

---

1. itemBuilder 내에서 첫 항목 위에만 구분선 추가하고, 두 번째 항목부터는 separatorBuilder 내에서 적용

   ListView.separated(
     itemCount: items.length,
     itemBuilder: (context, index) {
       // 첫 번째 항목 앞에 구분선을 추가
       if (index == 0) {
         return Column(
           children: [
             Divider(),
             ListTile(title: Text(items[index])),
           ],
         );
       }
       // 두 번째 항목부터는 ListView.separated를 사용
       return ListTile(title: Text(items[index]));
     },
     separatorBuilder: (context, index) => Divider(),
   )

2. itemBuilder에서 0번 인덱스는 빈 컨테이너를 반환해서 맨 위에 빈 공간을 만들고 items의 첫번째 요소부터 구분선 적용

   ListView.separated(
     // 빈 컨테이너를 추가하기 위해 itemCount를 items.length + 1 로 설정
     itemCount: items.length + 1,
     itemBuilder: (context, index) {
       // 첫 번째 항목은 빈 컨테이너 반환
       if (index == 0) return Container();
       // items의 첫번째 요소부터 ListView.separated를 사용해서 구분선 추가
       return ListTile(title: Text(items[index-1]));    // 0번 인덱스는 빈 컨테이너가 있기 때문에 [index-1]로 접근해야 함
     },
     separatorBuilder: (context, index) => Divider(),
   )

---

25일차 끝...............