Flutter 搭建Mac环境

本篇将介绍如何在Mac上搭建Flutter环境，并安装使用Android Studio来新建一个Flutter项目。Mac上可以安装Android Studio和xcode。但是windows上只能安装Android Studio。

一. 下载Flutter SDK

这是官网下载地址：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

Flutter SDK解压的位置很重要，因为下一步配置环境镜像时需要用到这个解压地址。

二. 配置环境镜像

执行vim ~/.bash_profile，将以下命令加到文件中

//国内用户需要设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
//国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
// PATH_TO_FLUTTER_GIT_DIRECTORY 为Flutter sdk的解压地址
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

保存后执行 source ~/.bash_profile，重新加载。此时环境镜像已经配好了，执行flutter -h 来检查flutter是否安装成功了。若出现下图则表示安装成功。

flutter_1.png

注意: 如果你使用的是zsh，终端启动时， ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile。然后重启窗口就可以了。

三. 安装Android Studio，并安装Flutter插件

在Mac中也可以安装XCode，但在windows中只能安装Android Studio。
先下载并安装Android Studio，下载地址：http://www.android-studio.org/。安装完成后，在/AndroidStudio/Preferences/Plugins中搜索Flutter

flutter_2.png

点击 search in repositories ，然后点击安装。到这里就已经安装完成了，重启下Android Studio就可以了。

四. 运行flutter doctor，检查是否都安装好了

若有没有安装的会有x的提示，按照提示安装即可。由于这里只安装了Android Studio，所以会有xcode的错误提示，暂时可以先忽略xcode的错误提示。
其中有个错误提示是安装安卓证书。安装证书命令如下：

flutter doctor --android-licenses

执行命令后会y/N的询问，一律选择y，就可以安装好。
再执行flutter doctor会发现证书的提示显示成功。

五. 创建flutter项目

此时我们的环境已经搭建完成了，此时我们可以打开Android Studio来新建我们的第一个Flutter项目。

1. 首先打开Android Studio，选择Start a new Flutter project

   
   
   flutter_3.png

2. 然后选择Flutter Application，然后点击Next

   
   
   flutter_4.png
3. 填写相关配置

• Project name 是你Flutter项目的名称
• Flutter SDK path，则是Flutter SDK的地址，就是第2步配置环境变量的那个地址。若这个地址错了，则不能创建项目，这里也可以点击install SDK（我尝试过，非常的慢）
• Project location 是你Flutter项目需要存放的地址

• Description 是项目描述
  若有错误，会有提示。没有错误提示的话，则点击Next

  
  
  flutter_5.png

4. company domain是公司域名。然后点击Finish创建，如果是第一次创建，则会有点慢，等待一下就可以了。创建完成后就能看到main.dart文件代码。

   
   
   flutter_6.png

5. 增加设备。点击Tools/AVD manager/，再点击新增按钮，然后就能看到各种手机型号，然后有个默认的选择（如果你有特定机型的需求就按照需求创建即可），然后我们呢直接点击Next

   
   
   flutter_7.png
   
   

   选择Pie，点击Pie旁边的download（我的已经下载过了，所以没有），下载完成后点击Next

   
   
   flutter_8.png
   
   然后你可以修改名称，点击Finish则配置成功了一个AVD。创建成功后，我们在AVD manager中可以看到我们刚刚配置的信息，然后点击绿色的启动按钮。我们就可以看到一个手机模拟器了。
   
   flutter_9.png
   
   

   我们回到main.dart文件，点击启动按钮（第一个红色框里面），稍等一会就能看到手机模拟器上显示了内容。

   
   
   flutter_10.png
   
   到这里我们的Flutter项目就初步启动起来了。当我们改动了代码之后，只要保存了，就能热重载，模拟器也会刷新。还是很厉害的~
   
   flutter_11.png

六. 使用VScode运行Flutter项目

VSCode也能支持Flutter项目的编写和运行。首页安装Flutter插件，这个插件会自动我们安装上Dart插件。我们用VSCode打开刚刚用Android Studio创建的flutter_app项目，会发现代码有颜色了，也就是Flutter插件安装成功了。
  点击调试-->启动调试(F5)(调试模式)，会出现刚刚我们刚刚创建的AVD信息，也可以选择一个新的emulator(模拟器)。选择之后，就会出现一个手机模拟器，跟刚刚用Android Studio运行时一样的模拟器。修改代码保存后，也会热重载。
  点击调试-->在不调试的情况启动。这个也可以出现模拟器。
选择调试设备：
  1. 点击右下角的No Device。没有选择设备时，显示No Device，若选择了则会显示已选的设备名称
  2. 在命令面板中找到 Flutter: Select Devices
  3. 点击调试-->启动调试或者在不调试的情况启动，也可以选择设备

flutter_12.png

这是VSCode选择设备的显示，可以选择已有的设备，也可以点击Create Android emulator来新建设备。

PS:写的不好请多包含，若有错误请告知修改~