前端环境搭建

* 本页面总结凯冰科技第一版APP的前端环境搭建经验总结。

郑凯的在线简历
郑凯
最后编辑于
Flutter，我来啦！

重头戏且充满挑战的部分来了！因为后端对我来讲已经是很熟悉且平时就在接触的东西，所以环境不需要重新搭建就可以使用了。在这篇教程里就不记录这部分内容了，如果想了解，大家可以移步到我的另外一个技术共享手册 《Go编程语言》 的相关章节进行学习。

为了进行Flutter项目的开发，你需要在机器上安装以下环境和工具：

Flutter SDK：创建高性能、跨平台的移动应用

Dart SDK：是一个为全平台构建快速应用的客户端优化的编程语言

IDE集成开发环境：这里我选择的是Android Studio

环境调试工具：一台安卓机和苹果手机（使用虚拟机也可）

下载和安装Android的SDK，以及Flutter和Dart的IDE插件

因为我在家使用的是台式机（Windows 10），所以这里只记录在Windows环境中进行环境建设，在Mac或者是Linux上的步骤大同小异，可能细节上会有差异。话不多说，开始吧！

一、安装并验证Flutter SDK

根据官方文档的要求，你的电脑至少要是Windows 7 SP1 或更高的版本（基于 x86-64 的 64 位操作系统），系统空间至少要1.32GB，且依赖以下两个工具：

  • Windows PowerShell 5.0 或者更高的版本（Windows 10 中已经预装了）
  • Git for Windows 2.x，并且勾选从 Windows 命令提示符使用 Git 选项

如果不满足要求，补齐要求即可。接着，我们就要获取最新发行的Flutter SDK（你要通过官网查看最新的版本进行下载，我搭建的时候最新版本是1.22.6）。

flutter_windows_1.22.6-stable.zip

下载完成之后，解压缩，然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中（例如我的目录就是 C:\Flutter\flutter）。

接下来，为了让你可以在控制台中使用flutter命令，需要进行关键的一步设置：把Flutter SDK 的路径添加到PATH环境变量中。这里就不赘述怎么添加环境变量了，作为程序员，这个基础工作应该难不倒你。

环境变量添加完毕之后，就可以在控制台中验证flutter是否安装成功了：

flutter doctor
flutter doctor命令结果
flutter doctor命令结果

这个命令会检查你的现有环境，并将检测结果以报告形式呈现出来。仔细阅读它显示的内容，检查是否有尚未安装的软件或是有其他的步骤需要完成（通常会以粗体呈现）。根据它的提示，可以补齐要开发Flutter项目，需要依赖的软件或项目！

你可能已经注意到，截图中的红框里的域名，是需要特殊设置的，否则你可能会安装失败或者是执行flutter的相关命令时，无法正常完成。（原因相信大家都懂得，Great Wall还是很强大的，不过如果你有FQ软件可以另当别论）可以通过设置下面两个环境变量来改为国内专门为Flutter开发人员搭建的加速镜像。

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

到这里，Flutter SDK安装完毕且调试成功！接下来，我们安装Dart SDK。

二、安装并验证Dart SDK

首先通过下面的网址下载Dart SDK的安装包（可以选择STABLE稳定版，或者是DEV开发版，根据自己喜好选择，我选择的是稳定版）：

https://gekorm.com/dart-windows/

下载完之后，就是根据安装包提示，进行安装即可（过程中需要翻墙，否则某些服务无法连接到服务器）。 安装成功之后，依旧是老步骤，添加到APTH环境变量。如我的目录是下面的路径：

C:\Program Files\Dart\dart-sdk

为了验证你的Dark环境是否安装成功，可以写一个Hello World程序，执行，如果执行成功即可说明安装成功！

  //hello_world.dart
  void  main(){
    print("Hello world! I'm Ken!");
  }

  //输出结果
  PS I:\Flluter\zkbhj_app\lib> dart .\hello_world.dart
  Hello world! I'm Ken!
  PS I:\Flluter\zkbhj_app\lib>
三、安装IDE集成开发环境：Android Studio

Android Studio的安装比较简单，官网 Android Studio下载安装包（最新版本是4.1.2），然后一步步根据提示安装即可！

Android Studio安装成功之后，进入 ‘Android Studio Setup Wizard’，安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的。如下图所示。

Android Studio安装最新的SDK
Android Studio安装最新的SDK

然后在插件管理面板中安装Flutter和Dart的IDE插件，如下图所示：

Android Studio安装插件
Android Studio安装插件

安装成功之后，就可以让插件生效了！

四、最后一步：连接设备，进行调试

我使用的调试设别是我的小米10手机，首先需要将手机的开发者选项打开，然后打开“USE调试”和“USB安装”：

打开“USE调试”和“USB安装”
打开“USE调试”和“USB安装”

然后用数据线跟你的电脑连接，这个时候会提示进行授权，手机上同意即可。连接成功之后，可以通过 android device命令进行查看，也可以在Android Studio的工具栏中发现你的设备！

Android Studio的工具栏
Android Studio的工具栏

如上图，就代表已经成功识别到你的设备了。如果未识别到，可以在IDE中打开设置首选项，手动选择Flutter的SDK，然后重启IDE。 识别之后，点击后面的绿色“执行”图标，就可以把应用安装到你的设备上，进行调试了！Flutter有一个很棒的特性，就是可以进行代码“热加载”，即改动之后，无需重新打包安装，就可以在设备上看到变化！你可以注意到，运行起来之后，有一个黄色的闪电形状的图标，就是热加载图标。

  event sent after app closed: {id: 0, progressId: null, message: Running "flutter pub get" in zkbhj_music_app...}
event sent after app closed: {id: 0, progressId: null, finished: true}
Launching lib\main.dart on Mi 10 Pro in debug mode...
Running Gradle task 'assembleDebug'...

如果你发现你的安装步骤一直停留在Running Gradle task 'assembleDebug'...的步骤上，那还是跟网络被墙有关系，你可以用以下几个步骤完成优化：

  //修改项目中android/build.gradle文件
  //修改的地方
  //google()
  //jcenter()
  maven { url 'https://maven.aliyun.com/repository/google' }
  maven { url 'https://maven.aliyun.com/repository/public' }

  //修改Flutter的配置文件, 该文件在Flutter安装目录/flutter/packages/flutter_tools/gradle/flutter.gradle
  //google()
  //jcenter()
  maven { url 'https://maven.aliyun.com/repository/google' }
  maven { url 'https://maven.aliyun.com/repository/public' }

  //另外也可能是下载gradle工具链接太慢了，可以更换为腾讯的镜像源
  //https://mirrors.cloud.tencent.com/gradle/
  //修改文件\zkbhj_app\android\gradle\wrapper\gradle-wrapper.properties
  #Fri Jun 23 08:50:38 CEST 2017
  distributionBase=GRADLE_USER_HOME
  distributionPath=wrapper/dists
  zipStoreBase=GRADLE_USER_HOME
  zipStorePath=wrapper/dists
  distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-5.6.2-all.zip

  然后重新开始！

最终，你的手机上就会安装上你的APP，可以开始我的前端程序开发和调试之旅了！

APP安装到手机上
APP安装到手机上

搞定！！可以开始进入程序研发阶段了！奥利给！

* 本页内容参考以下数据源：

  • https://flutter.cn/docs/get-started/install
  • https://storage.flutter-io.cn/flutter_infra/releases/stable/windows/flutter_windows_1.22.6-stable.zip
  • https://blog.csdn.net/jifashihan/article/details/80675267
  • https://pub.flutter-io.cn/
  • https://gekorm.com/dart-windows/
  • https://developer.android.google.cn/studio/
  • https://mirrors.cloud.tencent.com/gradle/
  • https://maven.aliyun.com/mvn/guide
上一篇：后台接口设计 →
凯冰科技 · 代码改变世界，技术改变生活
下一篇：第一次运行时的惊喜 →