Flutter底部弹出菜单插件flutter_awesome_bottom

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

特性

自定义子组件
适应设计

支持的平台

Flutter Android
Flutter iOS
Flutter web
Flutter desktop
Flutter macOS
Flutter linux

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_awesome_bottom_sheet: <later-version>

然后导入它：

import 'package:flutter_awesome_bottom_sheet/flutter_awesome_bottom_sheet.dart';

如何使用

创建对象：

final AwesomeBottomSheet _awesomeBottomSheet = AwesomeBottomSheet();

示例

简单的Awesome Sheet

_awesomeBottomSheet.show(
  context: context,
  title: const Text("Lorem Ipsum"),
  description: const Text("Flutter Awesome Bottom sheet content here..."),
  color: CustomSheetColor(
    mainColor: const Color(0xff2979FF),
    accentColor: const Color(0xff0D47A1),
    iconColor: Colors.white,
  ),
  positive: AwesomeSheetAction(
    onPressed: () {
      Navigator.of(context).pop(); // 关闭底部弹出菜单
    },
    title: 'CANCEL',
  ),
);

添加按钮

_awesomeBottomSheet.show(
  ...
  positive: AwesomeSheetAction(
    onPressed: () {
      Navigator.of(context).pop(); // 关闭底部弹出菜单
    },
    title: 'DELETE',
  ),
  negative: AwesomeSheetAction(
    onPressed: () {
      Navigator.of(context).pop(); // 关闭底部弹出菜单
    },
    title: 'CANCEL',
  ),
);

在内容和动作按钮中添加图标

_awesomeBottomSheet.show(
  ...
  icon: Icons.signal_cellular_connected_no_internet_4_bar, // 设置图标
  positive: AwesomeSheetAction(
    onPressed: () {
      Navigator.of(context).pop(); // 关闭底部弹出菜单
    },
    title: 'OPEN SETTING',
    icon: Icons.settings, // 设置按钮图标
  ),
  negative: AwesomeSheetAction(
    onPressed: () {
      Navigator.of(context).pop(); // 关闭底部弹出菜单
    },
    title: 'CANCEL',
  ),
);

自定义颜色

_awesomeBottomSheet.show(
  ...
  color: CustomSheetColor(
    mainColor: Colors.white,
    accentColor: const Color(0xff5A67D8),
    iconColor: const Color(0xff5A67D8),
  ),
  ...
);

截图

简单	动作	图标

完整示例代码

以下是一个完整的示例，展示了如何在应用中使用flutter_awesome_bottom_sheet插件。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Bottom Sheet',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.blue,
          useMaterial3: true),
      home: const HomePage(title: 'Awesome Bottom Sheet'),
    );
  }
}

class HomePage extends StatefulWidget {
  final String title;
  const HomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  /// 对象声明
  final AwesomeBottomSheet _awesomeBottomSheet = AwesomeBottomSheet();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: Colors.white,
      body: SizedBox(
        child: ListView(
          children: <Widget>[
            const SizedBox(
              height: 10,
            ),
            /// 简单的Awesome Sheet
            BuildButton(
              context: context,
              text: 'Simple Awesome Sheet',
              onClick: () {
                _awesomeBottomSheet.show(
                  context: context,
                  title: const Text("Lorem Ipsum"),
                  description: const Text(
                      "Flutter Awesome Bottom sheet content here..."),
                  color: CustomSheetColor(
                    mainColor: const Color(0xff2979FF),
                    accentColor: const Color(0xff0D47A1),
                    iconColor: Colors.white,
                  ),
                  positive: AwesomeSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop(); // 关闭底部弹出菜单
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),

            /// 带有动作的Awesome Sheet
            BuildButton(
              context: context,
              text: 'Action Awesome Sheet',
              onClick: () {
                _awesomeBottomSheet.show(
                  isDismissible: false,
                  context: context,
                  title: const Text("Delete this post?"),
                  description: const Text(
                      "This action will permanently delete this post."),
                  color: CustomSheetColor(
                    mainColor: const Color(0xfff33838),
                    accentColor: const Color(0xffab1d1d),
                    iconColor: Colors.white,
                  ),
                  icon: Icons.delete,
                  positive: AwesomeSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop(); // 关闭底部弹出菜单
                    },
                    title: 'DELETE',
                  ),
                  negative: AwesomeSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop(); // 关闭底部弹出菜单
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),

            /// 带有图标的Awesome Sheet
            BuildButton(
              context: context,
              text: 'Icon Awesome Sheet',
              onClick: () {
                _awesomeBottomSheet.show(
                  context: context,
                  title: const Text("Attention"),
                  description: const Text(
                      'Your app is not connected to internet actually, please turn on Wifi/Cellular data.'),
                  color: CustomSheetColor(
                    mainColor: const Color(0xff2979FF),
                    accentColor: const Color(0xff0D47A1),
                    iconColor: Colors.white,
                  ),
                  icon: Icons.signal_cellular_connected_no_internet_4_bar,
                  positive: AwesomeSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop(); // 关闭底部弹出菜单
                    },
                    title: 'OPEN SETTING',
                    icon: Icons.settings, // 设置按钮图标
                  ),
                  negative: AwesomeSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop(); // 关闭底部弹出菜单
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

/// 创建一个按钮小部件以便多次使用
class BuildButton extends StatelessWidget {
  final BuildContext context;
  final String text;
  final VoidCallback onClick;

  const BuildButton({
    Key? key,
    required this.context,
    required this.text,
    required this.onClick,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 8.0),
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: GestureDetector(
        onTap: onClick,
        child: Container(
          padding: const EdgeInsets.all(10),
          color: Colors.blue,
          child: SizedBox(
            width: double.infinity,
            child: Text(
              text,
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter底部弹出菜单插件flutter_awesome_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•2 天前

更多关于Flutter底部弹出菜单插件flutter_awesome_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_awesome_bottom_sheet插件来创建一个底部弹出菜单的示例代码。这个插件允许你以更加灵活和定制化的方式展示底部菜单。

首先，确保你的pubspec.yaml文件中已经添加了flutter_awesome_bottom_sheet依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_awesome_bottom_sheet: ^2.0.0  # 请检查最新版本号

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

接下来，在你的Dart文件中，你可以使用AwesomeBottomSheet来创建一个底部弹出菜单。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Awesome Bottom Sheet Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showBottomSheet() {
    showCupertinoBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return AwesomeBottomSheet(
          title: Text('底部弹出菜单'),
          closeIcon: Icon(Icons.close),
          actionButtons: <AwesomeBottomSheetActionButton>[
            AwesomeBottomSheetActionButton(
              iconData: Icons.home,
              text: '首页',
              onPressed: () {
                Navigator.pop(context);
                // 执行首页相关的操作
                print('点击了首页');
              },
            ),
            AwesomeBottomSheetActionButton(
              iconData: Icons.settings,
              text: '设置',
              onPressed: () {
                Navigator.pop(context);
                // 执行设置相关的操作
                print('点击了设置');
              },
            ),
            AwesomeBottomSheetActionButton(
              iconData: Icons.info,
              text: '关于',
              onPressed: () {
                Navigator.pop(context);
                // 执行关于相关的操作
                print('点击了关于');
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showBottomSheet,
          child: Text('显示底部弹出菜单'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。点击按钮时，会展示一个底部弹出菜单。AwesomeBottomSheet小部件允许你设置标题、关闭图标以及动作按钮。每个动作按钮都有一个图标、文本和一个点击事件处理函数。

你可以根据需要进一步自定义和扩展这个示例，例如添加更多的动作按钮、更改样式或添加自定义的小部件。flutter_awesome_bottom_sheet插件提供了丰富的选项来定制底部弹出菜单的外观和行为。