Flutter: how to show number of items in List

Question

While learning Flutter, I have written a CRUD program that shows a list of items. I want to show at the bottom of the screen the number of items in the list, but I have been unable to achieve that. Currently the code shown contains (at the end) a BottomNavigationBar and a BottomNavigationBarItem where I attempt to show the number of items in the list, viz:

                title: Text("Items = $this.itemCount")), // title: Text("")),

However it just shows "..." for the number of items. I would appreciate someone showing me how to achieve what I require.

class NotesList extends StatefulWidget {
  @override
  NotesListPageState createState() => NotesListPageState();
}

class NotesListPageState extends State<NotesList> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Notes List'),
          centerTitle: true,
        ),
        body: new Container(
          padding: new EdgeInsets.all(16.0),
          child: new FutureBuilder<List<Map>>(
            future: fetchDataFromDb(),
            builder: (context, snapshot) {
              if (snapshot == null) {
                return Container(
                  alignment: AlignmentDirectional.center,
                  child: CircularProgressIndicator(),
                );
              } else if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: snapshot == null ? 0 : snapshot.data.length,
                    itemBuilder: (context, index) {
                      return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            ListTile(
                                leading: (IconButton /* Edit */ (
                                    color: Colors.blue,
                                    icon: new Icon(Icons.edit),
                                    onPressed: () => _showEditScreen(
                                        Crud.eUpdate, snapshot.data[index]))),
                                onLongPress: () => _showEditScreen(
                                    Crud.eRead, snapshot.data[index]),
                                trailing: (IconButton(
                                    color: Colors.red,
                                    icon: new Icon(Icons.delete),
                                    onPressed: () => _showEditScreen(
                                        Crud.eDelete, snapshot.data[index])))),
                          ]);
                    });
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              } else {
                return new Text("No data in table");
              }
            },
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int index) {
            if (index == 1) {
              Navigator.of(context).pop();
            }
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.info),
                title: Text("Items = $this.itemCount")), // title: Text("")),
            BottomNavigationBarItem(
              icon: Icon(Icons.add),
              title: Text('Create'),
            ),
          ],
        ));
  }
'''

Answer 1

In your state class add at top

int count = 0;

add the code

    WidgetsBinding.instance
    .addPostFrameCallback((_) {
   setState(){
count = snapshot.data.length;
}
});

between these two lines

else if (snapshot.hasData) {
return ListView.builder(

and change the title property to

title: Text("Items = $count")),

Answer 2

Show your text like this -

title: Text("Items = ${this.itemCount}")),

or like -

title: Text("Items = " + this.itemCount)),