Flutter下拉选择插件dropdownfield2的使用

Flutter下拉选择插件dropdownfield2的使用

介绍

dropdownfield2 是一个自定义的 Flutter 小部件，用于创建可自定义的下拉字段，并提供自动完成功能。该小部件旨在与 Flutter 表单一起使用，适用于需要用户从预定义列表中选择值的场景。

安装

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

dependencies:
  dropdownfield: 1.0.0

示例用法

以下是一个完整的示例代码，展示了如何在 Flutter 项目中使用 dropdownfield2 插件。该示例包含一个简单的表单，其中有两个下拉字段：城市和国家。

完整示例代码

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

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

class ExampleForm extends StatefulWidget {
  [@override](/user/override)
  _ExampleFormState createState() => _ExampleFormState();
}

class _ExampleFormState extends State<ExampleForm> {
  // 创建一个全局键，用于唯一标识 Form 小部件并允许验证表单
  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 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,
          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; // 更新表单数据
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}