Mac 配置 flutter开发环境到第一个flutter app

准备工作

• 设置镜像

⚠️ 为保证网络不受限制，将Flutter官方搭建的临时镜像加入到用户变量中去，该临时变量可能会更新，后续更新可从 Using-Flutter-in-China 页面获取最新更新。

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

或者是 由上海交通大学 Linux 用户组提供的

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

• Android Studio 开发环境 和 模拟器

可以参考相关博客，考虑到篇幅这里不做概述。

• 命令行工具
  确保在你的Mac上安装好下列命令行工具

工具	说明
mkdir	新建文件夹 / 文件夹操作
bash	Shell工具
rm	删除文件与文件夹
git	布式版本控制系统
curl	url语法传输工具
unzip	解压zip文件
which	linux 查找工具

---

获取flutter sdk

从 百度网盘 快速下载。
从 flutter 官网 下载最新beta版本和 dev 版本。

• 将下载的flutter_macos_v0.x.x-beta.zip 文件复制到你的用户的 Library 目录下，注意 ⚠️，这并不是必要的，因为我的Android Sdk 存放在这个目录，为了路径统一。

mv Download/flutter_macos_v0.x.x-beta.zip  /Users/你的用户名/Library/
cd /Users/你的用户名/Library
unzip flutter_macos_v0.x.x-beta.zip //解压zip文件并命名为flutter

确定当前目录的路径方便之后用到，进入你的用户目录下

cd /Users/你的用户名/

• 使用 ls -al 查看是否存在 .bash_profile 文件，没有则新建然后编辑。
  将flutter sdk 的bin目录添加到 .bash_profile 文件中。

export PATH=/Users/ruff/Library/flutter/bin:$PATH

这是笔者的.bash_profile文件配置。

export JAVA_HOME
export PATH
export CLASSPATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/ruff/Library/flutter/bin:$PATH
export ANDROID_HOME=/Users/ruff/Library/Android/sdk

• 保存.bash_profile
  运行 source .bash_profile 刷新终端。
  通过运行 flutter/bin 命令验证目录是否在已经在PATH中:

echo $PATH

• 运行 flutter doctor 查看是否缺少其他依赖。

flutter doctor

输出

ruff's mbp:~ abca$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.9.4, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    ✗ Android license status unknown.
[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.2)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.

⚠️ 一般的问题是因为Android Studio 版本太低 或者缺少Android SDK 导致，根据提示安装依赖或者配置环境变量完成安装。

---

编辑器插件安装

你可以使用任何支持 flutter 的编辑器来开发flutter应用，我推荐 大而全的 Android Studio 和 小而精的 VS code。

• Android studio 插件安装
  启动 as 打开configure 的 plugins。
  

• 查找 flutter 插件 点击 install 安装，下载速度视网络环境不同。

• 安装之后重启 as 会出现 Start a new Flutter Project 选项。
  

---

运行第一个Flutter

• 点击新建 flutter项目开始，选择 flutter Application 然后 next
  

• 配置项目名称路径等 点击完成。

• 等待资源载入完成，选中模拟器，点击 run。
  

• 编辑入口文件 lib/main.dart 。

primarySwatch: Colors.blue, -
primarySwatch: Colors.grey, +

command + s 保存 ，效果热更新到模拟器中。与React-Native 类似。

---

总结

我虽然是一名web开发人员，但我对移动开发持有极高的热情，热衷于打造视觉风格一流与用户体验极佳的移动应用。

• Flutter 与React Native 对比
• Flutter 一些常用库
• dart 学习笔记
• Flutter官方文档