[Flutter] 01-Mac环境搭建Flurrer

Author Avatar
codeTao 6月 14, 2020

建议先看官方文档, 下面是作者自己的搭建过程,仅供参考
官方中文文档

一、Flutter SDK

1.Flutter官网下载其最新可用的安装包下载SDK
Flutter官网SDK下载

2.解压安装包到你指定的目录，可以右键用解压工具,也可以用下面命令

cd ~/development
unzip ~/Downloads/flutter_macos_1.17.1-stable.zip

3.如果下面指令只在当前命令行窗口执行, 该设置PATH环境变量是临时的，要想永久将Flutter添加到PATH,需要将下面代码添加到.bash_profile文件中:

首先终端输入, 打开.bash_profile文件

open ~/.bash_profile

.bash_profile文件中添加下面环境配置

#Flutter环境变量SDK地址
export PATH=本地flutter路径/bin:$PATH

#google提供服务地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

其中google提供服务地址 也可以使用上海交通大学的镜像地址

export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn

4.运行source ~/.bash_profile命名, 刷新当前终端窗口。

source ~/.bash_profile
或者运行
source $HOME/.bash_profile

注意: 如果你使用终端是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ～/.zshrc ，在其中添加：source ～/.bash_profile

  • 打开.zshrc文件
open ~/.zshrc
  • 在其中添加：source ～/.bash_profile 保存退出,执行 souce ~/.zshrc
source ~/.zshrc

5.验证“flutter/bin”是否已在PATH中：

echo $PATH

二、当前终端窗口检测flutter环境

flutter doctor

完成提示:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.4 19E287, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)

• No issues found!

三、安装Android Studio

如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio。
Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

1.建议从官网下载安装3.5.3版使用, 用最新版3.6.3有和Flutter和Dart插件兼容问题

Android Studio所有版本下载

2.下载Flutter和Dart插件

  • Android Studio安装完后下载Flutter和Dart插件
    Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等)。
    Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等)。

  • 点击左上角Android Studio进入Preferences

  • Plugins中搜索Flutter, 选择第一个Flutter点击install按钮，同样下载Dart。

3.添加模拟器

1>. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device。
2>. 选择一个设备并选择 Next。
3>. 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image。
4>. 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速。
5>. 验证AVD配置是否正确，然后选择 Finish。
有关上述步骤的详细信息，请参阅 Managing AVDs.
6>. 在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
7>. 运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86。

4. 查看AndroidSDK路径

  • 启动界面中Android Studio可以查看AndroidSDK路径, 启动页点击Configure->SDKManager。如下图:

  • 或者选择顶部菜单栏 Android Studio>Tools>Android>SDK Manager

四、VSCode 配置

1) 安装flutter和Dart插件

1.启动 VS Code。
2.选择扩展。
3.在搜索框输入 flutter ，在搜索结果列表中选择 Flutter (只有未安装插件才显示Install按钮) ，然后点击 Install。同样搜索Dart后同样安装操作。
4.选择 ‘OK’ 重新启动 VS Code。

5.验证配置:

  • 调用 View>Command Palette…
  • 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
  • 查看“OUTPUT”窗口中的输出是否有问题

2) VSCode中文配置

1.打开“vscode” ，按快捷键“Ctrl+Shift+P”。
2.在顶部搜索框中输入“configure language”，按回车键。
快捷键“Ctrl+Shift+P” 后弹窗

3.“vscode”里面就会打开一个语言配置文件，将“en-us”修改成“zh-cn”，按“Ctrl+S”保存设置，重启“vscode”就可以了.

4.如果没有zh-cn ,点击下面 Install additional languages, 下载中文语言包后,再次重复上面操作.

下载中文包

3) VSCode代码提示配置

  • 代码片段
    Flutter Widget Snippets: 提供 Widget 代码片段
    Awesome Flutter Snippets: 提供常用函数的代码片段。使用起来非常方便，例如创建一个 Stateful App，只需要输入 fstful，即可快速创建。

  • 高亮
    Bracket Pair Colorizer
    vscode 自动会为 Dart 代码进行高亮显示，因此无需下载其他高亮插件。但是写过 Flutter 的应该都会觉得， Flutter 简直就是嵌套地狱。因此推荐这个插件，可对括号进行高亮匹配显示，这样更易于阅读以及修改代码。