如何在 Flutter Web 应用程序中使用 Firebase.dart 和 Firebase Emulators FireStore db？答案

【问题标题】：How do I use Firebase.dart with Firebase Emulators FireStore db in a Flutter Web app?如何在 Flutter Web 应用程序中使用 Firebase.dart 和 Firebase Emulators FireStore db？
【发布时间】：2020-09-21 12:57:36
【问题描述】：

我的应用是 Flutter Web 应用。它使用package:firebase/firebase.dart。

我正在尝试使用 Firebase 模拟器 UI。

该应用托管在 Firebase 上，可读写 Firestore。但是当我使用firebase emulators:start 时，localhost:5000 的本地托管应用程序仍在访问生产 Firestore 数据库。

如何进行设置，以便本地运行的应用使用位于 localhost:8080 的 Firestore 模拟器？

我找到了类似this 的线程，但我没有使用cloud_firestore.dart。我尝试了类似的步骤（请参阅下面的更新），但它们在我的上下文中不起作用。

这是我的main.dart 文件：

import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(
        apiKey: 'someAPIkey',
        authDomain: 'some.domain.com',
        databaseURL: 'https://somedomain.firebaseio.com',
        projectId: 'myProj',
        storageBucket: '',
        messagingSenderId: 'someId',
        appId: '1:9anAppId');

    var searchClient = Algolia.init(
        applicationId: 'anAppId',
        apiKey: 'someAPIkey');

    runApp(MyApp(
        repository: Repository(app.firestore(), searchClient),
        authentication: Authentication(app.auth())));
  } on fb.FirebaseJsNotLoadedException catch (e) {
    print(e);
  }
}

class MyApp extends StatefulWidget {
  final Repository repository;
  final Authentication authentication;

  const MyApp({Key key, this.authentication, this.repository})
      : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

有什么想法吗？

谢谢！

更新：我尝试了以下方法，但得到了相同的结果：

import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/src/firestore.dart' as fs;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(
        apiKey: 'someAPIkey',
        authDomain: 'some.domain.com',
        databaseURL: 'https://somedomain.firebaseio.com',
        projectId: 'myProj',
        storageBucket: '',
        messagingSenderId: 'someId',
        appId: '1:9anAppId');

    var searchClient = Algolia.init(
        applicationId: 'anAppId',
        apiKey: 'someAPIkey');

    // These two lines are new:
    var db = app.firestore();
    db.settings(fs.Settings(host: 'localhost:8080', ssl: false));

    runApp(MyApp(
        repository: Repository(db, searchClient),
        authentication: Authentication(app.auth())));
  } on fb.FirebaseJsNotLoadedException catch (e) {
    print(e);
  }
}

【问题讨论】：

标签： firebase dart google-cloud-firestore flutter-web firebase-cli

【解决方案1】：

关键是导入dart:html 让我可以访问window。从那里我可以做一些类似于 Firebase 文档中使用的 JavaScript 的事情。

import 'dart:html';
import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(firebaseConfig);

    if (window.location.hostname == 'localhost') {
      app.firestore().settings(Settings(
            host: '0.0.0.0:8080',
            ssl: false,
          ));
    }

我不知道主持人是否会在所有情况下为所有人提供0.0.0.0。我是从模拟器启动时列出的主机那里得到的。

【讨论】：