Is there a way to create pop Modal using CupertinoAlertDialog in flutter?

Question

Functionality behind the app:

1. The soccer ball in the upper right corner is a IconButton.
2. Once the soccer IconButton is clicked, it creates a modal pop up in the middle of the screen and the outside of the modal box is blurred.
3. The alert box shows heading "Success!" and then the content "You are in the football universe!".

I have included an image example of how it would look like once the the code is successful.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple[200],
          actions: <Widget>[
            IconButton(
              icon: Icon(
                MdiIcons.soccer,
                color: Colors.grey[800],
              ),
              iconSize: 30,
              onPressed: () => {
                CupertinoAlertDialog(
                  title: Text('Success!'),
                  content: Text('You are in the football universe!'),
                ),
              },
            ),
          ],
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Issues:

1. There is no error being displayed.
2. The functionality for the modal being popped up is not being excuted.

Things I have tried that were unsuccessful:

1. I have tried to make another stateless widget and then included the name of that stateless widget inside appBar.

Answer 1

You can copy paste run full code below
Step 1: You can use showDialog
Step 2: Move MaterialApp to upper level void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));

code snippet

Future<void> _handleClickMe() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: Text('Success!'),
          content: Text('You are in the football universe!'),
        );
      },
    );
  }

working demo

full code

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

void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  Future<void> _handleClickMe() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: Text('Success!'),
          content: Text('You are in the football universe!'),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepPurple[200],
        actions: <Widget>[
          IconButton(
            icon: Icon(
              MdiIcons.soccer,
              color: Colors.grey[800],
            ),
            iconSize: 30,
            onPressed: () => _handleClickMe(),
          ),
        ],
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

Answer 2

Looks like you need to call showDialog and pass your CupertinoAlertDialog to the builder

onPressed: () => {
   showDialog(
      context: context,
      builder: (BuildContext context) => CupertinoAlertDialog(
         title: Text('Success!'),
         content: Text('You are in the football universe!')
      ),
   ),
},