在颤动中将按钮添加到列表视图小部件的底部

Question

我目前在整个屏幕上运行一个列表视图。我想在屏幕底部有一个按钮，从而将其拆分，这样列表视图就不会填满我的整个窗口。

这是当前构建类的代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text('HT scoreboard'),
  ),
  body: _buildBody(context),
);
}

Widget _buildBody(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
  stream: Firestore.instance.collection('Spillere').orderBy("score", descending: true).snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return LinearProgressIndicator();

    return _buildList(context, snapshot.data.documents);
  },
);
}

  Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return ListView(
  padding: const EdgeInsets.only(top: 10.0),
  children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
final record = Record.fromSnapshot(data);

return Padding(
  key: ValueKey(record.name),
  padding: const EdgeInsets.all(5.0),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: ListTile(
      title: Text(record.name + ": " + record.score.toString()),
      trailing: new IconButton(icon: new Icon(isAdmin ? Icons.add : null, color: Colors.green),
          onPressed: (){
            if(isAdmin){
              record.reference.updateData({'score': record.score + 1});
            }
          }
      ),
    ),
  ),
);

Answer 1

更改您的 buildlist 函数以包含一个带有按钮和列表视图的列作为子项

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return Column(
        children:[
            Expanded(
            child: ListView(
                   padding: const EdgeInsets.only(top: 10.0),
                   children: snapshot.map((data) => _buildListItem(context, data)).toList(),
                   ),
            ),
            RaisedButton(
            // fill in required params
            )
         ])
}

Answer 2

为了防止按钮被推到键盘上方；

return CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // list items
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          RaisedButton()
        ],
      ),
    )
  ],
);