Flutter云数据库集成插件firestore

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

安装

设置Firestore项目

请遵循官方文档以将Firestore添加到您的项目中：

flutter pub add firebase_core
flutter pub add cloud_firestore

添加依赖

在dev_dependencies中添加firestore_builder包。您可以运行以下命令来实现这一点：

flutter pub add dev:firestore_builder

配置

生成基于一个YAML配置文件（firestore_builder_config.yaml），该文件描述了您希望的数据库结构。

使用devtools扩展

配置生成的最简单方法是使用devtools扩展应用程序：

在调试模式下启动您的应用。
打开devtool。
选择firestore_builder标签并启用扩展。
使用扩展程序构建配置文件。
直接从扩展程序保存配置文件，这将在您的项目根目录中创建firestore_builder_config.yaml。

手动创建配置文件

如果您掌握了配置语法，可以在项目的根目录手动创建firestore_builder_config.yaml文件。这里是一个简单的配置文件示例，仅包含一个集合（users）：

firestore_builder:
  output: lib/firestore
  use_riverpod: true
  collections:
    - collection:
        collection_name: users
        model_name: user
        fields:
          - name: String
          - age: int

添加外部依赖

生成的代码基于外部包。感谢@remi_rousselet。

Freezed 包用于使模型类不可变且可等价。
（可选）Riverpod 包。我个人最喜欢的管理状态的包。

您需要添加这些依赖项：

Freezed

flutter pub add freezed_annotation
flutter pub add dev:build_runner
flutter pub add dev:freezed
flutter pub add json_annotation
flutter pub add dev:json_serializable

Riverpod（可选）

flutter pub add flutter_riverpod

生成Freezed类

每次生成新代码时，请勿忘记运行build_runner命令行：

dart run build_runner build --delete-conflicting-outputs

生成结果

通过简单的配置文件，以下是生成的结果：

lib
-- firestore
    -- models
        -- updated_value.dart
        -- user.dart
        -- user.freezed.dart
        -- user.g.dart
    -- services
        -- firestore_query_service.dart
        -- firestore_reference_service.dart
        -- firestore_stream_service.dart
    -- states
        -- user_states.dart

updated_value.dart 是一个帮助类，允许更新文档的一些属性。
user.dart 是用户集合的模型类。
firestore_query_service.dart 是用于API调用（获取、添加、删除、更新等）的服务。
firestore_reference_service.dart 是用于轻松访问Firestore引用（文档或集合）的服务。
firestore_stream_service.dart 是用于通过流消费Firestore数据的服务。
user_states.dart 是定义Riverpod提供者的文件。

示例代码

import 'package:example/firebase_options.dart';
import 'package:example/pages/teams_page.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const TeamsPage(),
      ),
    );
  }
}

更多关于Flutter云数据库集成插件firestore_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•9 小时前

更多关于Flutter云数据库集成插件firestore_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，firestore_builder 是一个用于简化与 Firebase Firestore 数据库交互的插件。它提供了一种声明式的方法来构建和监听 Firestore 数据集合。以下是一个使用 firestore_builder 的代码案例，展示了如何集成 Firebase Firestore 并从数据库中读取数据。

首先，确保你的 Flutter 项目已经添加了 Firebase 支持，并且已经配置了 Firebase Firestore。你可以通过 Firebase 控制台为你的项目添加 Firestore 数据库，并按照 Firebase 文档配置你的 Flutter 项目。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  firestore_builder: ^latest_version  # 请替换为最新的版本号

然后运行 flutter pub get 来安装依赖。

2. 配置 Firebase

确保你的 google-services.json 文件（对于 Android）和 GoogleService-Info.plist 文件（对于 iOS）已经放置在正确的位置，并且你已经按照 Firebase 文档配置了你的项目。

3. 使用 `firestore_builder`

以下是一个简单的 Flutter 应用示例，展示了如何使用 firestore_builder 从 Firestore 数据库中读取数据并在 UI 中显示：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Builder Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Firestore firestore = Firestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firestore Builder Demo'),
      ),
      body: FirestoreBuilder<QuerySnapshot>(
        stream: firestore.collection('your_collection_name').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
          }

          final documents = snapshot.data.docs;
          return ListView.builder(
            itemCount: documents.length,
            itemBuilder: (context, index) {
              final document = documents[index];
              return ListTile(
                title: Text(document.data()['name'] ?? 'Unknown'),
                subtitle: Text(document.data()['description'] ?? 'No description'),
              );
            },
          );
        },
      ),
    );
  }
}

解释

依赖配置：在 pubspec.yaml 中添加了 firestore_builder 依赖。
Firestore 配置：确保 Firebase 配置正确，包括 google-services.json 和 GoogleService-Info.plist 文件。
UI 构建：
- 使用 FirestoreBuilder 组件来监听 Firestore 数据集合的变更。
- stream 属性设置为 Firestore 数据集合的快照流（snapshots()）。
- builder 属性定义了如何从快照数据构建 UI。在这个例子中，我们构建了一个简单的列表视图，显示每个文档的 name 和 description 字段。

注意事项

确保你的 Firestore 规则允许你的应用读取数据。
替换 'your_collection_name' 为你实际的 Firestore 集合名称。
根据你的数据模型调整 UI 组件的显示内容。

这个示例展示了如何使用 firestore_builder 插件在 Flutter 应用中集成和显示 Firestore 数据。你可以根据需要进一步扩展和自定义这个示例。

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