一个简单的 Flutter 顶部模态页面

top_modal_sheet

一个漂亮的、易于使用的弹出式简单顶部模态菜单按钮小部件。

安装

在你的 pubspec.yaml 依赖中添加 top_modal_sheet: ^1.0.0。并导入它

import 'package:top_modal_sheet/top_modal_sheet.dart';

如何使用

只需调用 showModalTopSheet 即可显示它

MaterialButton(
  color: Colors.white,
  elevation: 5,
  child: const Text("Show TopModal"),
  onPressed: () async {
    var value = await showTopModalSheet<String>(context: context, child: DumyModal());

    if(value != null){
      setState(() {
        _topModalData = value;
      });
    }
  },
)

这是使用 Globalkey 调用模态框的另一种方法，以获得流畅的弹出动画

final _topModalSheetKey = GlobalKey<TopModalSheetState>();

MaterialButton(
  color: Colors.white,
  elevation: 5,
  child: const Text("Show TopModal 2"),
  onPressed: () async {
    var value = await Navigator.of(context).push<List<int>>(PageRouteBuilder(pageBuilder: (_, __, ___) {
      return TopModalSheet(
        key: _topModalSheetKey,
        child: Container(color: Colors.teal, height: MediaQuery.of(context).size.height * .2, child: Center(
          child: MaterialButton(
            color: Colors.white,
            child: const Text("Back", style: TextStyle(color: Colors.teal),),
            onPressed: () {
              _topModalSheetKey.currentState.onBackPressed(data: [1,2,3]);
            },
          )
        )),
      );
    }, opaque: false));

    if(value != null){
      setState(() {
        _topModalData = "$value";
      });
    }
  },
)

有关更详细的示例，请查看 example 文件夹。