What is the proper way to implement CupertinoActionSheet?

Question

I am trying to implement a CupertinoActionSheet in my flutter app, but I keep failing. I am quite sure that I have all the necessary stuff but I keep running into the following error:

Navigator operation requested with a context that does not include a Navigator.

I don't understand why I am getting this error. What is the proper way to implement a CupertinoActionSheet?

Code:

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

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

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Card(
                  elevation: 20,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 180.0),
                          child: CupertinoButton(
                            color: Colors.black,
                            child: Text(
                              'Click me',
                              style: TextStyle(color: Colors.white),
                            ),
                            onPressed: () {
                              final act = CupertinoActionSheet(
                                  title: Text('Select Option'),
                                  message:
                                      Text('Which option?'),
                                  actions: <Widget>[
                                    CupertinoActionSheetAction(
                                      child: Text('1'),
                                      onPressed: () {
                                        print('pressed');
                                      },
                                    )
                                  ],
                                  cancelButton:                                     CupertinoActionSheetAction(
                                    child: Text('Cancel'),
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                  ));
                              showCupertinoModalPopup(
                                  context: context,
                                  builder: (BuildContext context) => act);
                            },
                          ),
                        ),
                      ]),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

}

Answer 1

If you are working on multiple screens that navigating, Navigator.pop(context); will close the original screen instead of ActionSheet Dialog and then push back to the previous screen.

So it is necessary to replace Navigator.pop(context); with Navigator.of(context, rootNavigator: true).pop("Cancel"); or Navigator.of(context, rootNavigator: true).pop("1");

Following is the full code.

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

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Card(
                  elevation: 20,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        StatefulBuilder(builder:
                            (BuildContext context, StateSetter setState) {
                          return Padding(
                            padding: const EdgeInsets.only(top: 180.0),
                            child: CupertinoButton(
                              color: Colors.black,
                              child: Text(
                                'Click me',
                                style: TextStyle(color: Colors.white),
                              ),
                              onPressed: () {
                                final act = CupertinoActionSheet(
                                    title: Text('Select Option'),
                                    message: Text('Which option?'),
                                    actions: <Widget>[
                                      CupertinoActionSheetAction(
                                        child: Text('1'),
                                        onPressed: () {
                                          print('pressed');
                                          Navigator.of(context, rootNavigator: true).pop("1");
                                        },
                                      )
                                    ],
                                    cancelButton: CupertinoActionSheetAction(
                                      child: Text('Cancel'),
                                      onPressed: () {
                                        Navigator.of(context, rootNavigator: true).pop("Cancel");
                                      },
                                    ));
                                showCupertinoModalPopup(
                                    context: context,
                                    builder: (BuildContext context) => act);
                              },
                            ),
                          );
                        })
                      ]),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

You can use StatefulBuilder , see full code below
code snippet

children: <Widget>[
                        StatefulBuilder(builder:
                            (BuildContext context, StateSetter setState) {
                          return Padding(
                            padding: const EdgeInsets.only(top: 180.0),
                            child: CupertinoButton(

full code

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

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Card(
                  elevation: 20,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        StatefulBuilder(builder:
                            (BuildContext context, StateSetter setState) {
                          return Padding(
                            padding: const EdgeInsets.only(top: 180.0),
                            child: CupertinoButton(
                              color: Colors.black,
                              child: Text(
                                'Click me',
                                style: TextStyle(color: Colors.white),
                              ),
                              onPressed: () {
                                final act = CupertinoActionSheet(
                                    title: Text('Select Option'),
                                    message: Text('Which option?'),
                                    actions: <Widget>[
                                      CupertinoActionSheetAction(
                                        child: Text('1'),
                                        onPressed: () {
                                          print('pressed');
                                        },
                                      )
                                    ],
                                    cancelButton: CupertinoActionSheetAction(
                                      child: Text('Cancel'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                      },
                                    ));
                                showCupertinoModalPopup(
                                    context: context,
                                    builder: (BuildContext context) => act);
                              },
                            ),
                          );
                        })
                      ]),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}