Flutter Firebase服务集成插件flutter_firebase_services的使用

本Flutter项目展示了如何集成Firebase服务，包括Firestore的CRUD操作、Firebase认证（Auth）用于用户注册和登录，以及Firebase存储用于上传图像。

开始使用

在你的Flutter项目中添加依赖：

dependencies:
  flutter_firebase_services: ^0.0.4

导入包：

import 'package:firebase_service/firebase_service.dart';

创建实例

Db db = Db();

Firestore CRUD操作

创建文档

要向Firestore集合中添加新文档：

// 示例代码：创建文档
await db.addDocument(
  collectionName: 'users',
  data: {'name': '张三', 'age': 25},
);

读取文档

要读取集合中的所有文档：

StreamBuilder(
      stream: db.getDocumentsStream(collectionName: "users"),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }

        if (snapshot.hasError) {
          return Text('错误: ${snapshot.error}');
        }

        List<DocumentSnapshot> documents = snapshot.data?.docs ?? [];

        return ListView.builder(
          itemCount: documents.length,
          itemBuilder: (context, index) {
            Map<String, dynamic> data = 
                documents[index].data() as Map<String, dynamic>;
            return ListTile(
              title: Text(data['name']),
              subtitle: Text("${data['age']}"),
            );
          },
        );
      },
    ),

示例模型：

class User {
  final String id;
  final String name;
  final int age;
  final String imageURL;

  User({required this.id, required this.name, required this.age, required this.imageURL});

  // 必须包含id的fromMap方法
  factory User.fromMap(String id, Map<String, dynamic> map) {
    return User(
      id: id,
      name: map['name'] ?? '',
      age: map['age'] ?? 0,
      imageURL: map['imageURL'] ?? '',
    );
  }
  
}

要以模型列表的形式检索所有文档：

StreamBuilder(
        stream: db.getDocumentsAsModelsStream<User>(
          collectionName: 'users',
          fromMap: (documentId, data) => User.fromMap(documentId, data),
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }

          if (snapshot.hasError) {
            return Text('错误: ${snapshot.error}');
          }

          List<User> users = snapshot.data ?? [];

          return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              User user = users[index];

              return ListTile(
                title: Text('姓名: ${user.name}'),
                subtitle: Text('年龄: ${user.age}'),
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => UserDetailPage(docid: user.id),
                      ));
                },
              );
            },
          );
        },
      ),

读取单个文档

要以模型形式检索文档：

StreamBuilder(
        stream: db.getDocumentAsModelStream(
            collectionName: "users", documentId: docid, fromMap: User.fromMap),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }

          if (snapshot.hasError) {
            return Text('错误: ${snapshot.error}');
          }

          User? user = snapshot.data;

          if (user == null) {
            return const Center(child: Text('未找到用户'));
          }

          return ListTile(
            title: Text("姓名: ${user.name}"),
            subtitle: Text("年龄: ${user.age}"),
          );
        },
      ),

根据条件检索文档：

StreamBuilder(
        stream: db.getDocStreamWhere(
          collectionName: "users",
          field: "age",
          isEqualTo: 25, // 替换为所需的条件
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }

          if (snapshot.hasError) {
            return Text('错误: ${snapshot.error}');
          }

          List<DocumentSnapshot> documents = snapshot.data?.docs ?? [];

          return ListView.builder(
            itemCount: documents.length,
            itemBuilder: (context, index) {
              Map<String, dynamic> data = 
                  documents[index].data() as Map<String, dynamic>;
              return ListTile(
                title: Text(data['name']),
                subtitle: Text("${data['age']}"),
              );
            },
          );
        },
      ),

更新文档

根据文档ID更新文档：

// 示例代码：更新文档
await db.updateDocument(
  collectionName: 'users',
  documentId: 'documentId123',
  data: {'age': 26},
);

根据条件更新文档：

await updateWhere(
      collectionName: 'your_collection_name',
      field: 'your_field',
      isEqualTo: 'your_value',
      dataToUpdate: {'fieldToUpdate': 'new_value'},
    );

删除文档

根据文档ID删除文档：

// 示例代码：删除文档
await db.deleteDocument(
  collectionName: 'users',
  documentId: 'documentId123',
);

根据条件删除文档：

await deleteWhere(
      collectionName: 'your_collection_name',
      field: 'your_field',
      isEqualTo: 'your_value',
    );

Firebase认证

注册

使用电子邮件和密码进行注册：

await db.register(email, password);

登录

使用电子邮件和密码进行登录：

await db.login(email, password);

登出

从Firebase认证中登出：

await db.signOut();

Firebase存储

上传图像

向Firebase存储上传图像：

import 'dart:io';
import 'package:crud/db.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class UploadImageToFirebase extends StatefulWidget {
  const UploadImageToFirebase({super.key});

  [@override](/user/override)
  State<UploadImageToFirebase> createState() => _UploadImageToFirebaseState();
}

class _UploadImageToFirebaseState extends State<UploadImageToFirebase> {
  XFile? selectedImage;
  Db db = Db();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("上传图像"),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (selectedImage != null) Image.file(File(selectedImage!.path)),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _pickImage();
                },
                child: const Text('选择图像'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                  onPressed: () async {
                    String url = await db.uploadImage(
                        file: selectedImage!,
                        folderName: "Images",
                        fileName: "Image Name");
                  },
                  child: const Text('上传图像到Firebase存储')),
            ],
          ),
        ),
      ),
    );
  }

  // 选择图像的方法
  Future<void> _pickImage() async {
    final XFile? image = 
        await ImagePicker().pickImage(source: ImageSource.camera);
    if (image != null) {
      setState(() {
        selectedImage = image;
      });
    }
  }
}

网站上传图像

在网站上上传图像：

import 'package:file_picker/file_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class UploadImageToFirebase extends StatefulWidget {
  const UploadImageToFirebase({super.key});

  [@override](/user/override)
  State<UploadImageToFirebase> createState() => _UploadImageToFirebaseState();
}

class _UploadImageToFirebaseState extends State<UploadImageToFirebase> {
  String _imageFile = ''; // 保存选中的图像文件
  Uint8List? selectedImageInBytes;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("上传图像"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_imageFile.isNotEmpty || _imageFile != '')
              Image.memory(selectedImageInBytes!),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 调用pickImage方法
                pickImage();
              },
              child: const Text('选择图像'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
                onPressed: () async {
                  // 调用uploadImage方法
                  await uploadImage(selectedImageInBytes!);
                },
                child: const Text('上传图像到Firebase存储')),
          ],
        ),
      ),
    );
  }

  // 在Flutter Web中选择图像的方法
  Future<void> pickImage() async {
    try {
      // 使用file_picker包选择图像
      FilePickerResult? fileResult = await FilePicker.platform.pickFiles(
        type: FileType.image,
      );

      // 如果用户选择了图像，则将选中的图像保存到变量中
      if (fileResult != null) {
        setState(() {
          _imageFile = fileResult.files.first.name;
          selectedImageInBytes = fileResult.files.first.bytes;
        });
      }
    } catch (e) {
      // 如果发生错误，则显示包含错误消息的SnackBar
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text("错误:$e")));
    }
  }
}