Flutter下拉选择输入插件dropdown_input的使用

安装

在pubspec.yaml文件中添加dropdown_input作为依赖项（什么是依赖项？）。

dropdown_input: ^0.0.1

导入Dropdown Input：

import 'package:dropdown_input/dropdown_input.dart';

基本用法

给定一个List<Map<String, dynamic>>类型的optionsList和一个String类型的filterField作为参数：

List<Map<String, dynamic>> optionsList = [
  {
    "name": "灰色",
    "id": "1"
  },
  {
    "name": "绿色",
    "id": "2"
  },
  {
    "name": "红色",
    "id": "3"
  },
  {
    "name": "橙色",
    "id": "4"
  }
];

在build方法中使用DropdownInput：

[@override](/user/override)
Widget build(BuildContext context) {
  return DropdownInput(
    optionsList: optionsList,
    filterField: "name",
    onItemSelected: (item) {
      print(item); // 打印选中的选项
    },
  );
}

代码解释：

1. optionsList 是一个包含多个选项的列表，每个选项是一个映射（Map），其中键值对包括选项的名称和唯一标识符。
2. filterField 指定了用于过滤和显示的字段，这里设置为 "name"，即选项的名称。
3. onItemSelected 是一个回调函数，当用户选择一个选项时会触发，并将选中的选项作为参数传递。

结果

以下是运行效果的截图：

完整示例代码

以下是一个完整的示例代码，展示如何使用dropdown_input插件：

// 导入必要的包
import 'package:dropdown_input/dropdown_input.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dropdown Input 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Dropdown Input 示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义选项列表
  List<Map<String, dynamic>> optionsList = [
    {
      "name": "灰色",
      "id": "1"
    },
    {
      "name": "绿色",
      "id": "2"
    },
    {
      "name": "红色",
      "id": "3"
    },
    {
      "name": "橙色",
      "id": "4"
    }
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 DropdownInput 插件
            DropdownInput(
              optionsList: optionsList,
              filterField: "name", // 指定显示的字段
              onItemSelected: (item) {
                print("选中的选项: $item"); // 打印选中的选项
              },
            ),
          ],
        ),
      ),
    );
  }
}