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

Question

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

Answer 1

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"),
    )
  ],
)

Answer 2

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"),
          )
        ],
      )
    );

Answer 3

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

Answer 4

The following is a simple example of how to create a simple alert with two button in Flutter,

import a import 'package:flutter/cupertino.dart'; and Copy and paste below code and Call it showAlertDialog(context); where you want to show Dialog.

void showAlertDialog(BuildContext context) {

  showDialog(
    context: context,
    child:  CupertinoAlertDialog(
      title: Text("Log out?"),
      content: Text( "Are you sure you want to log out?"),
      actions: <Widget>[
        CupertinoDialogAction(
            isDefaultAction: true,
            onPressed: (){
              Navigator.pop(context);
            },
            child: Text("Cancel")
        ),
        CupertinoDialogAction(
          textStyle: TextStyle(color: Colors.red),
            isDefaultAction: true,
            onPressed: () async {
              Navigator.pop(context);
              SharedPreferences prefs = await SharedPreferences.getInstance();
              prefs.remove('isLogin');
              Navigator.pushReplacement(context,
                  MaterialPageRoute(builder: (BuildContext ctx) => LoginScreen()));
            },
            child: Text("Log out")
        ),
      ],
    ));
}