Flutter云数据库集成插件ha_firestore_scaffold的使用

Firestore Scaffold

就像材料库中的Scaffold一样，Firestore Scaffold专门用于Firestore，它可以显示基于屏幕尺寸的实时分页列表视图或网格视图。你还可以根据查询添加搜索功能。

特性

• 📱 Firestore Scaffold
• 🔎 基于查询的搜索
• 📈 Firestore 实时分页
• 𝍌 列表视图样式
• ⌗ 分组列表视图
• 🌊 水流网格视图样式

开始使用

添加依赖

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

dependencies:
  ha_firestore_scaffold: # 最新版本

然后运行flutter pub get来获取最新的依赖。

使用方法

使用HAFirestoreScaffold作为普通的Scaffold来从Firestore查询中获取实时分页结果。

HAFirestoreScaffold(
  title: widget.title,
  query: FirebaseFirestore.instance
      .collection("users")
      .orderBy("addedDate", descending: true),
  limit: (deviceType) {
    return 50;
  },
  itembuilder: (context, snapshot) {
    Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
    return ListTile(
      title: Text(data['name'] ?? "no name"),
    );
  },
  emptyWidget: const Center(
    child: Text("no data found"),
  ),
)

搜索功能

你也可以在Scaffold中添加搜索功能，通过使用HAFirestoreSearch作为searchDelegate，其中searchField将是一个包含字符串数组的文档字段。

HAFirestoreSearch(
  firestoreQuery: FirebaseFirestore.instance
      .collection("users")
      .orderBy("addedDate", descending: true),
  searchField: 'keywords',
  builder: (context, snapshot) {
    Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
    return ListTile(
      title: Text(data['name'] ?? "no name"),
    );
  },
  emptyWidget: const Center(
    child: Text("no search data found"),
  ),
)

分组（粘性头部）

你可以在HAFirestoreScaffold构造函数中传递groupBy字段和header小部件来对列表进行分组。

HAFirestoreScaffold(
  ...
  groupBy: "addedDate",
  header: (groupFieldValue) {
    return Container(
      color: Colors.white,
      child: Text("$groupFieldValue"),
    );
  },
  ...
)

完整示例

以下是完整的示例代码，它展示了如何在Flutter应用中使用ha_firestore_scaffold插件。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:ha_firestore_scaffold/ha_firestore_scaffold.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HAFirestore Scaffold',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'HAFirestore Scaffold'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return HAFirestoreScaffold(
      title: widget.title,
      query: FirebaseFirestore.instance
          .collection("users")
          .orderBy("addedDate", descending: true),
      limit: (deviceType) {
        return 50;
      },
      groupBy: "addedDate",
      header: (groupFieldValue) {
        return Container(
          color: Colors.white,
          child: Text("$groupFieldValue"),
        );
      },
      itembuilder: (context, snapshot) {
        Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
        return ListTile(
          title: Text(data['name'] ?? "no name"),
        );
      },
      emptyWidget: const Center(
        child: Text("no data found"),
      ),
      searchDelegate: HAFirestoreSearch(
        firestoreQuery: FirebaseFirestore.instance
            .collection("users")
            .orderBy("addedDate", descending: true),
        searchField: 'keywords',
        builder: (context, snapshot) {
          Map<String, dynamic> data = snapshot.data() as Map<String, dynamic>;
          return ListTile(
            title: Text(data['name'] ?? "no name"),
          );
        },
        emptyWidget: const Center(
          child: Text("no search data found"),
        ),
      ),
    );
  }
}