CODEWITHSUNDEEP
flutterdartflutter-layout
Zuckerbrenner
Zuckerbrenner

Reputation: 335

How to create a row with 2 buttons that take up the entire row & placed at the bottom of the view/screen

How can I create a row w/2 buttons that, together, take up the space of their parent (the row)? I want to place this row immediately above the bottom navigation bar at times and then at other times I want it to take the place of the bottom navigation bar. Can I do it just using Row? I've tried persistentFooterButtons with a child of Row and children of FractionallySizedBox but it results in an overflow error and the buttons don't take up the height of of the persistentFooterButtons. There's got to be a better, more straight-forward, approach. Just learning Flutter.

This is a rough example of what I want placed at the bottom of the screen (buttons should be of equal height), where the bottom nav bar would be... and/or immediately above. [![horizontallyAlignedButtonsWithWidthOfRow][1]][1]

Some of the many (unsuccessful attempts) below: Wrap Buttons in Expand Attempt:

return Row(
      children: <Widget>[
        Expanded(
            child: ElevatedButton(
                onPressed: () {},
                style: TextButton.styleFrom(backgroundColor: Colors.blue),
                child: Text(
                  "Some Text #1",
                  style: TextStyle(color: Colors.white),
                ))),
        Expanded(
          child: ElevatedButton(
            onPressed: () {},
            style: TextButton.styleFrom(backgroundColor: Colors.green),
            child: Text("Some Text #2"),
          ),
        ),
      ],

Wrap Buttons in Expand Attempt Result: [![Result][2]][2] As you can see, there is white space that shouldn't be there and the buttons are evenly spaced. I have also tried using ColoredBoxes instead of buttons as I read that buttons have margins that cannot be changed?

UPDATE Finally figured it out, with the help of @lava solutions. Just made a few tweaks to it to remove white space, etc.

    return Container(
      padding: EdgeInsets.all(0.0),
      height: 50,
      child: Row(
        children: [
          Container(
            height: 50,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue, // background
                onPrimary: Colors.white,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
              ),
              onPressed: () {},
              child: Text("Button1"),
            ),
          ),
          Expanded(
            child: Container(
              height: 100,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                    primary: Colors.green, // background
                    onPrimary: Colors.white,
                    shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.zero)),
                onPressed: () {},
                child: Text("Button2"),
              ),
            ),
          )
        ],
      ),
    );
  }
}```

  [1]: https://i.sstatic.net/CydR4.png
  [2]: https://i.sstatic.net/1JifM.png

Upvotes: 4

Views: 6429

Answers (3)

lava
lava

Reputation: 7451

enter image description here

 Container(
              padding: EdgeInsets.all(8.0),
              height: 100,
              child: Row(
                children: [
                  Expanded(
                      child: Container(
                    height: 100,
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text("Button1"),
                    ),
                  )),
                  Container(
                      padding: EdgeInsets.only(left: 8.0),
                      height: 100,
                      child:
                          ElevatedButton(onPressed: () {}, child: Text("Button2")))
                ],
              ),
            )

enter image description here

Container(
          padding: EdgeInsets.all(8.0),
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button1"),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 8.0),
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button2"),
                  ),
                ),
              )
            ],
          ),
        )

FullCode

    import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(home: Mainwidget()));
}

class Mainwidget extends StatefulWidget {
  const Mainwidget({Key? key}) : super(key: key);

  @override
  _MainwidgetState createState() => _MainwidgetState();
}

class _MainwidgetState extends State<Mainwidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(8.0),
          height: 100,
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button1"),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 8.0),
                  height: 100,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Button2"),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> children() {
    return [
            Expanded(
                child: Container(
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text("Button1"),
              ),
            )),
            Container(
                padding: EdgeInsets.only(left: 8.0),
                height: 100,
                child:
                    ElevatedButton(onPressed: () {}, child: Text("Button2")))
          ];
  }
}

Upvotes: 3

st3ffb3
st3ffb3

Reputation: 453

You can either add persistentFooterButtons to the Scaffold like

Scaffold(
   persistentFooterButtons: [
      TextButton(),
      TextButton()
   ]
)

Or in the view:

Column(
   children: [
      Expanded(child: yourContent), // To use max height space 
      Row(
         children: [
            Expanded(child: TextButton()), 
            Expanded(child: TextButton()),,
         ] 
      ),
   ]
),

To give a different width you can add flex to the Expanded or use Flexible and add flex

Upvotes: 1

AmirHossein Mohammadzadeh
AmirHossein Mohammadzadeh

Reputation: 372

Wrap both your buttons with Expanded so that they take same amount of width and fill the row.

Upvotes: 1

Related Questions