How can I display buttons side-by-side in Flutter?

Question

I would like to display both of my buttons next to each other horizontally. So far I can only display them from top to bottom.

With the following code, what would I have to change ?

new Container(
    child: new Column(

      children: <Widget>[

      new RaisedButton(
        child: new Text("LogIn"),
        color:  Colors.blueAccent[600],
        onPressed: null,
        ),


      new RaisedButton(
        child: new Text("SignUp"),
        color:  Colors.blueAccent[600],
        onPressed: null,
        ),


      ],
    ),
  ),

Solution 1

Column is for items vertically arranged (hence a column), you are looking for Row. Just replace Column with Row, the rest of the code is fine. You can also use an Expanded if you want to fill all the available space.

Solution 2

Wrap(
            children: <Widget>[
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
              RaisedButton(
                ...
              ),
            ],
          ),

Solution 3

You just have to use Row instead of Column, like this

Center(
  child:  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      RaisedButton(
        child: Text("LogIn"),
        onPressed: null,
      ),
      SizedBox(width: 5),
      RaisedButton(
        child: Text("SignUp"),
        onPressed: null,
      ),
    ],
  ),
)

Solution 4

If you have a column with text in it, and you want two buttons below that text right next to eachother you can use ButtonTheme.bar

Below is some of Flutter's starting code with it. You could plug it in to the starter to see it in action:

Just paste this after the second new text (the one with $counter in it)

        new ButtonTheme.bar(
        child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
                new RaisedButton(
                  onPressed: _incrementCounter,
                  child: new Icon(Icons.add),
                  color: Colors.green,
                ),
                new RaisedButton(
                  onPressed: _decrementCounter,
                  child: new Icon(Icons.remove),
                  color: Colors.red,
                ),
                  ],
        ),
        ),

Solution 5

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Rahul Srivastava",
            ),
            Text(
              "Varanasi, India",
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                    onPressed: () {
                      var player = AudioCache();
                      player.play('abc.mp3');
                    },
                    child: Text('Play')),
                FlatButton(
                    onPressed: () {
                      var player = AudioCache();
                      player.play('abc.mp3');
                    },
                    child: Text('Pause')),
              ],
            )
          ],
        ),

View more solutions

Comments

[Rémi Rousselet]

Unclear. Can you edit your question to adds more details ?

[Kamlesh]

I have 7 buttons in a row. A row can have only 2-3 buttons as per available width of mobile. Kindly suggest me how can I wrap multiple buttons in row automatically? Thank you.

[Kamlesh]

I have 7 buttons in a row. A row can have only 2-3 buttons as per available width of mobile. Kindly suggest me how can I wrap multiple buttons in row automatically? Thank you.

[Kamlesh]

I have 7 buttons in a row. A row can have only 2-3 buttons as per available width of mobile. "Wrap" solved my issue. Thank you.

[Kamlesh]

Wrap has alignment attribute but it is not capable to use full of out width then wrap the all the button align center. This is big issue for me. Still searching another solution. Thanks.

[Rene]

@Kamlesh that sounds like a gridview to me: flutter.dev/docs/cookbook/lists/grid-lists

[Salathiel Genèse]

Invalid syntax...