Dart移动开发框架Flutter快速上手指南


#1

###更新记录

  1. 2015.09.14 更改部分文字,添加官方widget tutorial链接
  2. 2015.09.24 注明Sky的版本
  3. 2015.10.19 Sky => Flutter
  4. 2017.12.19 再次大幅更新

引言

Flutter 是 Google 的 Chromium 项目组与 Dart 项目组合作开发的一个新的跨平台移动应用开发框架。Flutter虽然还处于alpha阶段,但已经可以拿来写点简单的应用了。本文就是让你了解如何配置flutter的开发环境,并编写一个简单的 Hello World。

注意

  • Flutter 还在不停迭代,本文可能会不适用于后续更新的版本
  • 笔者的操作都是在Mac的终端下进行,整体流程也适用于 Windows 和 Linux
  • 本文没有讲解如何设置 Dart/Flutter 配套的IDE,详情请查看:https://flutter.io/ide-setup/
  • 本文其实只是 Flutter 官方上手指南的简单归纳,经历了两年多的发展,Flutter 已经逐渐成熟,文档也非常丰富,有经验的开发者建议直接查看官网

开发环境配置

系统要求

  • 64位操作系统,Mac / Windows / Linux 皆可
  • 必要工具:git (Mac和Linux还需要:bash, mkdir, rm, git, curl, unzip, which等命令行工具)

获取 Flutter SDK

使用 git 获取 flutter 的 alpha 分支:

git clone -b alpha https://github.com/flutter/flutter.git

克隆完成后,将 flutter/bin 文件夹添加到环境变量即可;

运行 flutter doctor

在命令行中执行 flutter doctor,即让 flutter 自动检测当前环境所缺少的工具,检测结果大致如下:

[✓] Flutter (on Mac OS X 10.12.6 16G29, locale zh-Hans-CN, channel alpha)
    • Flutter at /Users/jarontai/dart/flutter
    • Framework revision 8f65fec5f5 (7 days ago), 2017-12-12 09:50:14 -0800
    • Engine revision edaecdc8b8
    • Tools Dart version 1.25.0-dev.11.0
    • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.2)
    • Android SDK at /Users/jarontai/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.2
    • ANDROID_HOME = /Users/jarontai/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b
    • ios-deploy 1.9.2
    • CocoaPods version 1.2.1

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] Connected devices
    • iPhone 5s • 640A2FF1-25BB-4FF1-B297-98D806B11D9A • ios • iOS 10.3 (simulator)

开发者可以根据检测结果逐一排查并安装缺失的组件。

配置Android模拟器

  • 先确保已经安装并配置好 Android Studio 和 Android SDK(具体步骤这里不做详细介绍)
  • 为电脑开启模拟器加速
  • 通过 Android Studio>Tools>Android>AVD Manager 菜单,选择 Create Virtual Device 创建虚拟设备
  • 在选择系统镜像时,推荐使用选择x86或x86_64的镜像
  • 最后,在模拟性能选择中选择 Hardware - GLES 2.0,即开启硬件加速

配置ios模拟器(Mac)

  • 确保 Xcode 版本不低于 7.2
  • 在终端中执行 open -a Simulator,即打开ios模拟器
  • 通过 Hardware > Device 菜单,设置设备为 iPhone 5s 或其他更新的(64位)设备
  • 通过 Window > Scale 菜单,调整模拟器缩放比例

创建项目

准备工作完成,开始创建demo项目。由命令行进入你的工作目录,执行 flutter create hello 并等待其完成。flutter 将在当前目录下,自动创建一个名为 hello 且使用 Material Design 风格的demo项目(计数器),项目中的主要文件如下:

hello
  android/ - 安卓项目代码
  ios/     - ios项目代码
  lib/     - Flutter的Dart代码
  test/    - 测试代码
  pubspec.yaml - pubspec文件

运行

先开启 Android 模拟器或 ios 模拟器,然后进入hello文件夹,执行 flutter run 并保持终端运行。使用编辑器打开 lib/main.dart 文件,修改其中的代码,比如:将 new MyHomePage(title: 'Flutter Demo Home Page') 改为 new MyHomePage(title: ‘Hello World’) 。然后切换回应用运行的终端,按r即让应用热加载(应用状态不丢失),按R则重启应用。

注意:使用 Intellj 或 VS Code 等支持 Flutter 的编辑器,将具备保存文件后自动热加载等功能。

| |

结语

个人认为,Flutter学习吸收了PhoneGap/React Native等跨平台应用框架的优点,也或者说是将web开发领域的众多“先进理念”带入到移动应用开发中,让人有耳目一新的感觉 。希望 flutter 能够快速成长起来,成为未来移动开发的中坚力量。


#2

2015.10.19 更新:Sky => Flutter