Flutter表单字段下拉选择插件 form_field_drop_down 的使用

form_field_drop_down 是一个高度可定制的Flutter下拉菜单插件，支持诸如搜索、API集成、自定义UI和验证等强大功能。

特性

• 显示静态项或通过API动态获取数据。
• 使用BoxDecoration和自定义项构建器完全自定义下拉外观。
• 支持只读和可搜索下拉菜单，并提供其他自定义选项。
• 与TextFormField轻松集成以实现验证和装饰。
• 增强用户界面的高级光标样式。
• 无缝集成添加按钮以实现自定义功能。
• 灵活的搜索和过滤选项，支持本地和基于API的数据。

安装

1. 在pubspec.yaml中添加最新版本的包（并运行flutter pub get）：

dependencies:
  form_filed_drop_down: latest_version

1. 导入包并在Flutter应用中使用它：

import 'package:form_filed_drop_down/form_filed_drop_down.dart';

示例用法

1. 基本的 FormFiledDropDown

import 'package:flutter/material.dart';
import 'package:from_filed_drop_down/form_filed_drop_down.dart';

final itemController = OverlayPortalController();
final itemTextController = TextEditingController();

String? selectedItem;
List<String> itemList = ["item", "item 2", "item 3", "item 4", "item 5", "item 6"];

class DropDownClass extends StatelessWidget {
  const DropDownClass({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormFiledDropDown<String>(
        controller: itemController,
        item: itemList,
        textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
        filedDecoration: const InputDecoration(),
        onChanged: (String? value) {},
        listItemBuilder: (context, item, isSelected) {
          return Text(
            item,
            style: TextStyle(
              fontSize: 12,
              color: isSelected ? Colors.white : Colors.black,
              fontWeight: FontWeight.w400,
            ),
          );
        },
      ),
    );
  }
}

2. 包含自定义添加按钮的 FormFiledDropDown

class DropDownClass extends StatelessWidget {
  const DropDownClass({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          FormFiledDropDown<String>(
            item: itemList,
            controller: itemController,
            canShowButton: true,
            addButton: InkWell(
              onTap: () {
                // 添加你的事件
              },
              child: Container(
                height: 40,
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(2),
                ),
                child: const Row(
                  children: [
                    Expanded(
                      child: Text(
                        "Add",
                        maxLines: 1,
                        textAlign: TextAlign.start,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    Icon(Icons.add, color: Colors.white)
                  ],
                ),
              ),
            ),
            textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
            menuDecoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4),
              border: Border.all(color: Colors.blueAccent),
            ),
            filedDecoration: const InputDecoration(),
            onChanged: (String? value) {},
            listItemBuilder: (context, item, isSelected) {
              return Text(
                item,
                style: TextStyle(
                  fontSize: 12,
                  color: isSelected ? Colors.white : Colors.black,
                  fontWeight: FontWeight.w400,
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

3. 自定义类型模型的下拉菜单

假设我们有一个自定义类型的对象：

class ItemModel {
  final int id;
  final String name;

  ItemModel({required this.id, required this.name});

  factory ItemModel.fromJson(Map<String, dynamic> json) => ItemModel(
        id: json["id"],
        name: json["name"],
      );

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is ItemModel &&
          runtimeType == other.runtimeType &&
          id == other.id;

  @override
  int get hashCode => id.hashCode;

  Map<String, dynamic> toJson() => {"id": id, "name": name};
}

4. 动态搜索或API集成的 FormFiledDropDown

这是一个从API动态获取下拉项的高级示例：

class DropDownClass extends StatelessWidget {
  const DropDownClass({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          FormFiledDropDown<String>(
            controller: itemController,
            initialItem: selectedItem,
            item: itemList,
            onTap: () async {
              // 示例API，或者返回你的API列表
              return itemList;
            },
            textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
            filedDecoration: const InputDecoration(),
            onChanged: (String? value) {},
            onSearch: (value) async {
              // 我们可以调用API进行搜索，也可以在静态列表中实现本地搜索
              return itemList.where((element) {
                return element.toLowerCase().contains(value.toLowerCase());
              }).toList();
            },
            listItemBuilder: (context, item, isSelected) {
              return Text(
                item,
                style: TextStyle(
                  fontSize: 12,
                  color: isSelected ? Colors.white : Colors.black,
                  fontWeight: FontWeight.w400,
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

属性

以上是关于form_field_drop_down插件的基本介绍及其使用示例。你可以根据自己的需求调整属性来满足特定的功能需求。