Vertically aligned FlatButtons in Alert Dialog?

Question

I want to display an AlertDialog in Flutter with 3 buttons, but vertically aligned as the text of the buttons takes up too much space. So far I only get them displayed horizontally. Any idea how to solve it? The solutions from this post (How to make an AlertDialog in Flutter?) didn't work for me, still shown horizontally.

  static Future<void> showLogoutAllDevicesOrOnlyThisDialog(
      BuildContext context) {
    var b1 = FlatButton(
      textColor: Colors.red,
      child: Text('Only on this device'),
      onPressed: () {
        Navigator.of(context).pop();
        RxBus.post(HideSpinnerEvent());
      },
    );
    var b2 = FlatButton(
      textColor: Colors.red,
      child: Text('On all devices'),
      onPressed: () {
        Navigator.of(context).pop();
        RxBus.post(HideSpinnerEvent());
      },
    );

    var b3 = FlatButton(
      child: Text('Cancel'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(''),
          content: Text(
              "Möchtest du dich auf allen Geräten abmelden oder nur auf diesem Gerät?"),
          actions: <Widget>[
            b1, b2, b3
          ],

        );
      },
    );
  }
}

score 4 · Accepted Answer · edited Aug 26 '19 at 19:58

4

return AlertDialog(
    title: Text(''),
    content: Text("Möchtest du dich auf allen Geräten abmelden oder nur auf diesem Gerät?"),
    actions: <Widget>[
        Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
                b1, b2, b3
            ]
        )
    ],

);

edited Aug 26 '19 at 19:58

Community

1
1

answered Jun 22 '19 at 14:55

user9139407

964
1
12
25

score 4 · Answer 2 · answered Jun 22 '19 at 15:00

You can create your own Custom Dialog and you anything you want, like this:

void _showDialog() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(2),
          ),
          elevation: 0,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: IntrinsicWidth(
              child: IntrinsicHeight(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      "Custom Alert Dialog",
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                        fontFamily: "Roboto",
                        fontSize: 18,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text(
                      "This is a message inside your custom Alert Dialog!\nFeel free to change it to fit your needs.",
                      style: TextStyle(
                        fontFamily: "Roboto",
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Column(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text("OK"),
                          ),
                        ),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text("Not Sure"),
                          ),
                        ),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: FlatButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: Text("Cancel"),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

Your end result would be this one:

But if you're looking for a Row design, you need something like this:

void _showDialog() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(2),
          ),
          elevation: 0,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: IntrinsicWidth(
              child: IntrinsicHeight(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      "Custom Alert Dialog",
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                        fontFamily: "Roboto",
                        fontSize: 18,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text(
                      "This is a message inside your custom Alert Dialog!\nFeel free to change it to fit your needs.",
                      style: TextStyle(
                        fontFamily: "Roboto",
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                      ),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text("OK"),
                        ),
                        FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text("Not Sure"),
                        ),
                        FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text("Cancel"),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

With this end result:

YOU ARE AWESOME DEAR. THANK YOU :) – Kamlesh Oct 11 '20 at 09:20 — Kamlesh, Oct 11 '20 at 09:20

Sachin Chillal · Answer 3 · 2022-02-07T15:24:34.863

actionsOverflowDirection: VerticalDirection.up will automatically makes actions list vertical if it not fits in the row

AlertDialog(
  title: const Text('AlertDialog Title'),
  content: const Text('AlertDialog description'),
  scrollable: true,
  actionsOverflowDirection: VerticalDirection.up,
  actions: <Widget>[
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Save'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Cancel'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'OK'),
      child: const Text('OK'),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, 'Cancel'),
      child: const Text('Delete'),
    ),
  ],
)

[ VerticalDirection of Action Widgets 1

Vertically aligned FlatButtons in Alert Dialog?

3 Answers3