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]

Answer 1

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);
    }
  }
}