We have seen how to create a custom widgets, how about a Listview ?

It will construct with combination of two part first part draw item layout for Listview, this can be done with Card and bunch of other widget.

I created a function for this in my Stateless widget so that Listview builder can use this Card Widget and the second part with Listview.Builder

class DistrictList extends StatelessWidget {
  final List<DistInfo> dist;

  const DistrictList({Key key, this.dist}) : super(key: key);

  Widget _buildDistirictInfo(BuildContext context, int index) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          ListTile(
            onTap: () {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => DistrictDetailPage(
                            distInfo: dist[index],
                          )));
            },
            hoverColor: Colors.grey,
            focusColor: Colors.deepOrange,
            leading: CircleAvatar(
              child: Text(dist[index].dname.substring(0, 2).toUpperCase()),
              backgroundColor: Colors.greenAccent,
            ),
            title: Text(
              dist[index].dname,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            trailing: Icon(Icons.apps),
            shape: StadiumBorder(),
            subtitle: Text(
              "Recovered  " +
                  dist[index].status.recovered.toString() +
                  " | " +
                  "Confirmed  " +
                  dist[index].status.confirmed.toString(),
              style: TextStyle(
                  color: Colors.brown,
                  fontSize: 15,
                  fontWeight: FontWeight.bold),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: _buildDistirictInfo,
      itemCount: dist.length,
    );
  }
}

The widget get data from the list which is passed to it in the parent widget as follows.

To make a complete comprehension I recommend you to take a look at Github Repository.

class StateDetailPage extends StatelessWidget {
  @override
  final StateInfo info;

  const StateDetailPage({Key key, this.info}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            info.sname,
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.brown,
          child: Container(
            alignment: Alignment.center,
            color: Colors.white,
            child: Wrap(
              children: [
                GestureDetector(
                  child: Tooltip(
                    message: 'Refressh',
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.home,
                        size: 40,
                      ),
                    ),
                  ),
                  onTap: () {
                    Navigator.push(context,
                        new MaterialPageRoute(builder: (context) => MyApp()));
                  },
                ),
                SizedBox(
                  width: 35,
                ),
                Tooltip(
                  message: 'District Data',
                  child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                          context,
                          new MaterialPageRoute(
                              builder: (context) =>
                                  DistrictReport(distList: info.distInfo)));
                    },
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.recent_actors,
                        color: Colors.brown,
                        size: 40,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            height: 50,
          ),
        ),
        body: Container(
            child: Column(
          children: <Widget>[
            TestStatus(
              result: info.tests,
            ),
            Expanded(
                child: DistrictList(
              dist: info.distInfo,
            ))
          ],
        )));
  }
}