flutter - Http get リクエストからのすべてのデータをフラッターで表示するには?

Question

私はフラッターで Http get リクエストを扱っていました。私はjsonplaceholder.typicode.comを使用しています。flutter docs から参照を取得しましたが、現在、最初のアイテムのみが表示されています。全20アイテムをカード形式で表示したい。これを達成するために誰かが私を助けることができますか?

これが私のコードです:

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Album> fetchAlbum() async {
  final response =
      await http.get(Uri.https('jsonplaceholder.typicode.com', 'albums/1'));

  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  Album({@required this.userId, @required this.id, @required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

そして、私はここでこれを使用しています：

class ShopScreen extends StatefulWidget {
  static String id = 'shop_screen';
  @override
  _ShopScreenState createState() => _ShopScreenState();
}

class _ShopScreenState extends State<ShopScreen> {
  Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shops'),
        backgroundColor: Colors.deepOrangeAccent[700],
      ),
      drawer: NavList(),
      body: ListView(
        children: <Widget>[
          ShopCard(placeholderImage: 'https://picsum.photos/250?image=3'),
          ShopCard(placeholderImage: 'https://picsum.photos/250?image=100'),
          ShopCard(placeholderImage: 'https://picsum.photos/250?image=234'),
          ShopCard(placeholderImage: 'https://picsum.photos/250?image=200'),
          Container(
            padding: EdgeInsets.all(5.0),
            width: MediaQuery.of(context).size.width,
            height: 130,
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FutureBuilder<Album>(
                  future: futureAlbum,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Text('TITLE: ${snapshot.data.title}'),
                          ),
                          Expanded(
                            child: Text('USER_ID: ${snapshot.data.userId}'),
                          ),
                          Expanded(
                            child: Text('ID: ${snapshot.data.id}'),
                          ),
                        ],
                      );
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }
                    return CircularProgressIndicator();
                  },
                ),
              ),
              elevation: 5.0,
            ),
          )
        ],
      ),
    );
  }

そして、これが私が今得ているものです。(最後のカードを参照してください。最初のデータのみが表示されています。)

私を助けてください。