Flutter下拉选择插件dropdown_plus_plus的使用

Flutter下拉选择插件dropdown_plus_plus的使用

dropdown_plus_plus 是一个简单且易于使用的表单下拉组件，支持搜索、键盘导航、离线数据源、远程数据源以及自定义。

它是一个维护良好的 dropdown_plus 的分支版本，具有更多自定义选项。

开始使用

简单文本下拉选择

TextDropdownFormField(
  options: ["Male", "Female"],
  decoration: InputDecoration(
      border: OutlineInputBorder(),
      suffixIcon: Icon(Icons.arrow_drop_down),
      labelText: "Gender"),
  cursorColor: Colors.green,
  dropdownItemColor: Colors.red,
),

安装

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

dropdown_plus_plus: <latest_version>

可定制的例子

final List<Map<String, dynamic>> _roles = [
  {"name": "Super Admin", "desc": "Having full access rights", "role": 1},
  {
    "name": "Admin",
    "desc": "Having full access rights of a Organization",
    "role": 2
  },
  {
    "name": "Manager",
    "desc": "Having Magenent access rights of a Organization",
    "role": 3
  },
  {
    "name": "Technician",
    "desc": "Having Technician Support access rights",
    "role": 4
  },
  {
    "name": "Customer Support",
    "desc": "Having Customer Support access rights",
    "role": 5
  },
  {"name": "User", "desc": "Having End User access rights", "role": 6},
];

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

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _roles = [
    {"name": "Super Admin", "desc": "Having full access rights", "role": 1},
    {
      "name": "Admin",
      "desc": "Having full access rights of a Organization",
      "role": 2
    },
    {
      "name": "Manager",
      "desc": "Having Magenent access rights of a Organization",
      "role": 3
    },
    {
      "name": "Technician",
      "desc": "Having Technician Support access rights",
      "role": 4
    },
    {
      "name": "Customer Support",
      "desc": "Having Customer Support access rights",
      "role": 5
    },
    {"name": "User", "desc": "Having End User access rights", "role": 6},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Plus Plus Demo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextDropdownFormField(
              options: ["Male", "Female"],
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  suffixIcon: Icon(Icons.arrow_drop_down),
                  labelText: "Gender"),
              cursorColor: Colors.green,
              dropdownItemColor: Colors.red,
            ),
            SizedBox(
              height: 16,
            ),
            DropdownFormField<Map<String, dynamic>>(
              onEmptyActionPressed: (String str) async {},
              dropdownItemSeparator: Divider(
                color: Colors.black,
                height: 1,
              ),
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  suffixIcon: Icon(Icons.arrow_drop_down),
                  labelText: "Access"),
              onSaved: (dynamic str) {},
              onChanged: (dynamic str) {},
              validator: null,
              displayItemFn: (dynamic item) => Text(
                (item ?? {})['name'] ?? '',
                style: TextStyle(fontSize: 16),
              ),
              findFn: (dynamic str) async => _roles,
              selectedFn: (dynamic item1, dynamic item2) {
                if (item1 != null && item2 != null) {
                  return item1['name'] == item2['name'];
                }
                return false;
              },
              filterFn: (dynamic item, str) =>
                  item['name'].toLowerCase().indexOf(str.toLowerCase()) >= 0,
              dropdownItemFn: (dynamic item, int position, bool focused,
                      bool selected, Function() onTap) =>
                  ListTile(
                title: Text(item['name']),
                subtitle: Text(
                  item['desc'] ?? '',
                ),
                tileColor:
                    focused ? Color.fromARGB(20, 0, 0, 0) : Colors.transparent,
                onTap: onTap,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

配置选项

final bool autoFocus;
final bool Function(dynamic item, String str)? filterFn;
final bool Function(dynamic item1, dynamic item2)? selectedFn;
final Future<List<dynamic>> Function(String str) findFn;

final ListTile Function(
  dynamic item,
  int position,
  bool focused,
  bool selected,
  Function() onTap,
) dropdownItemFn;

final Widget Function(dynamic item) displayItemFn;
final InputDecoration? decoration;
final Color? dropdownColor;
final Color? cursorColor;
final DropdownEditingController<T>? controller;
final void Function(dynamic item)? onChanged;
final void Function(dynamic)? onSaved;
final String? Function(T?)? validator;
final double? dropdownHeight;
final TextStyle? searchTextStyle;
final String emptyText;
final String emptyActionText;
final Future<void> Function(String)? onEmptyActionPressed;
final Widget? dropdownItemSeparator;