Flutter制作iOS系统的Cupertino的弹出框特效

开篇寄语

flutter中有一个名为Cupertino的官方支撑库，这个各种效果几乎和iOS系统毫无二致，有想要制作这种类型应用或者网站的开发者绝对不容错过，高端大气上档次啊，这次演示一个下方弹出效果。

前情提要

• 《Flutter如何设置移动端禁止随手机自动旋转屏幕》
• 《Flutter有关ColorFiltered一些有趣实例，图片变色大不同》
• 《Flutter制作自己的第一个全平台APP学习之实用功能篇》
• 《Flutter制作自己的第一个全平台APP学习之AppBar篇》
• 《Flutter填写用户名和密码表单实例》

开篇寄语

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

试举例如下：

import 'package:flutter/material.dart';
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 StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  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')),
                CupertinoActionSheetAction(
                    onPressed: () {}, child: const Text('Option #4')),
              ],
              cancelButton: CupertinoActionSheetAction(
                onPressed: () => _close(ctx),
                child: const Text('Close'),
              ),
            ));
  }

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Center(
      child: CupertinoButton(
        child: const Text('Open Action Sheet'),
        onPressed: () => _show(context),
      ),
    ));
  }
}

生成效果如下图所示：