Flutter CupertinoAlertDialog Example

Last updated on December 13, 2020 A Goodman Loading... One comment

CupertinoAlertDialog is a iOS-style widget that informs the user about situations that require acknowledgement. It has an optional title, optional content, and an optional list of actions.

Implement

showCupertinoDialog(
        context: ctx,
        builder: (_) => CupertinoAlertDialog(
              title: Text("This is the title"),
              content: Text("This is the content"),
              actions: [
                // Close the dialog
                CupertinoButton(
                    child: Text('Close'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                  child: Text('I agree'),
                  onPressed: () {
                    // Do something
                    print('I agreed');
                  },
                )
              ],
            ));

Full example

Complete code in main.dart:

import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: "Kindacode.com",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void _openDialog(ctx) {
    showCupertinoDialog(
        context: ctx,
        builder: (_) => CupertinoAlertDialog(
              title: Text("This is the title"),
              content: Text("This is the content"),
              actions: [
                // Close the dialog
                // You can use the CupertinoDialogAction widget instead
                CupertinoButton(
                    child: Text('Close'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                  child: Text('I agree'),
                  onPressed: () {
                    // Do something
                    print('I agreed');
                  },
                )
              ],
            ));
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SafeArea(
        child: Column(
          children: [
            CupertinoButton(
                onPressed: () => _openDialog(context),
                child: Text('Open CupertinoAlertDialog'))
          ],
        ),
      ),
    );
  }
}

Run the code and you should see something like this:

The example above is so simple but from here, you’re pretty good to go.

Related Articles

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
Flutter CupertinoDialog Example | Kindacode
8 months ago

[…] See also: Flutter CupertinoAlertDialog Example […]