Home > Net >  Flutter / Dart: How to add an extra widget at the bottom of a ListView?
Flutter / Dart: How to add an extra widget at the bottom of a ListView?

Time:10-06

I need to add a Text Widget at the end of a listview. I came up with this code snippet based on my need. This code was based on this and this codes.

The Issue with this code is, it is not scrollable. How can I fix this? what is the best way to add a widget to the end of a ListView?

    List<Widget> listItems = [];
    int listItemCount = 0;
    listItems.addAll(snapshot.data!.docs.map((DocumentSnapshot document) {
      Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
      if (data['status'] == true) {
        listItemCount  ;
        return ListTile(
          title: Text(data['full_name']),
          subtitle: Text(data['company']),
        );
      } else {
        return SizedBox();
      }
    }).toList());

    return ListView(children: <Widget>[
      ListView(
        shrinkWrap: true,
        children: listItems,
      ),
      (listItemCount > 0) ? Text('All Finish') : Text('Not available'),
    ]);

CodePudding user response:

Why don't you add a tile to the end of listItems? Something like this:

...
const finalTile = ListTile(
  title: Text((listItemCount > 0) ? Text('All Finish') : Text('Not available')),
);
listItems.add(finalTile)

return ListView(children: <Widget>[
  ListView(
    shrinkWrap: true,
    children: listItems,
  ),
  ,
]);

CodePudding user response:

Its simple.. Check this code snippet

return ListView.builder
  (
    itemCount: listItems.length   1, // here is the trick, we are adding  1 for extra widget at bottom
    itemBuilder: (BuildContext ctxt, int index) {
     if (index < listItems.size - 1)
          return new Text("List Item");
     else
        return new Text("Last Extra widget"); // This will be the extra widget at last
    }
  )
  • Related