flutter如何实现底部抽屉效果

小编给大家分享一下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<ActionSheetPage> {  @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 ?? '点击了屏幕取消'}');  }}

以上是“flutter如何实现底部抽屉效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！