Display Cupertino Alert Dialog in Flutter

Display Cupertino Alert Dialog in Flutter

Cupertino alert dialog is iOS-style alert dialog.

The CupertinoAlertDialog class is used to create Cupertino alert dialog. Action button that looks like standard iOS dialog button, can be created using CupertinoDialogAction. This dialog can be displayed using showDialog() function. However there is another function showCupertinoDialog() which displays dialog with iOS-style entrance and exit animations.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  _showDialog(BuildContext context) {
    CupertinoAlertDialog alert = CupertinoAlertDialog(
      title: const Text('My title'),
      content: const Text('My message'),
      actions: [
        CupertinoDialogAction(
          child: const Text('OK'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    );

    return showCupertinoDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Cupertino alert dialog')),
        body: Center(
            child: ElevatedButton(
          child: const Text('Open'),
          onPressed: () => _showDialog(context),
        )));
  }
}

Leave a Comment

Cancel reply

Your email address will not be published.