CODEWITHSUNDEEP
dartflutter
Thor
Thor

Reputation: 559

Adding a button to the bottom of a listview widget in flutter

I currently have a listview operating on the whole of my screen. I would like to have a button in the bottom of the screen, thus splitting it up so the listview doens't fill up the whole of my window.

This is the current code building the class:

@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});
            }
          }
      ),
    ),
  ),
);

Upvotes: 30

Views: 35005

Answers (2)

zerotje09
zerotje09

Reputation: 345

To prevent the buttons being pushed above the keyboard;

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

Upvotes: 23

Hussein Abdallah
Hussein Abdallah

Reputation: 1550

change your buildlist function to include a column with the button and listview as children

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

Upvotes: 69

Related Questions