CODEWITHSUNDEEP
dartflutter
user10699465
user10699465

Reputation:

How to display iOS/cupertino alert dialog in Android using Flutter?

I was trying to display a iOS themed dialog box in my Flutter app, but I was unable to find anything in the docs

Upvotes: 17

Views: 43660

Answers (3)

Usama Elgendy
Usama Elgendy

Reputation: 576

First you check if platForm ios or android .. then return widget for the current device ..

Future<bool> showAlertDialog({
  @required BuildContext context,
  @required String title,
  @required String content,
  String cancelActionText,
  @required String defaultActionText,
}) async {
  if (!Platform.isIOS) {
    return showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(title),
        content: Text(content),
        actions: <Widget>[
          if (cancelActionText != null)
            FlatButton(
              child: Text(cancelActionText),
              onPressed: () => Navigator.of(context).pop(false),
            ),
          FlatButton(
            child: Text(defaultActionText),
            onPressed: () => Navigator.of(context).pop(true),
          ),
        ],
      ),
    );
  }

  // todo : showDialog for ios
  return showCupertinoDialog(
    context: context,
    builder: (context) => CupertinoAlertDialog(
      title: Text(title),
      content: Text(content),
      actions: <Widget>[
        if (cancelActionText != null)
          CupertinoDialogAction(
            child: Text(cancelActionText),
            onPressed: () => Navigator.of(context).pop(false),
          ),
        CupertinoDialogAction(
          child: Text(defaultActionText),
          onPressed: () => Navigator.of(context).pop(true),
        ),
      ],
    ),
  );
}

Upvotes: 22

Safi Ahmed
Safi Ahmed

Reputation: 168

I used CupertinoAlertDialog inside the ShowDialog, you can find the same below 

showDialog(
      context: context,
      builder: (BuildContext context) => CupertinoAlertDialog(
        title: new Text("Dialog Title"),
        content: new Text("This is my content"),
        actions: <Widget>[
          CupertinoDialogAction(
            isDefaultAction: true,
            child: Text(StringConstants.BIOMETRICAUTHORIZED),
          ),
          CupertinoDialogAction(
            child: Text("No"),
          )
        ],
      )
    );

Upvotes: 8

yelliver
yelliver

Reputation: 5926

The keyword for Android theme/style is Material (default design), the keyword for iOS theme/style is Cupertino. Every iOS theme widget has the prefix Cupertino. So that, for you requirement, we can guess the keyword is CupertinoDialog/CupertinoAlertDialog

You can refer here for all of them https://flutter.io/docs/reference/widgets/cupertino

new CupertinoAlertDialog(
  title: new Text("Dialog Title"),
  content: new Text("This is my content"),
  actions: <Widget>[
    CupertinoDialogAction(
      isDefaultAction: true,
      child: Text("Yes"),
    ),
    CupertinoDialogAction(
      child: Text("No"),
    )
  ],
)

Upvotes: 23

Related Questions