如何在flutter中将数据从firestore传递给Typeahead

Posted 2023-02-23

【中文标题】如何在flutter中将数据从firestore传递给Typeahead

【英文标题】：How to pass data to the Typeahead from firestore in flutter

【发布时间】：2020-08-16 15:44:34

【问题描述】：

我是flutter的初学者，在flutter项目中我使用了flutter_typeahead包，但我无法执行这段代码。 我想根据用户提供的输入搜索我的项目。我用 Typoahead 编写了以下代码 任何人告诉我我的代码有什么问题

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

class Serchitemsbymod extends StatefulWidget 
  static String id='serchitemsbymod';
  @override
  _SerchitemsbymodState createState() => _SerchitemsbymodState();


class _SerchitemsbymodState extends State<Serchitemsbymod> 



  List<String> store=[];
  var q=[];
  var t=[];


  SearchService _searchService=SearchService();
  List<DocumentSnapshot>  search=<DocumentSnapshot>[];

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Mian Traders'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
              autofocus: true,
              style: DefaultTextStyle.of(context).style.copyWith(
                  fontStyle: FontStyle.italic
              ),
              decoration: InputDecoration(
                  border: OutlineInputBorder()
              )
          ),
          suggestionsCallback: (pattern) async 
            return await _getsearch().getSuggestion(pattern);
          ,
          itemBuilder: (context, suggestion) 
            return ListTile(
              leading: Icon(Icons.shopping_cart),
              title: Column(
                children: <Widget>[
                  Text(suggestion['A']),
                  Text(suggestion['B']),
                ],
              ),
              subtitle: Text('$suggestion['C']'),

            );
          ,
          onSuggestionSelected: (suggestion) 
//                Navigator.of(context).push(MaterialPageRoute(
//                    builder: (context) => ProductPage(product: suggestion)
//                ));
          ,
        ),
      ),
    );

  
  _getsearch()async
    List<DocumentSnapshot> data=await _searchService.getSearch();
    setState(() 
      search=data;
    );
  

我的 SearchService 类代码是这样的

import 'package:cloud_firestore/cloud_firestore.dart';

class SearchService 
  Firestore _firestore = Firestore.instance;
  String ref='items';
  Future<List<DocumentSnapshot>> getSearch() =>
    _firestore.collection(ref)
    .getDocuments()
    .then((snaps)
      return snaps.documents;
  );

  Future<List<DocumentSnapshot>> getSuggestion(String suggestion) =>
    _firestore.collection(ref)
    .where('items', isEqualTo: suggestion)
    .getDocuments()
    .then((snap) 
      return snap.documents;
  );

My firestore data is

当我开始搜索时

I got the following error

【参考方案1】：

您正在调用_getsearch()，但这不会返回任何内容。 我认为您只需要在您已实例化的SearchService 上调用getSuggestion(pattern)：

suggestionsCallback: (pattern) async 
  return await _searchService.getSuggestion(pattern);
,

很有可能您需要在getSuggestion() 函数或itemBuilder 中进行一些映射，以便从DocumentSnapshot 转到可以调用['A'] 或['B'] 的对象。

【讨论】：

请解释我必须在哪里添加映射以及如何使用请解释我是新手

请回复我。

【参考方案2】：

在我的情况下，我得到了以下解决方案

我的 SearchServices 类是

import 'package:cloud_firestore/cloud_firestore.dart';

class SearchService 
  Firestore _firestore = Firestore.instance;
  String ref = 'items';
  Future<List<DocumentSnapshot>> getSearch() async =>
      await _firestore.collection(ref).getDocuments().then((snaps) 
        return snaps.documents;
      );
  Future<List<DocumentSnapshot>> getuserSearch() async =>
      await _firestore.collection('users').getDocuments().then((snaps) 
        return snaps.documents;
      );

  Future<List<DocumentSnapshot>> getSuggestion(String suggestion) async =>
      await _firestore
          .collection(ref)
          .where('items', isEqualTo: suggestion)
          .getDocuments()
          .then((snap) 
        return snap.documents;
      );

我的 Typohead 类是

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:fmiantrader/SearchService.dart';
import 'SearchService.dart';

class Serchitemsbymod extends StatefulWidget 
  static String id = 'serchitemsbymod';
  @override
  _SerchitemsbymodState createState() => _SerchitemsbymodState();


class _SerchitemsbymodState extends State<Serchitemsbymod> 
  SearchService _searchService = SearchService();
  List<Map> search = <Map>[];

  @override
  void initState() 
    getDocs();
    super.initState();
  

  Future getDocs() async 
    search =
        (await _searchService.getSearch()).map((item) => item.data).toList();
    setState(() );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Mian Traders'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child:TypeAheadField(
          textFieldConfiguration: TextFieldConfiguration(
              autofocus: false,
              textAlign: TextAlign.center,
              style:
              TextStyle(
                  color: Colors.black,
                  fontSize: 15.0
              ),
              decoration: InputDecoration(border: OutlineInputBorder(
                borderSide: BorderSide(color:Colors.blueAccent,width: 1.0),
                borderRadius: BorderRadius.circular(32.0),
              ),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blueAccent),
                    borderRadius: BorderRadius.circular(32.0)
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.blueAccent,width: 2.0),
                  borderRadius: BorderRadius.circular(32.0),
                ),
                hintText: ('Enter the Name of item'),
                hintStyle: TextStyle(
                  fontSize: 15.0,
                ),
              )),
          suggestionsCallback: (pattern) 
            return search.where(
                  (doc) => jsonEncode(doc)
                  .toLowerCase()
                  .contains(pattern.toLowerCase()),
            );
          ,
          itemBuilder: (context, suggestion) 
            return Card(
              color: Colors.lightBlueAccent,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              ),
              elevation: 6.0,
              child: Center(
                child: Column(
                  children: <Widget>[
                    Text(suggestion['A'],
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 15.0,
                      ),),
                    Text(suggestion['B'],
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15.0,
                        )),
                    Text(suggestion['C'],
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 15.0,
                      ),)
                  ],
                ),

              ),
            );
          ,
          onSuggestionSelected: (suggestion) 
            final map = jsonDecode(suggestion);
          ,
        ),
      ),
    );