Create listview widget in flitter

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

This post uses the sample code from my project ‘Dashboard app‘

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,
            ))
          ],
        )));
  }
}