bottom_sheet_fx 是一个用于在 Flutter 中创建底部弹出菜单的插件。它提供了多种样式和自定义选项，使得创建底部弹出菜单变得非常简单和灵活。以下是如何使用 bottom_sheet_fx 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 bottom_sheet_fx 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_fx: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 bottom_sheet_fx 包：

import 'package:bottom_sheet_fx/bottom_sheet_fx.dart';

3. 使用 BottomSheetFx

你可以使用 BottomSheetFx 来显示底部弹出菜单。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:bottom_sheet_fx/bottom_sheet_fx.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomSheetFx Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            BottomSheetFx.show(
              context,
              child: Container(
                padding: EdgeInsets.all(20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('This is a bottom sheet'),
                    SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.pop(context); // 关闭底部弹出菜单
                      },
                      child: Text('Close'),
                    ),
                  ],
                ),
              ),
              options: BottomSheetFxOptions(
                backgroundColor: Colors.white,
                elevation: 10,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                ),
              ),
            );
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }
}

4. 自定义选项

BottomSheetFxOptions 提供了多种自定义选项，例如：

• backgroundColor: 设置底部弹出菜单的背景颜色。
• elevation: 设置底部弹出菜单的阴影高度。
• shape: 设置底部弹出菜单的形状。
• isDismissible: 设置是否可以通过点击外部关闭底部弹出菜单。
• enableDrag: 设置是否可以通过拖动关闭底部弹出菜单。
• isScrollControlled: 设置底部弹出菜单是否可以根据内容滚动。

5. 关闭底部弹出菜单

你可以通过 Navigator.pop(context) 来关闭底部弹出菜单。

6. 处理回调

你还可以在关闭底部弹出菜单时处理回调：

BottomSheetFx.show(
  context,
  child: Container(
    padding: EdgeInsets.all(20),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('This is a bottom sheet'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 关闭底部弹出菜单
          },
          child: Text('Close'),
        ),
      ],
    ),
  ),
  options: BottomSheetFxOptions(
    backgroundColor: Colors.white,
    elevation: 10,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
    ),
  ),
).then((value) {
  print('Bottom sheet closed');
});