Flutter下拉选择插件dropdownfield的使用

dropdownfield

自定义的Flutter小部件，用于创建可自定义的带自动完成功能的下拉字段。此小部件旨在用于Flutter表单中。

对于一个完全运行的Flutter项目以演示dropdownfield的用法，请从以下链接下载代码：
https://github.com/jagan999/dropdownfieldexample

安装

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

dependencies:
  dropdownfield: 1.0.0

示例用法

以下是一个简单的示例，展示如何使用DropDownField：

import 'package:dropdownfield/dropdownfield.dart';

DropDownField(
    value: accountname, // 当前选中的值
    required: true, // 是否必填
    strict: true, // 是否严格匹配列表中的值
    labelText: 'Account Name *', // 标签文本
    icon: Icon(Icons.account_balance), // 图标
    items: accountNames, // 下拉选项列表
    setter: (dynamic newValue) { // 值改变时的回调函数
        accountname = newValue;
    }
),

特性

• 可用于表单字段的下拉建议展示。
• 提供自动完成功能——用户输入时会显示与输入文本部分匹配的所有建议。
• 默认情况下会对用户输入的值进行验证以确保其存在于建议列表中；可以通过设置strict=false来关闭此功能。
• 提供强制检查必填值的功能。
• 具有快速清除图标，可清除已输入的值。
• 外观可以自定义以匹配应用程序的主题。
• 点击下拉箭头时会自动关闭软键盘。

示例代码

以下是从GitHub中提取的完整示例代码，展示了如何使用dropdownfield构建一个包含下拉选择功能的表单：

import 'package:dropdownfield/dropdownfield.dart';
import 'package:flutter/material.dart';
import 'dart:async';

void main() async {
  runApp(MaterialApp(title: 'MyApp', home: ExampleForm()));
}

class ExampleForm extends StatefulWidget {
  ExampleForm();

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

class _ExampleFormState extends State<ExampleForm> {
  // 创建一个全局键，用于唯一标识表单并允许我们验证表单
  final _formKey = GlobalKey<FormState>();
  Map<String, dynamic> formData;

  // 定义城市和国家的选项列表
  List<String> cities = [
    'Bangalore',
    'Chennai',
    'New York',
    'Mumbai',
    'Delhi',
    'Tokyo',
  ];
  List<String> countries = [
    'INDIA',
    'USA',
    'JAPAN',
  ];

  _ExampleFormState() {
    formData = {
      'City': 'Bangalore', // 初始城市
      'Country': 'INDIA', // 初始国家
    };
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: buildFutures(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            default:
              if (snapshot.hasError) {
                return Text(snapshot.error.toString());
              } else {
                if (snapshot.data != null)
                  return Scaffold(
                      appBar: AppBar(
                        titleSpacing: 5.0,
                        title: Text(
                          'Custom Dropdown Field Example',
                          style: TextStyle(fontSize: 15.0),
                        ),
                        actions: <Widget>[
                          Builder(
                            builder: (BuildContext context) {
                              return IconButton(
                                  icon: const Icon(Icons.check),
                                  iconSize: 20.0,
                                  tooltip: 'Save',
                                  onPressed: () async {
                                    if (_formKey.currentState.validate()) {
                                      _formKey.currentState.save();
                                      showDialog<String>(
                                          context: context,
                                          builder: (BuildContext dialogContext) =>
                                              AlertDialog(
                                                content: Text(
                                                    'Data submitted is \n${formData.toString()}'),
                                              ));
                                    }
                                  });
                            },
                          )
                        ],
                      ),
                      body: Container(
                        color: Colors.white,
                        constraints: BoxConstraints.expand(),
                        child: Form(
                            key: _formKey,
                            autovalidate: false,
                            child: SingleChildScrollView(
                                child: Column(
                              children: <Widget>[
                                Divider(
                                    height: 10.0,
                                    color: Theme.of(context).primaryColor),
                                // 城市下拉字段
                                DropDownField(
                                    value: formData['City'],
                                    icon: Icon(Icons.location_city),
                                    required: true,
                                    hintText: 'Choose a city',
                                    labelText: 'City *',
                                    items: cities,
                                    strict: false,
                                    setter: (dynamic newValue) {
                                      formData['City'] = newValue;
                                    }),
                                Divider(
                                    height: 10.0,
                                    color: Theme.of(context).primaryColor),
                                // 国家下拉字段
                                DropDownField(
                                    value: formData['Country'],
                                    icon: Icon(Icons.map),
                                    required: false,
                                    hintText: 'Choose a country',
                                    labelText: 'Country',
                                    items: countries,
                                    setter: (dynamic newValue) {
                                      formData['Country'] = newValue;
                                    }),
                              ],
                            ))),
                      ));
                else
                  return LinearProgressIndicator();
              }
          }
        });
  }

  Future<bool> buildFutures() async {
    return true;
  }
}