Flutter文本搜索插件searchable_text_field的使用

本文将介绍如何在Flutter项目中使用searchable_text_field插件来实现动态数据的搜索和选择功能。此插件非常适合需要从列表中动态筛选和选择项目的场景。

searchable_text_field 插件简介

searchable_text_field 是一个用于支持动态搜索和选项选择的Flutter插件。通过它可以轻松地实现用户输入触发的动态筛选功能，并且支持自定义筛选逻辑和样式。

使用步骤

以下是一个完整的示例，展示如何在Flutter应用中集成并使用 searchable_text_field 插件。

1. 添加依赖

在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  searchable_text_field: ^版本号

运行 flutter pub get 安装依赖。

2. 创建示例数据

首先，我们需要一些示例数据来演示搜索功能。这里我们创建了一个城市列表：

// 示例城市数据
List<Map<String, dynamic>> cities = [
  {"id": 1, "city": "New York"},
  {"id": 2, "city": "Los Angeles"},
  {"id": 3, "city": "Chicago"},
  {"id": 4, "city": "Houston"},
  {"id": 5, "city": "Phoenix"},
];

然后将其映射为 City 模型类：

// City 模型类
class City {
  final int id;
  final String city;

  City({required this.id, required this.city});

  factory City.fromJson(Map<String, dynamic> json) {
    return City(id: json['id'], city: json['city']);
  }
}

3. 集成 searchable_text_field

接下来，我们将 searchable_text_field 集成到应用中。以下是完整的代码示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Searchable Text Field Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Searchable Text Field'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<City> cities = [];
  List<City> searchedCities = [];
  TextEditingController controller = TextEditingController();
  City? selectedCity;
  bool loading = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    getCities();
  }

  void getCities() {
    cities = List<City>.from(citiesData.map((e) => City.fromJson(e)));
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SearchableTextField<City>(
            controller: controller,
            status: controller.text.trim().isEmpty
                ? SearchableTextFieldStatus.none
                : selectedCity != null
                    ? SearchableTextFieldStatus.itemSelected
                    : loading
                        ? SearchableTextFieldStatus.loading
                        : searchedCities.isEmpty
                            ? SearchableTextFieldStatus.noItemFound
                            : SearchableTextFieldStatus.itemFound,
            menuOption: MenuOption(),
            decoration: const InputDecoration(hintText: "Search City Here"),
            onChanged: (val) {
              if (val != null) {
                // 动态筛选数据
                selectedCity = null;
                searchedCities.clear();
                searchedCities.addAll(cities
                    .where((element) =>
                        element.city!.toLowerCase().contains(val.toLowerCase()))
                    .toList());
                setState(() {});
              }
            },
            onSelectedItem: (City city) {
              // 用户选择城市
              selectedCity = city;
              setState(() {});
            },
            validator: (val) {
              if (val == null || val.isEmpty) {
                return "Required Field!!";
              } else if (selectedCity == null) {
                return "Please Select City";
              } else {
                return null;
              }
            },
            items: searchedCities.map((e) => SearchableItem<City>(
                  value: e,
                  title: e.city!,
                  style: const TextStyle(color: Colors.blue),
                )).toList(),
          ),
        ),
      ),
    );
  }
}