nevertoolateyet
nevertoolateyet

Reputation: 131

How to align flat buttons in flutter?

I'm wondering how do I align buttons in flutter. I'm new to flutter and for my current code I'm not able to throw in any rows, column or wrap. I would like to align my buttons in a vertical manner but current its aligned horizontally and giving me a "RIGHT OVERFLOW BY 256 PIXELS" display error

                  return showDialog<void>(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          content: Text("You have $counts routes!"),
                          actions: <Widget>[
                            new FlatButton(
                              textColor: Colors.black,
                              padding:
                                  EdgeInsets.fromLTRB(20, 0, 0, 10),
                              child: Text(
                                  "This is route 1! \n" +
                                      rList[0] + "\n"),
                              onPressed: () {},
                            ),
                            new FlatButton(
                              textColor: Colors.black,
                              padding:
                                  EdgeInsets.fromLTRB(20, 0, 0, 10),
                              child: Text(
                                  "This is your second route! \n" +
                                      rList[1] + "\n"),
                              onPressed: () {},
                            ),
                          ],
                        );
                      });

Upvotes: 4

Views: 12602

Answers (2)

Alex Lysun
Alex Lysun

Reputation: 506

just add your buttons to Column

actions: <Widget>[
    Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
            button,
            button
        ]
    )
],

or if you want that buttons was aligned to left side, move these buttons to content:

builder: (BuildContext context) {
      return AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("You have routes!"),
            new FlatButton(
              textColor: Colors.black,
              child: Text(
                  "This is route 1! \n" +
                      "\n"),
              onPressed: () {},
            ),
            new FlatButton(
              textColor: Colors.black,
              child: Text(
                  "This is your second route! \n" +
                      "\n"),
              onPressed: () {},
            )
          ],
        ),
      );
    });

Upvotes: 7

You can use ListView for synchronizing row by row automatically.

Check below sample for ListView.You should paste it on body segment of your code.

//some of codes..

    body: Padding(
      padding: EdgeInsets.only(top: 15, left: 15, right: 15),
      child: ListView(
        children: <Widget>[ 
          RaisedButton(
            child: Text("Confirm"),
            color: Colors.lightGreen,
            elevation: 5.0,
            onPressed: () {
              save(1,context);
              /*  some of codes */
            },
          ),
          RaisedButton(
            child: Text("Cancel"),
            color: Colors.redAccent,
            elevation: 5.0,
            onPressed: () {
              save(0,context);
              /*  some of codes */
            },
          ),
          RaisedButton(
            child: Text("Pass"),
            color: Colors.yellowAccent,
            elevation: 5.0,
            onPressed: () {
              save(2,context);
              /*  some of codes */
            },
          ),
        ],
      ),
    ));

Upvotes: 0

Related Questions