CODEWITHSUNDEEP
firebaseflutterlistview
Amaan
Amaan

Reputation: 66

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

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

Upvotes: 0

Views: 1761

Answers (3)

Jim
Jim

Reputation: 7601

use ListView.separated

ListView.separated(
     itemCount: listItems.length,
     separatorBuilder: (BuildContext context, int index) {
       if(index == ListItems.length-1){
         return Container(height: 50, color: Colors.red);
       }
       else {
         return SizedBox();
       }
     },
     itemBuilder: (BuildContext context, int index) {

Upvotes: 1

Prajeet Naga
Prajeet Naga

Reputation: 233

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
    }
  )

Upvotes: 0

Frank van Puffelen
Frank van Puffelen

Reputation: 598807

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

Upvotes: 1

Related Questions