How to pass data to the Typeahead from firestore in flutter

Question

I'm a beginner in a flutter, in the flutter project I used flutter_typeahead package but I was not able to execute this code. I want to search my items on the base of the input given by the user. I write the following code with the Typoahead Anyone who tells me what is wrong in my code

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;
    });
  }
}

My SearchService classcode is this

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

when I start searching

I got the following error

Answer 1

You are calling _getsearch() but that doesn't return anything. I think you just need to call getSuggestion(pattern) on the SearchService you've instantiated:

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

It's quite possible that you'll need some mapping in either that getSuggestion() function, or in the itemBuilder to go from a DocumentSnapshot to an object where you can call ['A'] or ['B'] on.

Answer 2

I get the following solution in my case

My SearchServices class is

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;
      });
}

and my Typohead class is

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);
          },
        ),
      ),
    );
  }
}