Flutter how to make a row to stick at the bottom

user_13069284 0
Viewed 1803

I'm currently working on a card that requires this bar to be at the bottom. But I tried many ways like a scaffold and still can't get it to be at the bottom.

                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(color: Color(0xF6F6F6F6))),
                          ),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.bookmark_border,
                                        size: 18, color: Colors.black38),
                                    label: Text('Bookmark',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                ),
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.share,
                                        size: 18, color: Colors.black38),
                                    label: Text('Share',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                )
                              ])),
                      )],

Screenshot

flutter-layout flutter
3 Answers

You can put the Row in a Column and above the Row you have an Expanded wrapping the widget. In this case, I used a Container and I set the color to orange.

class BarStaysDown extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.orange,
              ),
            ),
            Container(
              color: Colors.white,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.bookmark_border,
                            size: 18, color: Colors.black38),
                        label: Text('Bookmark',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    ),
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.share, size: 18, color: Colors.black38),
                        label: Text('Share',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    )
                  ]
              ),
            )
          ],
        ),
      ),
    );
  }
}

The ouput: enter image description here

user_114525110

Try adding crossAxisAlignment: CrossAxisAlignment.end to the row.

Hope it helped.

user_113055530

Without more information I am not sure that what I suggest will work. But you can use a Stack widget in combination with Align to achieve what you want. The stack docs with examples, check this article about indexed stacks.

user_85313910
Related