Flutter底部弹出菜单插件flutter_my_bottom_sheet的使用

一个轻松模仿Cupertino底部弹出菜单的包

style: effective dart Awesome Flutter

与现有的其他包不同，flutter_cupertino_bottom_sheet 不需要 Scaffold 来实现此功能。它可以从任何地方和任何时间使用。除了在初始化时用 CupertinoBottomSheetRepaintBoundary() 包裹你的 MaterialApp 外，你无需编写任何特殊代码。就这么简单！甚至不需要特定的上下文即可使其工作。

它是如何工作的？

非常简单。内部使用了一个重绘边界（repaint boundary），创建整个屏幕的截图，并将其转换为 RawImage。因此，它不关心之前的路由是否保持状态。它实际上不需要知道有关之前路由的任何信息，因为它使用的是截图而不是小部件快照。

开始使用

导入包

在初始化你的应用时导入该包：

import 'package:flutter_cupertino_bottom_sheet/flutter_my_bottom_sheet.dart';

初始化 MaterialApp

然后用 CupertinoBottomSheetRepaintBoundary 包裹你的 MaterialApp 或其他类型的路由：

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        navigatorKey: cupertinoBottomSheetNavigatorKey, // 可选：用于更少代码
        title: 'Flutter Cupertino Bottom Sheet',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
      ),
    );
  }
}

这将为库提供必要的 RenderRepaintBoundary。

推送底部弹出菜单

你可以通过 Navigator 推出底部弹出菜单，如下所示：

Navigator.of(context).push(
  CupertinoBottomSheetRoute(
    args: const CupertinoBottomSheetRouteArgs(
      swipeSettings: SwipeSettings(
        canCloseBySwipe: true, // 是否可以通过滑动关闭
      ),
    ),
    builder: (context) {
      return const TestPage(); // 替换为你要显示的页面
    },
  ),
);

想要更少的代码？没问题！

如果你不想写太多代码，可以传递一个 cupertinoBottomSheetNavigatorKey 给你的应用初始化：

[@override](/user/override)
Widget build(BuildContext context) {
  return CupertinoBottomSheetRepaintBoundary(
    child: MaterialApp(
      navigatorKey: cupertinoBottomSheetNavigatorKey,
      title: 'Flutter Cupertino Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
    ),
  );
}

然后可以在任何地方调用 openCupertinoBottomSheet，而无需上下文：

openCupertinoBottomSheet(
  builder: (c) {
    return const TestPage();
  },
  args: CupertinoBottomSheetRouteArgs(
    appBar: CupertinoBottomSheetAppBar.withCloseButton(
      title: 'Cupertino Actionsheet',
      buttonText: 'Done',
      headerStyle: Theme.of(context).textTheme.bodyMedium,
      onClosePressed: Navigator.of(context).pop, // 点击关闭按钮时关闭弹窗
    ),
  ),
);

示例代码

以下是一个完整的示例代码：

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_cupertino_bottom_sheet/flutter_my_bottom_sheet.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        navigatorKey: cupertinoBottomSheetNavigatorKey, // 可选：用于更少代码
        title: 'Flutter Cupertino Bottom Sheet',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
      ),
    );
  }
}