Flutter云数据库搜索插件firestore_search_input的使用

Flutter云数据库搜索插件firestore_search_input的使用

在本教程中，我们将详细介绍如何使用 firestore_search_input 插件来实现一个简单的云数据库搜索功能。该插件可以帮助你快速实现搜索功能，而无需手动编写大量的搜索逻辑。

确保在项目中使用 firestore_core

首先，确保在你的项目中添加了 firestore_core 依赖。这将帮助你与 Cloud Firestore 进行交互。

依赖 cloud_firestore 和 get

确保在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cloud_firestore: ^4.3.1
  get: ^4.6.5

功能概述

firestore_search_input 包含以下主要功能：

• 搜索AppBar - 一个可转换为 TextInputField 的 AppBar，用于接收用户的搜索查询。
• 搜索体 - 用户开始输入时显示的界面。
• Cloud Firestore 查询 - 接收用户输入并查询指定的 Cloud Firestore 集合。
• 此包是 firestore_search 的升级版。
• 感谢 Asad Hameed。

简单用法

要使用此插件，只需将其添加到你的 pubspec.yaml 文件中作为依赖项即可。

dependencies:
  firestore_search: ^版本号

实现步骤

1. 导入必要的库：

import 'package:firestore_search/firestore_search.dart';

1. 创建一个数据模型类，并包含一个方法，用于将 QuerySnapshot 转换为对象列表。

class Book {
  final String? name;
  final String? developer;
  final String? framework;
  final String? tool;

  Book({this.name, this.developer, this.framework, this.tool});

  // 将 QuerySnapshot 转换为 Book 对象列表
  List<Book> dataListFromSnapshot(QuerySnapshot querySnapshot) {
    return querySnapshot.docs.map((snapshot) {
      final Map<String, dynamic> dataMap = snapshot.data() as Map<String, dynamic>;

      return Book(
          name: dataMap['name'],
          developer: dataMap['developer'],
          framework: dataMap['framework'],
          tool: dataMap['tool']);
    }).toList();
  }
}

1. 使用 FirestoreSearchScaffold 并提供所需的参数。

Expanded(
  child: FirestoreSearchScaffold(
    textCapitalization: TextCapitalization.characters,
    backButtonColor: Colors.blue,
    firestoreCollectionName: 'books',
    searchBy: 'title',
    scaffoldBody: Center(),
    dataListFromSnapshot: Book().dataListFromSnapshot,

    builder: (context, snapshot) {
      print(snapshot.error);

      if (snapshot.hasData) {
        final List<Book>? dataList = snapshot.data;
        if (dataList!.isEmpty) {
          return const Center(
            child: Text('No Results Returned'),
          );
        }
        return ListView.builder(
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              final Book data = dataList[index];

              return InkWell(
                onTap: () {
                  print('searched id ${data.id}');
                  Navigator.pop(context, '${data.id}');
                },
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        data.name ?? '',
                        style: Theme.of(context).textTheme.headline6,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
                      child: Text(data.developer ?? '', style: Theme.of(context).textTheme.bodyText1),
                    )
                  ],
                ),
              );
            });
      }

      if (snapshot.connectionState == ConnectionState.done) {
        if (!snapshot.hasData) {
          return const Center(
            child: Text('No Results Returned'),
          );
        }
      }
      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  ),
),

完整示例

以下是完整的示例代码：

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

class Book {
  final String? name;
  final String? developer;
  final String? framework;
  final String? tool;

  Book({this.name, this.developer, this.framework, this.tool});

  List<Book> dataListFromSnapshot(QuerySnapshot querySnapshot) {
    return querySnapshot.docs.map((snapshot) {
      final Map<String, dynamic> dataMap = snapshot.data() as Map<String, dynamic>;

      return Book(
          name: dataMap['name'],
          developer: dataMap['developer'],
          framework: dataMap['framework'],
          tool: dataMap['tool']);
    }).toList();
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Firestore Search Example')),
        body: Expanded(
          child: FirestoreSearchScaffold(
            textCapitalization: TextCapitalization.characters,
            backButtonColor: Colors.blue,
            firestoreCollectionName: 'books',
            searchBy: 'title',
            scaffoldBody: Center(),
            dataListFromSnapshot: Book().dataListFromSnapshot,

            builder: (context, snapshot) {
              print(snapshot.error);

              if (snapshot.hasData) {
                final List<Book>? dataList = snapshot.data;
                if (dataList!.isEmpty) {
                  return const Center(
                    child: Text('No Results Returned'),
                  );
                }
                return ListView.builder(
                    itemCount: dataList.length,
                    itemBuilder: (context, index) {
                      final Book data = dataList[index];

                      return InkWell(
                        onTap: () {
                          print('searched id ${data.id}');
                          Navigator.pop(context, '${data.id}');
                        },
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                data.name ?? '',
                                style: Theme.of(context).textTheme.headline6,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
                              child: Text(data.developer ?? '', style: Theme.of(context).textTheme.bodyText1),
                            )
                          ],
                        ),
                      );
                    });
              }

              if (snapshot.connectionState == ConnectionState.done) {
                if (!snapshot.hasData) {
                  return const Center(
                    child: Text('No Results Returned'),
                  );
                }
              }
              return const Center(
                child: CircularProgressIndicator(),
              );
            },
          ),
        ),
      ),
    );
  }
}