How to create 2 buttons in a row in Flutter?

Issue

I really don not understand what wrong and how to fix it

I want to show 2 buttons on the screen in row

I have stateless widget MainPage:

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],
      ),
    );
  }
}

And I have 2 buttons: Person and History
There is classes Person and History:

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          child: RaisedButton(
            child: Container(
              width: 100,
              height: 100,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Person"),
                  Icon(Icons.person)
                ],
              ),
            ),
          ),
        ),
    );
  }
}
class History extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

But I get an error: A RenderFlex overflowed by Infinity pixels on the right.
Where am I wrong?

Solution

Ok, i see a lot of things that may be the cause.
First of all, scaffold is not used in every stateless widget, you should only have one scaffold per screen as the root of your screen.

Second, the container main function is to avoid boilerplate widgets, if you are only gonna use a container child property, i would use SizedBox, however in this case, the container is unnecesary.

Check the following pen, it doesn’t uses 2 scaffolds , it doesn’t use that many containers, and take a look at the row mainAxisAlignment property https://codepen.io/ayRatul/pen/gOrXqMw

Also, try to replace the container with SizedBox , SizedBox works well if you only use height and width 😉

Edit : If for wome weird reason, you still want to keep your original code, i would use

Row(
     mainAxisSize:MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Person(),
          History()
        ],

Answered By – ValdaXD

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *