How to create 2 buttons in a row in Flutter?

Question

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?

score 2 · Accepted Answer · answered Sep 04 '20 at 20:07

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

score 2 · Answer 2 · answered Sep 04 '20 at 20:10

There shall only be one Scaffold on each screen/page. (reference)
Thus move the Scaffold from each button to MainPage.

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

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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 Container(
        child: RaisedButton(
          child: Container(
            width: 100,
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("History"),
                Icon(Icons.history)
              ],
            ),
          ),
        ),
      );
  }
}

score 2 · Answer 3 · answered Sep 04 '20 at 20:11

You shouldn't put Scaffold everywhere. Read more here: https://api.flutter.dev/flutter/material/Scaffold-class.html

class Person extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      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 RaisedButton(
      onPressed: null,
      child: Container(
        width: 100,
        height: 100,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text("History"), Icon(Icons.history)],
        ),
      ),
    );
  }
}

void · Answer 4 · 2020-09-04T20:14:34.863

You shouldn't nest Scaffolds:

Why should you nest Scaffolds ?

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds which means there should be one Scaffold for each page (more precisely, for each Route/screen),

PERSON WIDGET

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

HISTORY WIDGET

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

MAIN PAGE WIDGET

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

RESULT:

NOTE: There are some improvements that can be made from above: // 1. You should remove the redundant container in the RaisedButton Widget Example:

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

If my answer helped you with the problem specified in your original post, please accept it. — void, Sep 05 '20 at 13:06

How to create 2 buttons in a row in Flutter?

4 Answers4