Cupertino Dialogs in Flutter: A Step-by-Step Guide to Professional App Design

Dialogs are a key component of any modern mobile app, providing users with important information, warnings, or confirmation prompts. 

If you're building a Flutter app with a Cupertino-style design, then mastering the art of designing effective dialogs is essential. 

In this step-by-step guide, we'll show you how to create professional-looking dialogs in Flutter that are consistent with Apple's design language. 

You'll learn best practices for layout, typography, and color, as well as how to handle user input and customize your dialogs to match your app's branding. 

By the end of this guide, you'll have the skills you need to create beautiful and functional dialogs that will enhance the user experience of your app.

#1 Info Dialog - IOS

// Function to show an information dialog or alert dialog
  showDialogInfo() {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // Disallows dismissing the dialog by tapping outside it
      builder: (BuildContext context) {

        final textTheme = Theme.of(context)
            .textTheme
            .apply(displayColor: Theme.of(context).colorScheme.onSurface);

        return CupertinoAlertDialog(
          // Dialog title with formatted text
          title:  TextStyleExample(name : 'Payment Success!',style : textTheme.titleLarge!.copyWith(color: Theme.of(context).colorScheme.primary,letterSpacing: 0.1,fontWeight: FontWeight.bold)),
          // Dialog content with formatted text
          content:  TextStyleExample(name : 'It is our pleasure to offer you our products',style : textTheme.bodyMedium!),
          actions: <Widget>[
            // Button to continue with formatted text
            CupertinoDialogAction(
              child: TextStyleExample(name : 'Continue', style:  textTheme.titleMedium!.copyWith(color: Theme.of(context).colorScheme.secondary,letterSpacing: 0.3)),
              onPressed: () {
                Navigator.of(context).pop(); // Dismisses the dialog
              },
            ),
          ],
        );
      },
    );
  }

Shows a Cupertino-style information dialog in a Flutter app.

The showDialogInfo() function uses the showDialog() method to create a modal dialog box, which will appear on top of the app's content. The builder function is used to construct the contents of the dialog.

Inside the builder function, a CupertinoAlertDialog widget is created. The CupertinoAlertDialog widget is a pre-built dialog box that has a consistent style with the iOS platform's design language.

The CupertinoAlertDialog widget has three main properties:

• title: This property sets the title of the dialog box. In the code, the TextStyleExample widget is used to apply formatting to the title text. The TextStyleExample is a custom widget that takes two arguments: name, which is the text to display, and style, which is the style to apply to the text. In this case, the title text is formatted with a large font size, a custom color, and a bold font weight.

• content: This property sets the body text of the dialog box. Similar to the title property, the TextStyleExample widget is used to apply formatting to the body text. In this case, the body text is formatted with a medium font size.

• actions: This property is used to add buttons to the dialog box. In this code, a single CupertinoDialogAction button is added to the dialog box. The button's text is formatted with a custom color and a medium font size. The onPressed property of the button is set to dismiss the dialog box when the button is pressed.

Finally, the showDialogInfo() function returns the showDialog() method, which will display the constructed dialog box on the app screen.

..

#2 Confirmation Dialog

      // Create a new text theme that applies the display color to the text
      final textTheme = Theme.of(context)
          .textTheme
          .apply(displayColor: Theme.of(context).colorScheme.onSurface);

// Show a Cupertino-style dialog box
      showCupertinoDialog(
        context: context,
        builder: (BuildContext context) => CupertinoAlertDialog(
          // Add a title to the dialog with the 'Logout?' text, using the textTheme to apply styles
          title: TextStyleExample(
            name: 'Logout?',
            style: textTheme.titleMedium!.copyWith(
              color: Theme.of(context).colorScheme.primary,
              fontWeight: FontWeight.bold,
            ),
          ),
          // Add content to the dialog with the 'Are you sure want to logout?' text, using the textTheme to apply styles
          content: TextStyleExample(
            name: 'Are you sure want to logout?',
            style: textTheme.titleSmall!,
          ),
          // Add two actions to the dialog: Cancel and Logout
          actions: [
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Cancel',
                style: textTheme.labelLarge!,
              ),
              onPressed: () {
                // Handle the 'Cancel' action by dismissing the dialog
                finish(context);
              },
            ),
            CupertinoDialogAction(
              child: TextStyleExample(
                name: 'Logout',
                style: textTheme.labelLarge!.copyWith(
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
              onPressed: () {
                // Handle the 'Logout' action by dismissing the dialog
                finish(context);
              },
            ),
          ],
        ),
      );

 To create and display a Cupertino-style dialog box in a Flutter app.

First, a new textTheme object is created that applies the displayColor to the text. The displayColor is the color of the text on top of surfaces such as cards or dialogs.

The showCupertinoDialog method is then used to create and show a CupertinoAlertDialog widget that has a title, content, and actions.

The CupertinoAlertDialog widget has three main properties:

• title: This property sets the title of the dialog box. In the code, the TextStyleExample widget is used to apply formatting to the title text. The TextStyleExample is a custom widget that takes two arguments: name, which is the text to display, and style, which is the style to apply to the text. In this case, the title text is formatted with a medium font size, a custom color, and a bold font weight.

• content: This property sets the body text of the dialog box. Similar to the title property, the TextStyleExample widget is used to apply formatting to the body text. In this case, the body text is formatted with a small font size.

• actions: This property is used to add buttons to the dialog box. In this code, two CupertinoDialogAction buttons are added to the dialog box. Each button's text is formatted with a custom font size and a custom color. The onPressed property of each button is set to dismiss the dialog box when the button is pressed.

Finally, the showCupertinoDialog method is called with the context and builder arguments. The builder argument is a callback that returns the CupertinoAlertDialog widget. When this method is called, it will create and display the constructed dialog box on the app screen.

..

..

GET source code on Github: