flutter - 实施建议并选择它作为firestore？

Question

我想在字段中添加建议/自动完成列表以显示 Firestore 数据并从建议列表中选择以完成该字段，

我尝试使用几个包来实现类似flutter_typeahead，但它适用于本地列表（商品1 ）但它不适用于firestore数据（商品2 ）......有什么帮助吗？

我的代码

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _selectedCommodity1;
  var _selectedCommodity2;
  TextEditingController commodityFiled1 = TextEditingController();
  TextEditingController commodityFiled2 = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text("QFS"),
            ),
            body: Form(
                child: Container(
                    padding: const EdgeInsets.only(
                        top: 5, bottom: 10, right: 20, left: 20),
                    child: Column(children: [
                      TypeAheadFormField(
                        textFieldConfiguration: TextFieldConfiguration(
                            controller: commodityFiled1,
                            decoration: const InputDecoration(
                                labelText: 'Commodity1',
                                icon: Icon(
                                  Icons.receipt_rounded,
                                  color: Colors.black87,
                                ))),
                        suggestionsCallback: (pattern) {
                          return CommodityService.getSuggestions(pattern);
                        },
                        itemBuilder: (context, String suggestion) {
                          return ListTile(
                            title: Text(suggestion),
                          );
                        },
                        transitionBuilder:
                            (context, suggestionsBox, controller) {
                          return suggestionsBox;
                        },
                        onSuggestionSelected: (String suggestion) {
                          commodityFiled1.text = suggestion;
                        },
                        onSaved: (value) => _selectedCommodity1 = value!,
                      ),
                      TypeAheadFormField(
                        textFieldConfiguration: TextFieldConfiguration(
                            controller: commodityFiled2,
                            decoration: const InputDecoration(
                                labelText: 'Commodity2',
                                icon: Icon(
                                  Icons.receipt_rounded,
                                  color: Colors.black87,
                                ))),
                        suggestionsCallback: (pattern) {
                          return getSuggestion(pattern);
                        },
                        itemBuilder: (context, suggestion) {
                          return ListTile(
                            title: Text(suggestion.toString()),
                          );
                        },
                        transitionBuilder:
                            (context, suggestionsBox, controller) {
                          return suggestionsBox;
                        },
                        onSuggestionSelected: (suggestion) {
                          commodityFiled2.text = suggestion.toString();
                        },
                        onSaved: (value) => _selectedCommodity2 = value!,
                      ),
                    ])))));
  }

  static getSuggestion(String suggestion) async =>
      await FirebaseFirestore.instance
          .collection("QFS")
          .where('commodity', isEqualTo: suggestion)
          .get()
          .then((snap) {
        return snap.docs;
      });
}

class CommodityService {
  static final List<String> commodity = [
    'Banana',
    'Mango',
    'Orange',
  ];

  static List<String> getSuggestions(String query) {
    List<String> matches = [];
    matches.addAll(commodity);
    matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase()));
    return matches;
  }
}

我的 firstore 收藏图片：https ://nimb.ws/1tKDQb

标签： flutterdart

Answer 1

您可以使用关键字查询 Firestore。因此，基本上无论何时从用户那里获得搜索关键字（在按键或使用 debounce 时），您都可以过滤 Firestore 文档并显示相关建议以及您作为响应返回的列表。

要了解有关通过 where checkout 使用 Firestore 查询的更多信息：https ://firebase.flutter.dev/docs/firestore/usage/#filtering