🟦Flutter+Firebase快速开发APP：Flutter 超级完整的运行教程（包含问题解决）（待完善）

#### 注意：1.本文章输入的`xxx --version`出现“不是内部或外部命令”的时候，一定是**环境变量没有配置的问题**。一共需要添加五条环境变量，按Window+S,搜索编辑系统环境变量，在Path变量中添加。以下是我的环境变量（安装Flutter与Firebase过程中不能出现中文目录，npm没事）。
```
D:\Nodejs\ #改成你自己的node安装位置

C:\Users\<用户名>\AppData\Roaming\npm #改成你自己的npm安装位置，一般只需要把“机械革命”改成你自己的，但最后都要定位到尾部的路径

D:\FlutterSDK\flutter_windows_3.29.2-stable\flutter\bin\cache\dart-sdk\bin #改成你自己的FlutterSDK安装位置，但最后都要定位到尾部的路径

D:\FlutterSDK\flutter_windows_3.29.2-stable\flutter\bin#改成你自己的FlutterSDK安装位置，但最后都要定位到尾部的路径

C:\PubCache\bin #这条是我的FlutterFire环境变量，如果你的本来是英文路径，改成C:\Users\<用户名>\AppData\Local\Pub\Cache\bin即可
```
#### 2.全程需要可靠的代理服务，我使用的是kuainingmeng（拼音，未打广告），然后导入到clash查看代理端口和ip。
## 安装Flutter SDK

### 第一步：下载Flutter SDK

1. 访问Flutter官方网站下载页面：https://flutter.dev/docs/get-started/install
2. 根据您的操作系统选择相应的安装包：
   - Windows
   - macOS
   - Linux

### Windows安装步骤

1. **下载Flutter SDK压缩包**：
   - 从官网下载最新稳定版Flutter SDK的zip文件
   - 或使用Git命令：`git clone https://github.com/flutter/flutter.git -b stable`

2. **解压Flutter SDK**：
   - 解压到一个不需要特殊权限的路径，如：`C:\src\flutter`
   - 避免使用含空格的路径（如Program Files）

3. **添加环境变量**：
   - 打开系统设置 > 高级系统设置 > 环境变量
   - 在"用户变量"或"系统变量"的Path中添加：`C:\src\flutter\bin`
   - 点击确定保存更改

4. **验证安装**：
   - 打开命令提示符或PowerShell
   - 运行：`flutter --version`
   - 如显示版本信息则表示安装成功

### macOS安装步骤

1. **下载Flutter SDK**：
   - 从官网下载最新稳定版Flutter SDK的zip文件
   - 或使用Git命令：`git clone https://github.com/flutter/flutter.git -b stable`

2. **解压并配置路径**：
   - 解压到合适位置，如：`~/development`
   - 编辑`~/.zshrc`或`~/.bash_profile`文件，添加：
     ```bash
     export PATH="$PATH:~/development/flutter/bin"
     ```
   - 重新加载配置：`source ~/.zshrc`或`source ~/.bash_profile`

3. **验证安装**：
   - 终端运行：`flutter --version`

### Linux安装步骤

1. **下载Flutter SDK**：
   - 从官网下载或使用Git命令：`git clone https://github.com/flutter/flutter.git -b stable`

2. **解压并配置路径**：
   - 解压到合适位置，如：`~/development`
   - 编辑`~/.bashrc`文件，添加：
     ```bash
     export PATH="$PATH:~/development/flutter/bin"
     ```
   - 重新加载配置：`source ~/.bashrc`

3. **验证安装**：
   - 终端运行：`flutter --version`

### 安装Flutter依赖项

运行以下命令查看所有依赖项：
```bash
flutter doctor
```

按照`flutter doctor`输出的指示安装缺少的依赖项，可能包括：
- Android Studio/SDK
- Xcode (macOS)
- VS Code或其他编辑器插件

## 安装Firebase CLI工具

### 第一步：安装Node.js

Firebase CLI依赖于Node.js和npm：

1. **下载Node.js**：
   - 访问官网：https://nodejs.org/
   - 下载并安装LTS版本

2. **验证安装**：
   ```bash
   node --version
   npm --version
   ```

### 第二步：安装Firebase CLI

1. **使用npm全局安装**：
   ```bash
   npm install -g firebase-tools
   ```

2. **验证安装**：
   ```bash
   firebase --version
   ```

### 第三步：登录Firebase账号
1. **使用终端代理**：（ip和端口改成自己的代理服务器，下面是我的地址，建议使用clash进入主页查看）
```bash
# Linux/macOS
export http_proxy="http://26.41.111.250:7890"
export https_proxy="http://26.41.111.250:7890"

# Windows (CMD)
set http_proxy=http://26.41.111.250:7890
set https_proxy=http://26.41.111.250:7890

# Windows (PowerShell)
$env:HTTP_PROXY="http://26.41.111.250:7890"
$env:HTTPS_PROXY="http://26.41.111.250:7890"
```
2. **执行登录命令**：（建议使用）
   ```bash
   firebase login --no-localhost
   ```

3. **按照提示完成授权**：
   - 根据终端提供的链接复制打开谷歌浏览器窗口
   - 使用Google账号登录
   - 授权Firebase CLI访问您的Firebase项目

### 第四步：安装FlutterFire CLI

FlutterFire CLI是Flutter应用集成Firebase的工具：

1. **安装FlutterFire CLI**：
   ```bash
   dart pub global activate flutterfire_cli
   ```

2. **添加到PATH**（如果尚未配置环境）：
   - Windows: 通常是`C:\Users\<用户名>\AppData\Local\Pub\Cache\bin`
   - macOS/Linux: 添加`~/.pub-cache/bin`到PATH

3. **验证安装**：
   ```bash
   flutterfire --version
   ```
**如果出现类似以下错误**：
```bash
C:\Users\机械革命>flutterfire --version
'file' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'age:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'ion:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'utable:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'pt:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'll' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
1.1.0
1.1.0
```
**一定是你使用了中文路径,以下解决办法：**   
原目录是`C:\Users\机械革命\AppData\Local\Pub\Cache\bin`   
**1. 彻底清理旧安装**
```bash
dart pub global deactivate flutterfire_cli
del /f /q "C:\Users\机械革命\AppData\Local\Pub\Cache\bin\flutterfire.bat"
rd /s /q "C:\Users\机械革命\AppData\Local\Pub\Cache\global_packages\flutterfire_cli"
```
**2. 临时改用纯英文路径**
```bash
set PUB_CACHE=C:\PubCache
mkdir C:\PubCache
dart pub global activate flutterfire_cli
```
修改后是`C:\PubCache\bin`,并添加到环境变量Path中。
## 下载Android Studio并配置gradle
这个教程在这不多说，可以去其他博客文章查阅。
### 在Android Studio创建Flutter项目（因为在Vscode里构建比较麻烦，可以在这里构建完Vscode打开也是可以的）
1.**创建Flutter项目**：
  - 在setting里下载Flutter插件
  - 重新启动
  - 新建Flutter Project
  - 选择Flutter并完成一系列选择。
  - 完成创建。   
2.**解决Flutter运行时间长的问题**：
  - 找到`..\android\gradle\wrapper\gradle-wrapper.propertieswen`路径下的项目文件。内容一般为：
```
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
```
  - 将`gradle-8.10.2-all.zip`改成你需要的版本
  - 再找到`gradle.properties`项目文件，在 Windows 系统中路径可能是`C:\Users\YourUsername\.gradle\gradle.properties`，在 Linux 或 macOS 系统中路径是 `~/.gradle/gradle.properties`
  添加以下代码:
```
systemProp.http.proxyHost=26.41.111.250 #代理ip改成你自己的
systemProp.http.proxyPort=7890 #代理端口改成你自己的
systemProp.https.proxyHost=26.41.111.250 #改成一样的
systemProp.https.proxyPort=7890 #改成一样的
```   
3.**添加手机模拟器**：
这里不多赘述
4.**运行手机模拟器并在Android Studio终端输入以下指令**：
`flutter run -v` 等待十分钟差不多就可以了

## 创建Firebase项目并配置Flutter应用
1. **创建Firebase项目**：   
   - 访问Firebase控制台：https://console.firebase.google.com/
   - 点击"添加项目"并填写项目信息
   - 完成项目创建向导

2. **配置Flutter应用**：
   ```bash
   # 在Flutter项目目录下运行
   flutterfire configure
   ```

3. **按照提示操作**：
   - 选择Firebase项目
   - 设置应用平台（iOS/Android）
   - 配置应用ID

4. **在项目文件中添加Firebase依赖**：
   编辑`pubspec.yaml`文件，添加以下代码：
   ```yaml
   dependencies:
     firebase_core: ^2.21.0
     firebase_auth: ^4.12.1
     cloud_firestore: ^4.12.2
   ```

5. **运行依赖安装**：
   ```bash
   flutter pub get
   ```

## 在VSCode中进行Flutter开发
1. **在vscode中打开构建完的项目**

2. **安装Flutter插件**：
   - 打开VSCode
   - 转到扩展视图（Ctrl+Shift+X）
   - 搜索"Flutter"并安装官方插件

3. **验证Flutter开发环境**：
   - 在VSCode中，打开命令面板（Ctrl+Shift+P）
   - 输入"Flutter: Run Flutter Doctor"并执行
4. **点击最左下角打开手机模拟器**
5. **在`main.dart`文件下全选粘贴官方示例代码**
```dart
import 'package:flutter/material.dart';

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

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

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

```
6. **在VScode终端输入`flutter run`**
7. **完美运行**

注意：1.本文章输入的`xxx --version`出现“不是内部或外部命令”的时候，一定是环境变量没有配置的问题。一共需要添加五条环境变量，按Window+S,搜索编辑系统环境变量，在Path变量中添加。以下是我的环境变量（安装Flutter与Firebase过程中不能出现中文目录，npm没事）。

D:\Nodejs\ #改成你自己的node安装位置

C:\Users\<用户名>\AppData\Roaming\npm #改成你自己的npm安装位置，一般只需要把“机械革命”改成你自己的，但最后都要定位到尾部的路径

D:\FlutterSDK\flutter_windows_3.29.2-stable\flutter\bin\cache\dart-sdk\bin #改成你自己的FlutterSDK安装位置，但最后都要定位到尾部的路径

D:\FlutterSDK\flutter_windows_3.29.2-stable\flutter\bin#改成你自己的FlutterSDK安装位置，但最后都要定位到尾部的路径

C:\PubCache\bin #这条是我的FlutterFire环境变量，如果你的本来是英文路径，改成C:\Users\<用户名>\AppData\Local\Pub\Cache\bin即可

2.全程需要可靠的代理服务，我使用的是kuainingmeng（拼音，未打广告），然后导入到clash查看代理端口和ip。

安装Flutter SDK

第一步：下载Flutter SDK

访问Flutter官方网站下载页面：https://flutter.dev/docs/get-started/install
根据您的操作系统选择相应的安装包：
- Windows
- macOS
- Linux

Windows安装步骤

下载Flutter SDK压缩包：
- 从官网下载最新稳定版Flutter SDK的zip文件
- 或使用Git命令：git clone https://github.com/flutter/flutter.git -b stable
解压Flutter SDK：
- 解压到一个不需要特殊权限的路径，如：C:\src\flutter
- 避免使用含空格的路径（如Program Files）
添加环境变量：
- 打开系统设置 > 高级系统设置 > 环境变量
- 在"用户变量"或"系统变量"的Path中添加：C:\src\flutter\bin
- 点击确定保存更改
验证安装：
- 打开命令提示符或PowerShell
- 运行：flutter --version
- 如显示版本信息则表示安装成功

macOS安装步骤

下载Flutter SDK：
- 从官网下载最新稳定版Flutter SDK的zip文件
- 或使用Git命令：git clone https://github.com/flutter/flutter.git -b stable
解压并配置路径：
- 解压到合适位置，如：~/development
- 编辑~/.zshrc或~/.bash_profile文件，添加：
```
export PATH="$PATH:~/development/flutter/bin"
```
- 重新加载配置：source ~/.zshrc或source ~/.bash_profile
验证安装：
- 终端运行：flutter --version

Linux安装步骤

下载Flutter SDK：
- 从官网下载或使用Git命令：git clone https://github.com/flutter/flutter.git -b stable
解压并配置路径：
- 解压到合适位置，如：~/development
- 编辑~/.bashrc文件，添加：
```
export PATH="$PATH:~/development/flutter/bin"
```
- 重新加载配置：source ~/.bashrc
验证安装：
- 终端运行：flutter --version

安装Flutter依赖项

运行以下命令查看所有依赖项：

flutter doctor

按照flutter doctor输出的指示安装缺少的依赖项，可能包括：

Android Studio/SDK
Xcode (macOS)
VS Code或其他编辑器插件

安装Firebase CLI工具

第一步：安装Node.js

Firebase CLI依赖于Node.js和npm：

下载Node.js：
- 访问官网：https://nodejs.org/
- 下载并安装LTS版本
验证安装：
```
node --version
npm --version
```

第二步：安装Firebase CLI

使用npm全局安装：
```
npm install -g firebase-tools
```
验证安装：
```
firebase --version
```

第三步：登录Firebase账号

使用终端代理：（ip和端口改成自己的代理服务器，下面是我的地址，建议使用clash进入主页查看）

# Linux/macOS
export http_proxy="http://26.41.111.250:7890"
export https_proxy="http://26.41.111.250:7890"

# Windows (CMD)
set http_proxy=http://26.41.111.250:7890
set https_proxy=http://26.41.111.250:7890

# Windows (PowerShell)
$env:HTTP_PROXY="http://26.41.111.250:7890"
$env:HTTPS_PROXY="http://26.41.111.250:7890"

执行登录命令：（建议使用）
```
firebase login --no-localhost
```
按照提示完成授权：
- 根据终端提供的链接复制打开谷歌浏览器窗口
- 使用Google账号登录
- 授权Firebase CLI访问您的Firebase项目

第四步：安装FlutterFire CLI

FlutterFire CLI是Flutter应用集成Firebase的工具：

安装FlutterFire CLI：

dart pub global activate flutterfire_cli

添加到PATH（如果尚未配置环境）：
- Windows: 通常是C:\Users\<用户名>\AppData\Local\Pub\Cache\bin
- macOS/Linux: 添加~/.pub-cache/bin到PATH
验证安装：
```
flutterfire --version
```

如果出现类似以下错误：

C:\Users\机械革命>flutterfire --version
'file' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'age:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'ion:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'utable:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'pt:' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
'll' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
1.1.0
1.1.0

一定是你使用了中文路径,以下解决办法：
原目录是C:\Users\机械革命\AppData\Local\Pub\Cache\bin
1. 彻底清理旧安装

dart pub global deactivate flutterfire_cli
del /f /q "C:\Users\机械革命\AppData\Local\Pub\Cache\bin\flutterfire.bat"
rd /s /q "C:\Users\机械革命\AppData\Local\Pub\Cache\global_packages\flutterfire_cli"

2. 临时改用纯英文路径

set PUB_CACHE=C:\PubCache
mkdir C:\PubCache
dart pub global activate flutterfire_cli

修改后是C:\PubCache\bin,并添加到环境变量Path中。

下载Android Studio并配置gradle

这个教程在这不多说，可以去其他博客文章查阅。

在Android Studio创建Flutter项目（因为在Vscode里构建比较麻烦，可以在这里构建完Vscode打开也是可以的）

1.创建Flutter项目：

在setting里下载Flutter插件
重新启动
新建Flutter Project
选择Flutter并完成一系列选择。
完成创建。
2.解决Flutter运行时间长的问题：
找到..\android\gradle\wrapper\gradle-wrapper.propertieswen路径下的项目文件。内容一般为：

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip

将gradle-8.10.2-all.zip改成你需要的版本
再找到gradle.properties项目文件，在 Windows 系统中路径可能是C:\Users\YourUsername\.gradle\gradle.properties，在 Linux 或 macOS 系统中路径是 ~/.gradle/gradle.properties 添加以下代码:

systemProp.http.proxyHost=26.41.111.250 #代理ip改成你自己的
systemProp.http.proxyPort=7890 #代理端口改成你自己的
systemProp.https.proxyHost=26.41.111.250 #改成一样的
systemProp.https.proxyPort=7890 #改成一样的

3.添加手机模拟器：这里不多赘述 4.运行手机模拟器并在Android Studio终端输入以下指令： flutter run -v 等待十分钟差不多就可以了

创建Firebase项目并配置Flutter应用

创建Firebase项目：
- 访问Firebase控制台：https://console.firebase.google.com/
- 点击"添加项目"并填写项目信息
- 完成项目创建向导

配置Flutter应用：

# 在Flutter项目目录下运行
flutterfire configure

按照提示操作：
- 选择Firebase项目
- 设置应用平台（iOS/Android）
- 配置应用ID

在项目文件中添加Firebase依赖：编辑pubspec.yaml文件，添加以下代码：

dependencies:
  firebase_core: ^2.21.0
  firebase_auth: ^4.12.1
  cloud_firestore: ^4.12.2

运行依赖安装：
```
flutter pub get
```

在VSCode中进行Flutter开发

在vscode中打开构建完的项目
安装Flutter插件：
- 打开VSCode
- 转到扩展视图（Ctrl+Shift+X）
- 搜索"Flutter"并安装官方插件
验证Flutter开发环境：
- 在VSCode中，打开命令面板（Ctrl+Shift+P）
- 输入"Flutter: Run Flutter Doctor"并执行
点击最左下角打开手机模拟器
在main.dart文件下全选粘贴官方示例代码

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

在VScode终端输入flutter run
完美运行

最后修改：2025 年 04 月 28 日

如果觉得我的文章对你有用，请随意赞赏

🟦Flutter+Firebase快速开发APP：Flutter 超级完整的运行教程（包含问题解决）（待完善）

2.全程需要可靠的代理服务，我使用的是kuainingmeng（拼音，未打广告），然后导入到clash查看代理端口和ip。

安装Flutter SDK

第一步：下载Flutter SDK

Windows安装步骤

macOS安装步骤

Linux安装步骤

安装Flutter依赖项

安装Firebase CLI工具

第一步：安装Node.js

第二步：安装Firebase CLI

第三步：登录Firebase账号

第四步：安装FlutterFire CLI

下载Android Studio并配置gradle

在Android Studio创建Flutter项目（因为在Vscode里构建比较麻烦，可以在这里构建完Vscode打开也是可以的）

创建Firebase项目并配置Flutter应用

在VSCode中进行Flutter开发

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

简财记 [更新啦！！！] —— 仅仅一款理财APP而已

接受“不够好”，才是变好的开始（2024年度总结）

B2C电商平台微信小程序正在开发中ing...

hello，20岁！

随拍2023

小放松

想逃避的一天

期末周

2024 年 12 月 07 日 18 时 49 分

2024 年 12 月 06 日 23 时 19 分

🟦Flutter+Firebase快速开发APP：Flutter 超级完整的运行教程（包含问题解决）（待完善）

zwolno.O

2.全程需要可靠的代理服务，我使用的是kuainingmeng（拼音，未打广告），然后导入到clash查看代理端口和ip。

安装Flutter SDK

第一步：下载Flutter SDK

Windows安装步骤

macOS安装步骤

Linux安装步骤

安装Flutter依赖项

安装Firebase CLI工具

第一步：安装Node.js

第二步：安装Firebase CLI

第三步：登录Firebase账号

第四步：安装FlutterFire CLI

下载Android Studio并配置gradle

在Android Studio创建Flutter项目（因为在Vscode里构建比较麻烦，可以在这里构建完Vscode打开也是可以的）

创建Firebase项目并配置Flutter应用

在VSCode中进行Flutter开发

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

🟦Flutter+Firebase快速开发APP：Flutter 超级完整的运行教程（包含问题解决）（待完善）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款