exercise finished

ex2/lib/main.dart

 import 'dart:async';
 import 'dart:convert';
+import 'dart:html';
 
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as http;
 
-Future<Album> fetchAlbum() async {
-  final response = await http
-      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
+List<Album> parseAlbum(String responseBody) {
+  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
+
+  return parsed.map<Album>((data) => Album.fromJson(data)).toList();
+}
+
+Future<List<Album>> fetchAlbum() async {
+  final response =
+      await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/'));
 
   if (response.statusCode == 200) {
     // If the server did return a 200 OK response,
     // then parse the JSON.
-    return Album.fromJson(jsonDecode(response.body));
+    return parseAlbum(response.body);
   } else {
     // If the server did not return a 200 OK response,
     // then throw an exception.
@@ -49,7 +56,7 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
-  late Future<Album> futureAlbum;
+  late Future<List<Album>> futureAlbum;
 
   @override
   void initState() {
@@ -69,11 +76,11 @@ class _MyAppState extends State<MyApp> {
           title: const Text('Fetch Data Example'),
         ),
         body: Center(
-          child: FutureBuilder<Album>(
+          child: FutureBuilder<List<Album>>(
             future: futureAlbum,
             builder: (context, snapshot) {
               if (snapshot.hasData) {
-                return Text(snapshot.data!.title);
+                return AlbumsList(albums: snapshot.data!);
               } else if (snapshot.hasError) {
                 return Text('${snapshot.error}');
               }
@@ -87,3 +94,57 @@ class _MyAppState extends State<MyApp> {
     );
   }
 }
+
+class AlbumsList extends StatelessWidget {
+  const AlbumsList({Key? key, required this.albums}) : super(key: key);
+
+  final List<Album> albums;
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+      ),
+      itemCount: albums.length,
+      itemBuilder: (context, index) {
+        return detailCard(albums[index]);
+      },
+    );
+  }
+}
+
+Widget detailCard(Album) {
+  return Padding(
+    padding: const EdgeInsets.all(10.0),
+    child: Card(
+      color: Colors.grey[800],
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: Column(
+          children: <Widget>[
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Container(
+                width: 50.0,
+                height: 20.0,
+              ),
+            ),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text(
+                  Album.title,
+                  style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: Colors.white,
+                      fontSize: 30),
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    ),
+  );
+}