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


      ],
    ),
  ),

Unclear. Can you edit your question to adds more details ? – Rémi Rousselet Mar 14 '18 at 14:07 — Rémi Rousselet, Mar 14 '18 at 14:07

score 32 · Accepted Answer · edited Jun 29 '19 at 15:00

32

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.

edited Jun 29 '19 at 15:00

CopsOnRoad

237,138
77
654
440

answered Mar 14 '18 at 14:16

Rene

1,027
10
18

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 Jun 05 '21 at 08:14
@Kamlesh that sounds like a gridview to me: https://flutter.dev/docs/cookbook/lists/grid-lists – Rene Jun 08 '21 at 08:53

score 14 · Answer 2 · answered May 31 '19 at 17:34

14

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

answered May 31 '19 at 17:34

Jansen Moscol

307
3
5

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 Jun 05 '21 at 08:15
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. – Kamlesh Jun 05 '21 at 08:40

score 4 · Answer 3 · answered Mar 28 '18 at 23:13

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

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, Jun 05 '21 at 08:14

score 3 · Answer 4 · answered Aug 01 '20 at 22:03

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

score 1 · Answer 5 · answered Mar 15 '18 at 05:43

1

Do something like this

new Column(children: <Widget>[
          new Button(
            ...
            ...
          ),
          new Button(
            ...
            ...
          )
])

answered Mar 15 '18 at 05:43

Aawaz Gyawali

3,244
5
28
48

score -2 · Answer 6 · answered Jun 20 '19 at 23:35

Just replace Column with that Row in your code It will work. Although I want to add some extra stuff here suppose that you have Column wrapped inside a row then how will you achieve that displaying of buttons side by side?

Simple just change Column to row n row to column as follows:

          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    child: ...
                  ),
                    child: ..                  
                  ),
                    child: ..
                  )
                ],
              ),

1

Invalid syntax... – Salathiel Genese Sep 21 '21 at 17:46

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

6 Answers6