Flutter高级搜索下拉插件fancy_search_dropdown的使用

Flutter高级搜索下拉插件fancy_search_dropdown的使用

Fancy Search Dropdown

fancy_search_dropdown 包是一个可定制的 Flutter 小部件，提供了一种优雅且高效的方式来显示带有搜索功能的下拉菜单。此小部件旨在通过在用户输入时提供动态建议来增强用户体验，从而使其轻松搜索并从预定义列表中选择选项。

特性

• 可定制建议：提供要在下拉菜单中显示的一系列建议。
• 可配置样式：使用 FancySearchDropdownConfig 自定义下拉菜单的外观。
• 调试模式：可以选择启用或禁用调试模式。

安装

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

dependencies:
  fancy_search_dropdown: ^0.0.1

运行 flutter pub get 来安装包。

使用

要使用 FancySearchDropdown，请遵循以下步骤：

1. 导入包

import 'package:fancy_search_dropdown/fancy_search_dropdown.dart';

1. 示例用法

这是一个在 Flutter 应用程序中使用 FancySearchDropdown 的基本示例：

import 'dart:developer';
import 'package:fancy_search_dropdown/fancy_search_dropdown.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fancy Search Dropdown"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FancySearchDropdown(
          labelText: "Select Hospital Name",
          suggestions: const [
            "Family Doctor",
            "Preferred Doctor",
            "Preferred Hospital",
            "Care Taker",
            "Pharmacy",
            "Lab",
          ],
          selectedValue: "Lab",
          maxSuggestionHeight: 300,
          debugMode: false,
          // Uncomment and customize the configuration as needed:
          // config: FancySearchDropdownConfig(
          //   optionBoxElevation: 3,
          //   inActiveSuffix: Icon(Icons.password),
          //   activeSuffix: Icon(Icons.email),
          //   borderRadius: 8,
          //   optionTextStyle: TextStyle(color: Colors.red),
          //   labelTextStyle: TextStyle(color: Colors.black),
          //   activeLeading: Icon(Icons.person),
          //   tileBuilder:(context,index,suggestion)=>ListTile(leading:Text(suggestion)),
          //   inputDecoration: InputDecoration(
          //     focusedBorder: OutlineInputBorder(),
          //     border: OutlineInputBorder(),
          //     enabledBorder: OutlineInputBorder(),
          //   ),
          // ),
          onSelected: (value) {
            log("Selected value: $value");
          },
        ),
      ),
    );
  }
}

参数

• suggestions: 要在下拉菜单中显示的一系列建议。
• onSelected: 当选择建议时触发的回调函数。
• labelText: 要显示在 TextField 中的标签文本。
• selectedValue: 初始选中的值。
• maxSuggestionHeight: 建议列表的最大高度。
• config: 用于样式化下拉菜单的配置选项。
• debugMode: 布尔值以启用或禁用调试模式。生产环境中设置为 false。

配置

FancySearchDropdownConfig 允许你自定义下拉菜单的外观。例如：

FancySearchDropdownConfig(
  inputDecoration: InputDecoration(
    border: OutlineInputBorder(),
    suffixIcon: Icon(Icons.arrow_drop_down),
  ),
  labelTextStyle: TextStyle(color: Colors.blue),
  activeSuffix: Icon(Icons.arrow_drop_up),
  inActiveSuffix: Icon(Icons.arrow_drop_down),
  activeLeading: Icon(Icons.search),
  inActiveLeading: Icon(Icons.search_off),
)