Flutter 的 Firebase 模拟器设置

也许您正在尝试为您的 Firebase 项目设置本地开发环境。或者，您可能想尝试 Firebase 功能，但在 Firebase 的 spark 计划中。

不管它是什么，Firebase 都为我们提供了一个模拟器套件，我们可以用它来在本地试验 Firebase。

安装 Firebase CLI

首先，我们需要在我们的计算机上安装官方 Firebase CLI。

npm install firebase-tools -g

运行上述命令将 Firebase CLI 全局安装到我们的系统。

接下来，我们必须使用firebase login. 这将带您进入浏览器以确认登录。单击允许登录到 cli。它会显示一条成功的消息。

CLI登录成功！

初始化 Firebase 项目

下一步是初始化您的 firebase 项目。转到您要使用 Firebase 的 Flutter 项目，然后运行以下命令。

firebase init

它将以黄色大字体显示Firebase。提示会问你一些问题，首先是你准备好继续。按Y继续。

选择服务

下一个提示将是选择我们要初始化的服务。按空格键选择您需要的所有服务。然后点击进入继续。

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
 ( ) Hosting: Set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products
>( ) Remote Config: Configure a template file for Remote Config
 ( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ( ) Firestore: Configure security rules and indexes files for Firestore
 ( ) Functions: Configure a Cloud Functions directory and its files
(Move up and down to reveal more choices)

不要忘记在这里选择模拟器！

选择项目

下一步是选择我们希望 Flutter 项目关联的项目。对于本教程，我已经在Firebase Console中创建了一个 Firebase 项目。

所以在这个提示中选择使用现有项目

? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

它将显示您创建的所有项目的列表，您必须选择一个。

或者

您可以选择不设置默认项目并继续！

接下来的几个提示将基于您在上一步中选择的服务。

对于这篇文章，我们将只介绍模拟器设置。CLI 将询问我们要设置哪些模拟器。

? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Authentication Emulator
 (*) Functions Emulator
 ( ) Firestore Emulator
 ( ) Database Emulator
 ( ) Hosting Emulator
 ( ) Pub/Sub Emulator
 ( ) Storage Emulator

选择您要在此项目中使用的所有模拟器。

然后它会询问每个模拟器应该使用哪个帖子。单击输入以选择默认选项。

当 CLI 询问是现在还是以后下载模拟器时，单击Y立即下载它们。

在这些之后，CLI 将显示一条成功消息。

+  Firebase initialization complete!

到 Flutter 方面

接下来，我们将使用本地模拟器而不是我们的 Production Firebase 项目来设置我们的 Flutter 项目。

Flutter 的每个 Firebase 插件都有类似.useEmulator的东西。因此，为了方便起见，我创建了一个函数，让所有 Firebase 产品都使用模拟器。

Future _connectToFirebaseEmulator() async {
  final localHostString = '{your system Ip Address}';

  FirebaseFirestore.instance.settings = Settings(
    host: '$localHostString:8080',
    sslEnabled: false,
    persistenceEnabled: false,
  );

  await FirebaseStorage.instance
      .useStorageEmulator('http://$localHostString', 9199);

  await FirebaseAuth.instance.useAuthEmulator('http://$localHostString', 9099);
}

官方文档建议只使用 localhost 而不是您的系统 IP 地址，但我会稍微解释一下。

当我尝试从Real Device（也不是 android 模拟器）连接到模拟器时，我无法仅使用localhost. 如果您使用的是 Android 或 iOS 模拟器，您可能会坚持使用 localhost 版本。

Future _connectToFirebaseEmulator() async {

  FirebaseFirestore.instance.settings = Settings(
    host: 'localhost:8080',
    sslEnabled: false,
    persistenceEnabled: false,
  );

  await FirebaseStorage.instance
      .useStorageEmulator('localhost', 9199);

  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
}

我们必须调用上面的函数成为runApp方法main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await _connectToFirebaseEmulator();
  runApp(
    MyApp(),
  );
}

暂时不要离开！为了使我的破解版本正常工作，我们必须对另外一个文件进行更改。

调整 firebase.json 文件

在 Flutter 项目的根目录下有一个名为 firebase.json 的文件。别担心，它是在我们的 Firebase CLI 初始化期间创建的。

默认情况下，它看起来像这样。

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "pubsub": {
      "port": 8085
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    }
  }
}

JSON 中列出的每个模拟器中都有一个端口密钥。我们需要为它们添加一个主机密钥。

我们必须提供我们的系统 IP 作为主机。要获取我们的 IP 地址，我们可以ipconfig在 windows 和ifconfigLinux 上运行。就我而言，它是192.168.42.54

所以我的firebase.json样子是这样的。

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "host": "192.168.42.54",
      "port": 9099
    },
    "functions": {
      "host": "192.168.42.54",
      "port": 5001
    },
    "firestore": {
      "host": "192.168.42.54",
      "port": 8080
    },
    "storage": {
      "host": "192.168.42.54",
      "port": 9199
    },
    "ui": {
      "host": "192.168.42.54",
      "enabled": true
    }
  }
}

运行模拟器

现在是运行它们的时候了！🎉

在 Flutter 项目根目录的终端中运行以下代码。

firebase emulators:start

等待一段时间，你会看到：

Firebase 模拟器运行

最后，如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。

小编在这里祝小伙伴们在未来的日子里都可以 升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰！！

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，需要一份小编整理出来的flutter学习资料的点击文末微信卡片免费领取~

这里是关于我自己的Android flutter 学习，面试文档，视频收集大整理，有兴趣的伙伴们可以看看~

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。