本文实例为大家分享了flutter实现底部抽屉效果的具体代码，供大家参考，具体内容如下

安卓：showModalBottomSheet
IOS：showCupertinoModalPopup

效果图

完整代码

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

///@作者: Q.L
///@创建日期: 2021-09-09 10:55
///@描述: {底部抽屉}
class ActionSheetPage extends StatefulWidget {
  const ActionSheetPage({Key? key}) : super(key: key);

  @override
  _ActionSheetPageState createState() => _ActionSheetPageState();
}

class _ActionSheetPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("底部抽屉弹出"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  _showModalBottomSheet();
                },
                child: Text("安卓弹出")),
            ElevatedButton(
                onPressed: () {
                  _showCupertinoModalPopup();
                },
                child: Text("IOS弹出")),
          ],
        ),
      ),
    );
  }

  _showModalBottomSheet() async {
    var _result = await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.greenAccent, //背景颜色
        // elevation: 500, //阴影
        shape: RoundedRectangleBorder(
            // borderRadius: BorderRadius.all(Radius.circular(10)),//所有圆角边框
            borderRadius:
                BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        isScrollControlled: false, //是否是全屏还是半屏，true全屏，默认false半屏
        isDismissible: true, //外部是否可以点击，false不可以点击，true可以点击，点击后消失
        builder: (BuildContext context) {
          return Column(
            mainAxisSize: MainAxisSize.min, // 设置最小的弹出
            children: [
              ListTile(
                leading: Icon(Icons.photo_camera),
                title: Text("拍照"),
                onTap: () {
                  Navigator.of(context).pop("拍照");
                },
              ),
              ListTile(
                leading: Icon(Icons.photo_library),
                title: Text("相册"),
                onTap: () {
                  Navigator.of(context).pop("相册");
                },
              ),
            ],
          );
        });
    print("选择了安卓==>>${_result ?? "点击了屏幕取消"}");
  }

  _showCupertinoModalPopup() async {
    var result = await showCupertinoModalPopup(
        context: context,
        builder: (context) {
          return CupertinoActionSheet(
            title: Text("提示"),
            message: Text("是否要编辑当前项？"),
            actions: [
              CupertinoActionSheetAction(
                child: Text("编辑"),
                onPressed: () {
                  Navigator.of(context).pop("编辑");
                },
                isDefaultAction: true,
              ),
              CupertinoActionSheetAction(
                child: Text("删除"),
                onPressed: () {
                  Navigator.of(context).pop("删除");
                },
                isDestructiveAction: true,
              ),
            ],
            cancelButton: CupertinoActionSheetAction(
              child: Text("取消"),
              onPressed: () {
                Navigator.of(context).pop("取消");
              },
            ),
          );
        });
    print("选择了IOS==>>${result ?? "点击了屏幕取消"}");
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

关键词： 希望大家 背景颜色 为大家分享 大家参考 创建日期