Search code examples
flutterdividerflutter-alertdialog

How to add dividers in flutter with yes no buttons?


I have to add a horizontal and a vertical divider for my alert dialog as shown in figure.

The only method I am trying is here, better not to refer this code, but I need to design as expected in image.

AlertDialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0))
  ),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      new Row(
        children: <Widget>[
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
              ),
              child: new GestureDetector(
                onTap: () => callback(AlertButton.positive),
                child: new Text(
                  positiveActionText,
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black)
              ),
              child: new GestureDetector(
                onTap: () => callback(AlertButton.negative),
                child: new Text(
                  negativeActionText,
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

The below is an image: Expected design Image


Solution

  • You can use CupertinoAlertDialog, which has these lines by default :

    Cupertino alert dialog

    In your case :

    showDialog(
        context: context,
        builder: (_) => CupertinoAlertDialog(
            content: Text('Are you sure want to logout?'),
            actions: [
                CupertinoDialogAction(child: Text('Yes'), onPressed: (){}),
                CupertinoDialogAction(child: Text('No'), onPressed: (){}),
            ],
        ),
    );