Flutter智能建议输入插件suggestion_input_field的使用

Flutter智能建议输入插件suggestion_input_field的使用

SuggestionTextField

SuggestionTextField 是一个Flutter插件，它提供了一个带有自动建议功能的文本输入框。这个插件在用户需要从预定义列表中选择输入数据的场景下非常有用。

安装

要使用 SuggestionTextField，请在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:  
  suggestion_text_field: ^1.0.5

使用方法

导入插件并在您的Flutter应用中使用 SuggestionTextField 小部件。以下是一个完整的示例代码：

import 'dart:async';
import 'dart:math';

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

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

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

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

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> {
  Customer? selectedCustomer;

  // 模拟从异步任务或非异步任务中获取客户数据
  FutureOr<List<Customer>> fetchCustomerData(String filterText) async {
    final List<Customer> customers = List.generate(20, (index) {
      final random = Random();
      final id = 'C${random.nextInt(10000)}';
      final name = 'Customer ${index + 1}';
      final mobile = '555-555-${random.nextInt(10000)}';
      return Customer(id: id, name: name, mobile: mobile);
    });

    // 返回过滤后的数据
    return customers
        .where((element) =>
            element.name.toLowerCase().contains(filterText.toLowerCase()))
        .toList();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          width: 300,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextButton(
                onPressed: () => setState(() {
                  selectedCustomer = null;
                }),
                child: const Text('清除客户'),
              ),
              TextButton(
                onPressed: () => setState(() {
                  selectedCustomer = Customer(
                      id: "100",
                      name: "外部客户",
                      mobile: "555-555-5555");
                }),
                child: const Text('设置外部客户'),
              ),
              const SizedBox(height: 100),
              SuggestionTextField<Customer>(
                value: selectedCustomer,
                suggestionFetch: (textEditingValue) =>
                    fetchCustomerData(textEditingValue.text),
                textFieldContent: TextFieldContent(
                  decoration: const InputDecoration(
                    labelText: '选择客户',
                  ),
                ),
                displayStringForOption: (option) => option.name,
                onSelected: (option) {
                  setState(() {
                    selectedCustomer = option;
                  });
                },
                onClose: () {
                  setState(() {
                    selectedCustomer = null;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Customer {
  final String id;
  final String name;
  final String mobile;

  Customer({required this.id, required this.name, required this.mobile});
}