Flutter底部弹出对话框插件bottom_dialog的使用

底部弹出对话框（bottom_dialog）是一个用于选择单个或多个选项的对话框。它支持添加图标或搜索功能。

获取开始

首先，确保在你的项目中已经安装了bottom_dialog插件。你可以在pubspec.yaml文件中添加以下依赖项：

dependencies:
  bottom_dialog: ^版本号

然后运行flutter pub get来获取该插件。

示例代码

下面是一个完整的示例代码，展示了如何使用bottom_dialog插件来创建一个底部弹出对话框。

主程序文件 main.dart

import 'package:bottom_dialog/bottom_model.dart';
import 'package:flutter/material.dart';
import 'package:bottom_dialog/show_bottom_dialog.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '底部对话框演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '底部对话框演示'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击浮动操作按钮以显示对话框',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showDialog,
        tooltip: 'Increment',
        child: Text(
          '显示对话框',
          textAlign: TextAlign.center,
        ),
      ), // 这个逗号使得自动格式化更美观。
    );
  }

  void _showDialog() {
    List<BottomModel> list = [
      BottomModel(
          name: '一',
          id: '1',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 1),
      BottomModel(
          name: '二',
          id: '2',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 2),
      BottomModel(
          name: '三',
          id: '3',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 3),
      BottomModel(
          name: '四',
          id: '4',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 4),
      BottomModel(
          name: '五',
          id: '5',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 5),
      BottomModel(
          name: '六',
          id: '6',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 6),
      BottomModel(
          name: '七',
          id: '7',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 7),
      BottomModel(
          name: '八',
          id: '8',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 8),
      BottomModel(
          name: '九',
          id: '9',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 9),
      BottomModel(
          name: '十',
          id: '10',
          selected: false,
          imageWidget: Icon(Icons.confirmation_number_sharp),
          sortId: 10),
    ];
    ShowBottomDialog(
      context: context,
      bottomModelList: list,
      // 显示或隐藏列表中的图像
      showImage: true,
      // 列表项文本样式
      itemTextStyle: TextStyle(color: Colors.black87, fontSize: 18.0),
      // 标题文本位于头部中心
      titleText: Text(
        '请选择',
        style: TextStyle(color: Colors.black, fontSize: 22.0),
      ),
      // 保存文字，仅当multiSelect为true时显示
      saveWord: '保存',
      // 保存文字样式
      saveTextStyle: TextStyle(color: Colors.blueAccent, fontSize: 18.0),
      // 背景颜色
      widgetColor: Colors.white,
      // 允许在对话框内使用搜索
      useSearch: true,
      // 搜索文字
      searchWord: '搜索...',
      // 搜索文字样式
      searchTextStyle: TextStyle(color: Colors.blueAccent, fontSize: 16.0),
      // 搜索提示文字样式
      searchHintTextStyle: TextStyle(color: Colors.grey, fontSize: 16.0),

      // 自定义搜索图标作为前缀
      prefixSearchIcon: Icon(
        Icons.search,
        color: Colors.blueAccent,
      ),
      // 如果为true，则返回onSave函数，否则返回onItemSelected
      multiSelect: true,
      onSave: (List<BottomModel> returnedList) {},
      // 返回
      onItemSelected: (BottomModel item) {},
      // 允许在对话框顶部和底部显示阴影
      hasShadow: true,
      // 创建自定义对话框
      customBoxShadow: [
        BoxShadow(
          color: Colors.blueAccent,
          blurRadius: 5.0,
          spreadRadius: 5.0,
          offset: Offset(2.0, 2.0), // 阴影方向：右下
        )
      ],
      // 分隔符在头部之后（取消、标题文本...）
      hasDividerAfterHeader: true,
      // 分隔符颜色
      dividerColor: Colors.blueGrey,
      // 取消文字
      cancelWord: '取消',
      // 取消文字样式，如果为null则会抛出错误
      cancelTextStyle: TextStyle(color: Colors.red, fontSize: 16.0),
      // 对话框左上角和右上角半径
      dialogRadius: 30.0,
    );
  }
}

BottomModel 类

class BottomModel {
  final String name;
  final String id;
  final bool selected;
  final Widget imageWidget;
  final int sortId;

  BottomModel({
    required this.name,
    required this.id,
    required this.selected,
    required this.imageWidget,
    required this.sortId,
  });
}