Aligning alert dialog button bar widgets

Question

I'm new to flutter, so I'm trying to create a widget that shows an alert dialog. In the content of alert dialog I got SingleChildScrollView and in, so called, button bar I have a text, checkbox and a button, which I want to align(put checkbox with text on the left side, the button on the right side), but I don't know how. Tried expanded and flexible, also tried to insert row with mainAxisAlignment set to spaceEvenly, not working, could someone please help me?

Here is the code:

class TermsAndConditionsAlertDialog extends StatefulWidget {
  TermsAndConditionsAlertDialogState createState() {
    return new TermsAndConditionsAlertDialogState();
  }
}

class TermsAndConditionsAlertDialogState
    extends State<TermsAndConditionsAlertDialog> {
  static bool _isChecked = false;

  //TODO get the terms and conditions message
  static final String _TERMS_AND_CONDITIONS_MESSAGE =
      'blablabla this is a terms and conditions message and a blablababl and a bla bla and a aaaaaaaaaaaa bla';
  static final String _DIALOG_TITLE = 'Terms and Conditions';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new AlertDialog(
      title: new Text(_DIALOG_TITLE),
      content: new SingleChildScrollView(
        child: new Text(
          _TERMS_AND_CONDITIONS_MESSAGE,
          style: new TextStyle(fontSize: 50.0),
        ),
      ),
      actions: <Widget>[
        new Text('Accept'),
        new Checkbox(
//          title: Text('Accept'),

          value: _isChecked,
          onChanged: (bool newValue) {
            setState(() {
              _isChecked = newValue;
            });
          },
        ),
        new RaisedButton(
            onPressed: () {
              _printDialogResult();
              _closeDialog();
              //TODO add a method to move on with an app

            },
            child: new Text(
              'Start',
              style: TextStyle(color: Colors.white),
            )),
      ],
    );
  }

  void _printDialogResult() {
    //simply prints the result in console
    print('You selected 1');
  }

  void _closeDialog() {
    if (_isChecked) {
      Navigator.pop(context);
    }
  }
}[FL][1]

Possible duplicate of [How to style AlertDialog Actions in Flutter](https://stackoverflow.com/questions/51235014/how-to-style-alertdialog-actions-in-flutter) — Jerome Escalante, Jan 05 '19 at 00:59
I think you can use simpledialog instead of alert, with simple dialog you can custom the widget whatever you want — Apin, Jan 05 '19 at 02:48
May be a duplicate, but, actually I did not find any of the comments working and any of clarifications enough, so I created this one.. Will try to run a testcase with SimpleDialog, thanks)) — Ara Mkrtchyan, Jan 06 '19 at 09:43

Miguel Ruivo · Accepted Answer · 2019-01-05T03:13:28.000

You want to use the content property to place your widgets because the actions will actually be wrapped in a ButtonBar and placed on the bottom right.

So a solution may be split the content of the dialog with a Column letting the SingleChildScrollView to expand to fill the viewport and placing a Row with your desired widgets on the bottom with the mainAxisAlignment: MainAxisAlignment.spaceBetween,. Since you also want to group the Text and CheckBox, another Row will do the job to gather both next to each other.

I've edited your example so you can copy/paste and try/tweak it yourself. This will produce the result below.

class TermsAndConditionsAlertDialog extends StatefulWidget {
  TermsAndConditionsAlertDialogState createState() {
    return new TermsAndConditionsAlertDialogState();
  }
}

class TermsAndConditionsAlertDialogState extends State<TermsAndConditionsAlertDialog> {
  static bool _isChecked = false;

  static final String _TERMS_AND_CONDITIONS_MESSAGE =
      'blablabla this is a terms and conditions message and a blablababl and a bla bla and a aaaaaaaaaaaa bla';
  static final String _DIALOG_TITLE = 'Terms and Conditions';

  @override
  Widget build(BuildContext context) {
    return new AlertDialog(
      title: new Text(_DIALOG_TITLE),
      content: new Column(
        children: <Widget>[
          new Expanded(
            child: new SingleChildScrollView(
              child: new Text(
                _TERMS_AND_CONDITIONS_MESSAGE,
                style: new TextStyle(fontSize: 50.0),
              ),
            ),
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Text('Accept'),
                  new Checkbox(
                    value: _isChecked,
                    onChanged: (bool newValue) {
                      setState(() {
                        _isChecked = newValue;
                      });
                    },
                  ),
                ],
              ),
              new RaisedButton(
                  onPressed: () {
                    _printDialogResult();
                    _closeDialog();
                  },
                  child: new Text(
                    'Start',
                    style: TextStyle(color: Colors.white),
                  )),
            ],
          ),
        ],
      ),
    );
  }

  void _printDialogResult() {
    print('You selected 1');
  }

  void _closeDialog() {
    if (_isChecked) {
      Navigator.pop(context);
    }
  }
}

Thanks!!!))))) This definitely is what I was seeking for. Yeah, in documentation says that the ButtonBar's default orientation is MainAxisAlignment.end, so there is no way this can be changed inside of the AlerDialog's children though? — Ara Mkrtchyan, Jan 06 '19 at 09:39

Aligning alert dialog button bar widgets

1 Answers1