Flutter多选底部表单插件multi_select_bottom_sheetsx的使用

Flutter多选底部表单插件multi_select_bottom_sheetsx的使用

获取开始

这个项目是一个新的Flutter插件项目，它包括针对Android和/或iOS的平台特定实现代码。

对于Flutter开发的帮助，查看官方文档，其中包括教程、示例、移动开发指南以及完整的API引用。

图片预览

完整示例

以下是multi_select_bottom_sheetsx插件的使用示例。该插件允许用户从底部弹出的表单中选择多个选项。

// ignore_for_file: unused_field
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final TextEditingController pickItemController;
  List<dynamic> initialList = [];
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  void initState() {
    super.initState();
    print(initialList);
    pickItemController = TextEditingController();
    setState(() {
      initialList = [
        'item 1',
        'item 2',
        'item 3',
        'item 4',
        'item 5',
        'item 6'
      ];
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var size = MediaQuery.sizeOf(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
          height: size.height,
          width: size.width,
          padding: const EdgeInsets.all(5),
          color: const Color.fromARGB(255, 241, 224, 218),
          child: Column(
            children: [
              // 使用MultiSelectBottomSheet进行多选操作
              Form(
                key: _formKey,
                child: MultiSelectBottomSheet(
                  size: size,
                  title: "选择名称",
                  width: size.width,
                  enterList: initialList.toList(), // 初始列表
                  radiusContainerValue: 15, // 圆角半径
                  surfaceContainerColor: Colors.white, // 表单背景色
                  surfaceBottomColor: const Color.fromARGB(255, 241, 224, 218), // 底部背景色
                  backgroundColorItem: const Color(0x13936D47), // 项背景色
                  borderColordItem: Colors.brown, // 项边框颜色
                  primaryBrownColor: const Color.fromARGB(151, 121, 85, 72), // 主要棕色颜色
                  selectedItemColor: Colors.brown, // 选中项颜色
                  unSelectedItemStyle: const TextStyle(color: Color.fromARGB(184, 132, 107, 98)), // 未选中项样式
                  selectedItemStyle: const TextStyle(color: Colors.brown), // 选中项样式
                  titleTextStyle: const TextStyle(color: Colors.black), // 标题文本样式
                  icon: const Icon(Icons.close), // 关闭图标
                  textEditingController: pickItemController, // 文本控制器
                  iconShowBottonSheet: const Icon(Icons.search), // 显示底部表单的图标
                  errorText: "请选择一个元素", // 错误提示文本
                  isRequired: true, // 是否必填
                  erroTextStyle: const TextStyle(color: Colors.red), // 错误文本样式
                ),
              ),
              // 提交按钮
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    print(pickItemController.text); // 输出选中的值
                  }
                },
                child: const Text("提交"), // 提交按钮文本
              )
            ],
          ),
        ),
      ),
    );
  }
}