Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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});
            }
          }
      ),
    ),
  ),
);
like image 528
Thor Avatar asked Mar 03 '19 09:03

Thor


People also ask

How do you add a button to the bottom in Flutter?

Flutter Bottom Button Using FloatingActionButton You can align FloatingActionButton position to center or almost anywhere using Scaffold's floatingActionButtonLocation property. Use FloatingActionButtonLocation. centerFloat to make FAB to align to bottom.


2 Answers

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
            )
         ])
}
like image 75
Hussein Abdallah Avatar answered Sep 18 '22 11:09

Hussein Abdallah


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()
        ],
      ),
    )
  ],
);
like image 29
zerotje09 Avatar answered Sep 19 '22 11:09

zerotje09