7.7 C
New York
Saturday, December 2, 2023

Flutter Cupertino ActionSheet: Tutorial & Example

This article is about the CupertinoActionSheet widget in Flutter.

Overview

The CupertinoActionSheet widget is used to create an iOS-style action sheet.Advertisements

An action sheet presents multiple choices related to an intentional user action. On small screens, an action sheet slides up from the bottom of the screen. On larger screens, an action sheet appears all at once as a popover.

Constructor:

CupertinoActionSheet({
  Key? key, 
  Widget? title, 
  Widget? message, 
  List<Widget>? actions, 
  ScrollController? messageScrollController, 
  ScrollController? actionScrollController, 
  Widget? cancelButton
})

Each choice of an action sheet should be implemented by using a CupertinoActionSheetAction widget:

CupertinoActionSheetAction({
  Key? key, 
  required VoidCallback onPressed, 
  bool isDefaultAction = false, 
  bool isDestructiveAction = false, 
  required Widget child
})

The Example

App Preview

AdvertisementsThe sample app we are going to build has a button. When this button is pressed, a Cupertino action sheet will show up and let the user select one of these three options: Option #1, Option #2, and Option #3. The result will be displayed right below the button by using a Text widget.

Our action sheet can be closed in one of the following ways:

  • An option gets selected.
  • The Close button is pressed.
  • The user click somewhere outsite the action sheet.

Here’s how it works:

The Code

Advertisements

The function that shows the Cupertino ActionSheet:

  // This function is used to show the action sheet
  // It will be triggered when the button gets pressed
  void _show(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => CupertinoActionSheet(
              actions: [
                CupertinoActionSheetAction(
                    onPressed: () {/*...*/},
                    child: const Text('Option #1')),
                CupertinoActionSheetAction(
                    onPressed: () {/*...*/},
                    child: const Text('Option #2')),
                CupertinoActionSheetAction(
                    onPressed: () {/*...*/},
                    child: const Text('Option #3')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Close'),
              ),
            ));
}

The function that closes the Action Sheet:

void _close(BuildContext ctx) {
    Navigator.of(ctx).pop();
}

The complete code in lib/main.dart (with explanations):

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // This function is used to show the action sheet
  // It will be triggered when the button gets pressed
  void _show(BuildContext ctx) {
    showCupertinoModalPopup(
        context: ctx,
        builder: (_) => CupertinoActionSheet(
              actions: [
                CupertinoActionSheetAction(
                    onPressed: () {
                      setState(() {
                        _selectedOption = "Option #1";
                      });
                      _close(ctx);
                    },
                    child: const Text('Option #1')),
                CupertinoActionSheetAction(
                    onPressed: () {
                      setState(() {
                        _selectedOption = "Option #2";
                      });
                      _close(ctx);
                    },
                    child: const Text('Option #2')),
                CupertinoActionSheetAction(
                    onPressed: () {
                      setState(() {
                        _selectedOption = "Option #3";
                      });
                      _close(ctx);
                    },
                    child: const Text('Option #3')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Close'),
              ),
            ));
  }

  // This function is used to close the action sheet
  void _close(BuildContext ctx) {
    Navigator.of(ctx).pop();
  }

  // This is what you select from the action sheet
  String? _selectedOption;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar:
            const CupertinoNavigationBar(middle: Text('KindaCode.com')),
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              // The button
              CupertinoButton(
                child: const Text('Open Action Sheet'),
                color: const Color.fromRGBO(200, 200, 0, 1),
                onPressed: () => _show(context),
              ),
              const SizedBox(
                height: 30,
              ),
              // Display the result
              Text(
                _selectedOption != null ? '$_selectedOption' : 'No result',
                style: const TextStyle(fontSize: 30),
              )
            ]),
          ),
        ));
  }
}

References

Afterword

You’ve learned the fundamentals of the CupertinoActionSheet widget in Flutter and examined an end-to-end example of using it in practice. If you’d like to explore more iOS-style things in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Advertisements

Related Articles

Latest Articles