Блог

У меня есть коллекция «все», в которой у меня есть документы, в каждом документе у меня есть 2 поля id и имя, я хочу, чтобы, когда пользователь вводит идентификатор или имя, в нем должны отображаться предложения. Я хочу реализовать этот поиск в firestore в этом пакете material_floating_search_bar > Я пытался, но не смог понять, как объединить эти 2.

плавающий штрих-код поиска: //получен из примера пакета, как реализовать firestore в этом:

 Widget buildFloatingSearchBar() {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return FloatingSearchBar(
    hint: 'Search...',
    scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
    transitionDuration: const Duration(milliseconds: 800),
    transitionCurve: Curves.easeInOut,
    physics: const BouncingScrollPhysics(),
    axisAlignment: isPortrait ? 0.0 : -1.0,
    openAxisAlignment: 0.0,
    width: isPortrait ? 600 : 500,
    debounceDelay: const Duration(milliseconds: 500),
    onQueryChanged: (query) {
      // Call your model, bloc, controller here.
    },
    transition: CircularFloatingSearchBarTransition(),
    actions: [
      FloatingSearchBarAction(
        showIfOpened: false,
        child: CircularButton(
          icon: const Icon(Icons.place),
          onPressed: () {},
        ),
      ),
      FloatingSearchBarAction.searchToClear(
        showIfClosed: false,
      ),
    ],
    builder: (context, transition) {
      return ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Material(
          color: Colors.white,
          elevation: 4.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: Colors.accents.map((color) {
              return Container(height: 112, color: color);
            }).toList(),
          ),
        ),
      );
    },
  );
}
 

 Not sure if this is the best way to implement this functionality

1. Get reference of your collection (getColl is variable name and 'All' your collection name).

    final CollectionReference getColl = FirebaseFirestore.instance.collection('All');

2. Get QuerySnapshot of your collection in a List ( _getDataFromSnapshot, GetData , dbData names can be changed)

      List<GetData> _getDataFromSnapshot(QuerySnapshot snapshot) {
        return snapshot.docs.map((doc) {
          return GetData(
            id: doc.get('id') ?? '',
            name: doc.get('name') ?? '', 
          );
        }).toList();
      }
    
      Stream<List<GetData>> get dbData {
        return getColl.snapshots().map(_getDataFromSnapshot);
      }

class GetData { final String id,name; GetData({this.id, this.name}) }

3. Do this where you want your search bar
Widget build (BuildContext context { 
  var datalist = Provider.of<List<GetData>>(context); 

      // Filter condition.
    datalist = datalist.where((_search) {
      return _search.id.toLowerCase().contains(key) ||
          _search.name.toString().toLowerCase().contains(key);
    }).toList();

Then implement your search bar and set onChanged
onChanged: (value) {
                  // Update the key when the value changes.
                  setState(() => key = value.toLowerCase());
                },
}