Flutter 基础（二）Flutter 开发环境搭建和 Hello World

前言#

其实没想写 Flutter 的相关文章的，因为这些看官方文档就够了，但是有不少同学就想看我写的，因此我也写个 Flutter 系列，顺便自己也梳理下知识点。这个 Flutter 基础系列是 Flutter 系列的入门系列，后面还会有其他的 Flutter 系列。既然要学习 Flutter 肯定要先学习环境的搭建，可以在 Windows、MAC、Linux 上来进行 Flutter 开发，由于本系列文章是面向 Android 开发来编写的，因此选择大部分人的都有的 Windows 平台。

本篇文章的目录为：

1. Flutter 概述
2. Flutter 开发环境搭建
3. 运行一个 Flutter Demo
4. Hello World

1.Flutter 概述#

Flutter 是谷歌的移动 UI 框架，可以快速在 Android 和 iOS 上构建高质量的原生用户界面， 它的前身是谷歌试验项目 Sky。主要有以下几个特点：
符合各个平台的用户体验
Flutter 内置了 Material Design 和 Cupertino 风格（iOS 风格）的 Widgets，使得我们可以开发出符合 Android 和 iOS 风格的应用，另外 Flutter 提供了丰富的 motion API、平滑而自然的滑动效果和平台感知，为用户带来全新体验。

响应式框架
使用 Flutter 的响应式框架和一系列基础 widget，可以轻松构建您的用户界面。使用功能强大且灵活的 API（针对 2D、动画、手势、效果等）可以帮助开发者解决艰难的 UI 挑战。

跨平台自绘引擎
Flutter 与 Hybrid App、React Native 这些跨平台技术不同，Flutter 既没用使用 WebView，也没有使用各个平台的原生控件，而是本身实现一个统一接口的渲染引擎来绘制 UI，这样做可以保证不同平台 UI 的一致性。另外采用自绘引擎后，Flutter 在布局过程中不需要像 RN 那样要在 JavaScript 和 Native 之间通信，可以节省性能开销。Flutter 使用 Skia 作为其 2D 渲染引擎，Skia 是 Google 的一个 2D 图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia 是跨平台的，并提供了非常友好的 API。
关于 Flutter 与其他跨平台技术的区别可以查看移动开发的跨平台技术演进这篇文章。
采用 Dart 开发
Flutter App 采用 Dart 语言来开发。与 JavaScript 相比，Dart 在 JIT（即时编译）模式下，速度与 JavaScript 基本持平。但是当 Dart 以 AOT 模式运行时，Dart 性能要高于 JavaScript。

访问本地功能和 SDK 并支持插件
Flutter 可以复用 Java、Swift 或 ObjC 代码，访问 Android 和 iOS 上的原生系统功能。另外通过 Flutter 插件也可以访问原生系统功能，比如蓝牙、相机、WiFi 等等。

2.Flutter 开发环境搭建#

在 Windows 平台开发的话，官方的环境要求是 Windows 7 SP1 或更高版本（64 位），至少 400 MB 的硬盘空间，如果是在 Mac 和 Linux 上搭建开发环境请查看官方文档。

2.1 安装 Git for Windows 和 PowerShell 5.0#

Git for Windows 下载地址为：https://git-scm.com/download/win，如果此前安装过，win + R 输入 cmd，在 cmd 中输入 git 命令来验证下，比如 git --version。
PowerShell 是微软推出的代替 cmd 的更方便的命令行工具，win7、win8、win10 系统都自带有这个命令行工具。右键点击 WIn10 的开始按钮搜索 PowerShell，如果没有，去 powershell 官网下载 PowerShell，地址为：https://docs.microsoft.com/zh-cn/powershel...

2.2 下载 Flutter SDK#

下载 Flutter SDK 有多种方法，看看哪种更适合自己：

1. flutter 官网下载最新 Beta 版本的进行安装：https://flutter.dev/docs/development/tools...
2. Flutter github 项目中去下载，地址为：https://github.com/flutter/flutter/releases。
3. 通过 git 命令来下载 Flutter 的 beta 版：

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

这里下载最新的 Beta 版本就可以了。

将下载下来的 zip 安装包解压到你想安装 Flutter SDK 的路径，比如：F:\Flutter。需要注意的是，不要将 flutter 安装到需要一些高权限的路径，比如 C:\Program Files\。

2.3 配置环境变量#

配置 flutter 环境变量
如果想在命令行中使用 flutter 命令，需要添加 flutter 的路径到系统变量 path 中。
我的 flutter 路径为 F:\Flutter\flutter，那么就将 F:\Flutter\flutter\bin 放到系统变量 path 中。

在 cmd 中输入 flutter --version 来验证是否配置成功。

配置国内镜像

如果在国内安装或使用 Flutter，使用 Flutter 的官方镜像或者其他镜像能够免于限制并且加快速度，Flutter 的官方镜像为

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

这两个镜像是会变的，具体可以查看官方说明：https://flutter.dev/community/china
除此之外还有上海交通大学 Linux 用户组：

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

这里使用 Flutter 的官方镜像，将这两个 url 配置到用户环境变量中：

2.4 安装和检查各种依赖项#

打开 cmd 输入如下命令：

flutter doctor
Copy

这时会打印一些提示信息：

可以看到有五个类别的依赖项，如果安装的 IDE 不同，类别内容也会不同。其中√是没有问题的类别，！指的是有问题的类别。

1. Flutter 的版本和运行环境
2. Android 的工具链的情况
3. Android Studio 的版本，以及 Flutter 插件安装情况
4. IntelliJ IDEA Community 的版本，以及 Flutter 插件安装情况
5. 设备的连接情况

安装任何缺少的依赖项后，可以再次运行 flutter doctor 命令来验证是否已正确设置所有内容。比如第二项有问题，上面提示可以运行 flutter doctor --android-licenses 来解决，照做后，再次运行 flutter doctor 命令，打印的提示信息会变为：

2.5 设置编辑器#

安装 Android Studio 或者 IntelliJ IDEA
安装 Android Studio 的过程我就不多说了，需要安装 3.0 或者更高的版本。没有下载的去这里下载：https://developer.android.google.cn/studio...

除了 Android Studio 还可以使用 IntelliJ IDEA：
IntelliJ IDEA Community, 2017.1 版本或更高版本
IntelliJ IDEA Ultimate, 2017.1 版本或更高版本
下载地址为：https://www.jetbrains.com/idea/download/#s...

安装 Flutter 和 Dart 插件
Android Studio 的 File –> settings –> Plugins –> Browse repositories，在搜索框输入 Flutter 和 Dart 来安装它们。

安装成功后重启 Android Studio。这时 cmd 输入 flutter doctor 命令，就会看到提示信息的 Android Studio 的版本依赖项为√。

2.6 设置 Android 设备和模拟器#

设置 Android 设备和开发 Android 一样，需要注意的的是，这个设备的应该为 Android 4.1（API 级别 16）或更高版本。
模拟器选择 Android Studio 和 Genymotion 创建的都可以，推荐使用 x86 或者 x86_64 镜像。
至于怎么连接设备和创建模拟器就不讲了，不是本文的重点。

3. 运行一个 Flutter Demo#

Android Studio 菜单栏的 File –> New Flutter Project，选择 Flutter application：

Project name 需要小写，接着设置 Flutter SDK 的位置和项目的位置，如果没有下载 Flutter SDK，可以点击 install SDK 下载，如下图所示。

项目创建完成后，在 Android Studio 顶部的工具栏中的目标选择器里选择要运行的设备或者模拟器，我这里选择的是 Genymotion 创建的 Custom Phone (Android 9.0)。

单击工具栏中的运行图标，或调用菜单项的 Run –>Run ‘main.dart’ 运行 Flutter Demo，效果如下图所示。

热重载
Flutter 提供了快速开发周期和热重载，能够重新加载一个实时运行的应用程序的代码，而无需重新启动或丢失应用程序状态，我们来做个实验。
打开 lib/main.dart，将字符串 You have pushed the button this many times，改为 You have clicked the button this many times。
然后 Save All 或者点击工具栏中的黄色闪电图标，就可以发现字符串更新了我们修改的值。

4.Hello World#

将 lib/main.dart 中的所有代码替换为如下内容：

import 'package:flutter/material.dart';//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: Text('Welcome to Flutter'),
 ),
 body: Center(//4
 child: Text('Hello World'),
 ),
 ),
 );
 }
}
Copy

这时 Flutter 的 Hello World 就大功告成了。下面对代码进行简单的讲解：

1. 注释 1 处用来引入 Material Design 设计风格的基础包，每一个 dart 文件几乎都会引入它，Flutter 中提供了丰富的 Material widgets。
2. 注释 2 处的 main 方法是 Dart 程序的入口，使用了 => 符号，这是 Dart 中单行函数或方法的简写，等价于如下代码：

    void main(){
    return runApp(Widget app);
    }
Copy

runApp 方法是 Flutter 框架的入口，如果不返回 runApp 方法，那么执行的是一个 Dart 控制台应用。

1. 注释 3 处说明 MyApp 继承了 StatelessWidget，这会使应用本身也成为一个 widget。Flutter 中有一切皆 widget 的概念，widget 分为 StatelessWidget（无状态 widget）和 StatefulWidget（有状态 widget）。
2. build 方法用来描述如何用其他较低级别的 widget 来显示自身。
3. MaterialApp 包含了 App 实现 Material Design 所需要的一些 widget，其中 title 为在任务管理窗口中所显示的应用名字，home 为应用默认显示的界面 widget。
4. Scaffold 是 Material Design 布局结构的基本实现，Scaffold 内部包含了 appBar 和 body，appBar 为应用程序栏，它在 Scaffold 的顶部；body 为 Scaffold 的主要内容，通俗来讲就是屏幕的大部分。注释 4 处，body 包含了一个 Center widget，Center widget 中有一个子 widget Text，这样字符 Hello World 就会显示在 body 的中心。

本作品采用《CC 协议》，转载必须注明作者和本文链接