Flutter下拉搜索选择插件flutter_dropdown_search的使用

flutter_dropdown_search 是一个强大的 Flutter 插件，它允许用户从下拉列表中搜索并选择项目。此外，该插件还支持获取不在下拉列表中的输入。

Getting Started

Platforms

此小部件已在 iOS、Android 和 Chrome 上成功测试。

Screenshots

Outlook	Searching with country name

Code

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_dropdown_search 插件。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dropdown Search',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();
  final List<String> items = [
    "Afghanistan", "Albania", "Algeria", "American Samoa",
    "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda",
    "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dropdown Search'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
        child: Column(
          children: [
            FlutterDropdownSearch(
              textController: _controller,
              items: items,
              dropdownHeight: 300,
            ),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入依赖：

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

2. 创建 MyApp 类：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Dropdown Search',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: HomePage(),
       );
     }
   }
   

3. 创建 HomePage 类：

   class HomePage extends StatelessWidget {
     final TextEditingController _controller = TextEditingController();
     final List<String> items = [
       "Afghanistan", "Albania", "Algeria", "American Samoa",
       "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda",
       "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan"
     ];
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Flutter Dropdown Search'),
         ),
         body: Padding(
           padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
           child: Column(
             children: [
               FlutterDropdownSearch(
                 textController: _controller,
                 items: items,
                 dropdownHeight: 300,
               ),
             ],
           ),
         ),
       );
     }
   }
   

使用方法

1. 安装依赖： 在 pubspec.yaml 文件中添加 flutter_dropdown_search 依赖：

   dependencies:
     flutter:
       sdk: flutter
     flutter_dropdown_search: ^最新版本号
   

   然后运行 flutter pub get 命令来安装依赖。

2. 初始化控制器和数据：

   final TextEditingController _controller = TextEditingController();
   final List<String> items = ["Afghanistan", "Albania", "Algeria", ...];
   

3. 创建 FlutterDropdownSearch 小部件：

   FlutterDropdownSearch(
     textController: _controller,
     items: items,
     dropdownHeight: 300,
   )
   

通过以上步骤，你就可以在 Flutter 应用中使用 flutter_dropdown_search 插件了。希望这个示例对你有所帮助！