前两天花时间过了一遍 Dart 基础的语法，基本熟悉之后计划开始学习 Flutter，如果后面遇到了 Dart 相关的问题再去巩固。
根据 Flutter 官网上的教程简单的体验了一下 Flutter，主要是搭建了开发环境，然后运行了一个简单地示例程序。总体感觉还挺不错的，配套的基本工具很齐全，环境搭建十分简单，编程体验很好。下面详细介绍一下这一过程。

搭建开发环境

个人电脑使用的是 mac，开发工具以及 Homebrew、Android SDK 等之前已经全部安装好，所以这里主要是下载和配置 Flutter 相关内容。开发工具使用的是 IntelliJ IDEA 和 Xcode。

下载 Flutter SDK

  1. 在 官网 下载最新的 Beta 版本（目前 Flutter 还未发布正式版）。Dart SDK 已经捆绑在 Flutter 里，没有必要单独安装 Dart。

  2. 下载完成之后，解压到任意目录即可，我是解压到了 ~/Development 下。

    $ cd ~/Development
$ unzip ~/Downloads/flutter_macos_v0.8.2-beta.zip

  3. 配置环境变量，这里主要完成两个工作：

    编辑 ~/.bash_profile 文件（没有则创建），添加以下内容：

    export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

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

    这里附上我个人 .bash_profile 的配置：

    export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
export ANDROID_HOME=~/Library/Android/sdk
export JAVA_HOME=$(/usr/libexec/java_home)
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$PATH:$JAVA_HOME/bin:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:~/Development/flutter/bin

# Flutter mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

运行 flutter doctor

flutter doctor 会检查当前环境并显示报告，内容如下图所示。

flutter_doctor_report

可以看到发现的问题和解决方案十分清楚，并不是所有的问题都需要解决，根据需要处理即可。问题处理完之后，再次运行 flutter doctor 命令来进行验证。

编辑器配置

编辑器主要使用的是 IntelliJ IDEA，对比 iOS 相关内容可能需要用到 Xcode。

只用在插件管理界面安装 Flutter 和 Dart 插件即可。在安装插件时，可能会出现无法下载的情况。在 Preferences>Appearance & Behavior>System Setting>Updates 中取消 Use secure connection 的勾选即可正常下载安装。

体验 Flutter

开发环境配置好以后，就可以开始体验 Flutter 了。

创建项目

打开 IntelliJ IDEA，创建项目，发现已经可以创建 Flutter 项目了。

create_flutter

在这个页面设置好 Flutter SDK 路径，点击 Next，然后填写项目名称等信息即可创建 Flutter App。项目名称必须要是一个合法的 Dart 包名，全小写下划线分割命名。

运行项目

编辑器会使用 Flutter 工具从模板创建一个项目，该项目可以直接运行。通过 IntelliJ IDEA 的工具栏，我们可以直接运行项目，当然也可以通过命令行运行。

toolbar

在运行的时候，我们可以选择运行在哪个设备上，这里的设备可以使模拟器或者真机。IDEA 会自动搜寻可运行的设备。我这里选择打开 iOS 模拟器，然后再 iPhone X 上运行，运行效果如图所示。

iphone_x

Flutter 支持热重载，在修改代码后，我们不需要重启程序或是重新部署代码就可以在模拟器或者真机上看到修改后的效果。

真机运行

Flutter App 也可以在真实机器上运行，只要将手机接入电脑，IDEA 就会检测到相应设备，在工具栏上选择相应的设备运行即可。

在 Android 真机上运行

  1. 将 Android 机通过 USB 接入电脑，手机开启开发人员选项和 USB 调试。
  2. IDEA 会检测到 Android 设备，点击运行按钮即可。

在 iOS 设备上运行

  1. 在 Xcode 中打开 ios/Runner.xcworkspace，选择导航面板左侧中的 Runner 项目。
  2. 在 General->Signing->Team 中选择开发团队，没有则自己添加一个 Apple ID，任何 Apple ID 都支持开发和测试。如果 Xcode 中自动签名失败，检查 General > Identity > Bundle Identifier 的值是否唯一。
    xcode
  3. 将手机通过 USB 连接上电脑，需要选择信任该设备。
  4. 选择真机，点击运行按钮。

可能遇到的问题：

  • 手机处于锁定状态时，无法安装。
  • Xcode 版本相较于 iOS 版本太老，需要升级 Xcode（我使用 Xcode 9 在 iPhone X 上运行时提示这个错误，但是手机上还是安装成功了）。
  • 出现不受信任的开发者，需要在手机中 设置>通用>设备管理 中信任开发者。