Flutter / Dart：如何在 ListView 的底部添加一个额外的小部件？

Question

我需要在列表视图的末尾添加一个文本小部件。我根据需要想出了这个代码片段。此代码基于 this and 个代码。

此代码的问题是它不可滚动。我该如何解决这个问题？将小部件添加到 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'),
    ]);

Answer 1

为什么不在 listItems 的末尾添加一个磁贴？像这样：

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

Answer 2

很简单..检查这个代码片段

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

Answer 3

使用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) {

Flutter / Dart：如何在 ListView 的底部添加一个额外的小部件？

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

listview

firebase

flutter