Flutter Web端云数据库访问插件cloud_firestore_web的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter Web端云数据库访问插件cloud_firestore_web的使用

cloud_firestore_web 是 cloud_firestore 的 web 实现，允许你在 Flutter Web 应用中访问 Firebase 的 Cloud Firestore 数据库。以下是如何开始使用这个插件的指南和一个完整的示例 demo。

开始使用

前置条件

  1. 确保你已经在 Firebase 控制台 创建了一个项目。
  2. 已经在你的 Flutter 项目中集成了 Firebase，并且已经添加了 Android 和 iOS 平台的支持（即使你是为 Web 开发，这也是必要的）。

设置步骤

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

    dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^3.0.0 # 使用最新版本

  2. 配置 Firebase：下载你的项目的 google-services.json (Android) 和 GoogleService-Info.plist (iOS)，并根据 Firebase 文档设置这些文件。

  3. Web 配置：

    • 在 web/index.html 中添加 Firebase SDK 脚本：

      <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>

    • 初始化 Firebase，在同一 HTML 文件中添加如下脚本：

      <script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

示例代码

以下是一个简单的示例，展示如何在 Flutter Web 应用中读取和写入 Firestore 数据：

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

void main() => runApp(MyApp());

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

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

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  void _addData() async {
    await _firestore.collection('testCollection').add({
      'title': 'Sample Title',
      'description': 'This is a sample description.',
    });
    print('Data added');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firestore Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _addData,
              child: Text('Add Data to Firestore'),
            ),
            StreamBuilder<QuerySnapshot>(
              stream: _firestore.collection('testCollection').snapshots(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return CircularProgressIndicator();
                }
                return ListView(
                  shrinkWrap: true,
                  children: snapshot.data!.docs.map((document) {
                    return ListTile(
                      title: Text(document['title']),
                      subtitle: Text(document['description']),
                    );
                  }).toList(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

结论

通过上述步骤和示例代码，你应该能够在 Flutter Web 应用中成功集成和使用 Cloud Firestore 进行数据的读取和写入操作。确保参考 Firebase 官方文档以获取更多高级功能和最佳实践。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter Web项目中使用cloud_firestore_web插件来访问云数据库的示例代码。这个插件允许你通过Firebase Firestore在Flutter Web应用中存储和检索数据。

首先，确保你已经按照Firebase的官方文档完成了项目的设置，并获得了必要的配置信息（如Web应用的Firebase配置）。

1. 添加依赖

在你的pubspec.yaml文件中添加cloud_firestore_web和firebase_core_web的依赖：

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore_web: ^2.5.0  # 请检查最新版本号
  firebase_core_web: ^1.0.0    # 请检查最新版本号

2. 导入Firebase配置

在web/index.html文件中添加你的Firebase配置。这通常是在Firebase控制台中为你的Web应用生成的配置代码。

<!DOCTYPE html>
<html>
<head>
  <title>your_app_name</title>
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js"></script>
  <!-- Add Firebase Firestore SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js"></script>
  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const db = firebase.firestore();
  </script>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

3. 初始化Firebase并访问Firestore

在你的Dart代码中（例如lib/main.dart），初始化Firebase并使用Firestore：

import 'package:flutter/material.dart';
import 'package:firebase_core_web/firebase_core_web.dart';
import 'package:cloud_firestore_web/cloud_firestore_web.dart';

void main() async {
  // Initialize Firebase in Flutter Web
  await Firebase.initializeApp(web: {
    'apiKey': 'YOUR_API_KEY',
    'authDomain': 'YOUR_PROJECT_ID.firebaseapp.com',
    'projectId': 'YOUR_PROJECT_ID',
    'storageBucket': 'YOUR_PROJECT_ID.appspot.com',
    'messagingSenderId': 'YOUR_MESSAGING_SENDER_ID',
    'appId': 'YOUR_APP_ID',
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirestoreExample(),
    );
  }
}

class FirestoreExample extends StatefulWidget {
  @override
  _FirestoreExampleState createState() => _FirestoreExampleState();
}

class _FirestoreExampleState extends State<FirestoreExample> {
  FirebaseFirestore firestore = FirebaseFirestore.instance;
  String? documentData;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  void fetchData() async {
    try {
      DocumentSnapshot snapshot = await firestore.collection('your_collection_name').doc('your_document_id').get();
      if (snapshot.exists) {
        setState(() {
          documentData = snapshot.data()!['your_field_name'].toString();
        });
      } else {
        setState(() {
          documentData = 'No such document!';
        });
      }
    } catch (e) {
      setState(() {
        documentData = 'Error fetching data: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firestore Example'),
      ),
      body: Center(
        child: Text(documentData ?? 'Loading...'),
      ),
    );
  }
}

注意事项

  1. 确保配置正确：确保你在web/index.html和Dart代码中使用的Firebase配置信息是正确的。
  2. 网络权限：检查Firebase控制台中的数据库规则，确保你的应用有权限读取和写入数据。
  3. 版本兼容性：确保你使用的插件版本与Flutter和Firebase SDK的版本兼容。

通过上述步骤，你应该能够在Flutter Web应用中成功访问Firebase Firestore数据库。

回到顶部