Flutter beta 版尝鲜（在 Windows + Android Studio 与 MacOS + VS Code 的安装配置）

发表于 | 分类于

Flutter 是一个 Google 发布的跨平台移动 UI 框架，使用 Dart 语言开发，可以构建高质量原生 iOS 、Android 以及 Fuchsia OS 应用，并且在排版、图标、滚动、点击等方面实现零差异。

Flutter 官网

鉴于最近出了 beta 版，就来尝鲜一下吧。

本文有 Windows + Android Studio 与 MacOS + VS Code 的体验。

Windows + Android Studio

获取 Flutter SDK

使用 git 克隆下来 Flutter SDK

1
git clone -b beta https://github.com/flutter/flutter.git

也可以使用中国的镜像，使用方法：Using Flutter in China

GitCloneFlutter

配置环境变量

添加 flutter\bin 的完整路径到用户变量 Path，如：

1
D:\code\git\flutter\bin

安装依赖

打开cmd或者PowerShell，安装

1
flutter doctor

安装过程可能持续比较久

flutterdoctor

为 Android Studio 安装 Flutter 插件

AndroidStudioInstallFlutter

装好后重启 Android Studio

创建 Flutter APP

  1. 选择 File > New Flutter Project
  2. 选择 Flutter application
  3. 输入应用名 flutter_app，输入 Flutter SDK 路径（如我的：D:\code\git\flutter）
  4. Finish
  5. 等待创建

创建好后，应用程序的代码在lib/main.dart

启动 Flutter APP

  1. 选择设备
  2. Run

ASRunFlutterAPP

尝试热重载

把lib/main.dart里面的字符串

'You have pushed the button this many times:'

改成

'Hahaha, You have clicked the button this many times:'

不用停止模拟器，直接 Save All（cmd-s/ ctrl-s），或者单击 Hot Reload 按钮（带有闪电图标的按钮）

就能看到模拟器中间那行字符串很快更新了。

嗯，体验还是蛮爽的！

MacOS + VS Code

接下来看下在 MacOS 下的安装

获取 Flutter SDK

1
2
git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

配置环境变量

打开环境变量配置文件

1
sudo vi $HOME/.bash_profile

添加一行你的flutter/bin的绝对路径，如我的：

1
export PATH=/Users/xx/code/git/flutter/bin:$PATH

刷新

1
source $HOME/.bash_profile

验证一下是否配置好

1
echo $PATH

安装依赖

1
flutter doctor

为 VS Code 安装 Flutter 插件

在扩展商店中搜索 Dart Code 下载安装

安装好后重新打开

点击 查看 - 命令面板，搜索 Flutter: Run Flutter Doctor

如果 VS Code 找不到 Flutter SDK 路径，就点击进行配置

配置好后重新 Flutter: Run Flutter Doctor，检查配置是否成功

编译 iOS 需要 Xcode 9.0.0+

接下来再检查还需要安装什么

1
flutter doctor

然后突然发现。。。

MacFlutterDoctorRequiresXcode

要编译 iOS 应用需要 Xcode 9.0.0+ ！

可是官网明明说的是 Xcode 7.2+ ？打脸？？

FlutterOfficialSiteXcode

对此，我特意把我的 Xcode 从 7.1 更新到 7.2，结果还是说需要 9.0.0+，看来是官网教程没更新了。

MacFlutterDoctorRequiresXcode9

什么？你说为什么不更新到 Xcode 最新版？

这个……由于博主的是黑苹果，无法升级 MacOS，现在还是 OSX 10.10.5，最高支持的 Xcode 是 7.2.1

所以只好再编译 Android 应用了，下面也只讲构建 Android 的

这里附上有编译 iOS 的教程：Flutter基础—开发环境与入门

创建并执行 Flutter APP

在 VS Code 的终端（或其他终端）上跳转到要创建项目的路径，然后创建名为flutter_app的项目

1
2
3
4
cd ~/code/Android
flutter create flutter_app
cd flutter_app
flutter run

在 Windows 的时候使用的是模拟器，现在用真机体验一下

MacFlutterRun

运行后，试着修改字符串

'You have pushed the button this many times:'

改成

'yeah, You have pushed the button this many times:'

保存，然后在终端按 r 热重载

  • r：热重载
  • R：重启整个APP
  • h：帮助
  • q：退出APP

嗯，Cool。