Hello,Flutter!

昨天 Google 正式发布了其全新的跨平台 UI 开发框架 Flutter，这个框架从 2014 年就开始开发，致力于为 Google 即将发布的 Fuchsia OS 提供用户界面基础，如今终于发布了一个正式的版本，第一时间尝试了一下。

编译 & 安装

Flutter 没有提供 pre-built 的版本，需要自己从 GitHub 上 clone 下来自己编译。

比较有趣的是，Google 官方 WiKi 中竟然提供了 “Using Flutter in China” 这篇文章，国内的小伙伴在编译之前可以看看 [doge]。

编译的过程很简单，速度也很快，以我的网络状况和硬件状况，拉取仓库 + 安装依赖 + 编译总共耗时不超过 5 分钟，起步的体验很不错。

开发环境

测试用的开发环境我选择了 Intellij IDEA Ultimate Edition，配合 Dart 和 Flutter 插件。

安装好插件之后重启 IDEA，在 New Project 窗口中就可以看到 Flutter 项目的模板了，选择它创建就可以：

创建完项目后第一次编译耗时可能较长，但得益于 Flutter 的 Hot Reload 技术，在之后的开发中即可享受 ⌘S 后立即生效的体验。

我们来看看 Hello World 运行的效果：

第一个 Flutter 程序

由于我也是第一次接触这个框架，所以只能写一个很简单的程序：

import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xff333333),
title: const Text('Home'),
),
body: new Center(
child: const Text('Hello, Flutter!'),
),
),
));
}

在解释这段代码之前要提醒一下大家，如果想使用 Hot Reload 技术，你的代码修改不能动 main 函数，因为 main 函数所在的 module 不能热加载。

然后 Dart 中有一个 const 关键字，它的意思是创建一个不可变的对象，代码中所出现的

const Color(0xff333333)

意为创建一个不可变的 Color 对象，也就是说这个对象的任何内部变量都不可变，用这个关键字可以来让编译器优化代码性能。

Flutter 的思路颇似 React，框架通过构建 Widget Tree，在每次变更时对比前后状态，然后更新视图。runApp 函数则是用给定 Widget 来与屏幕正在显示的视图进行对比，然后更新有差异的部分。

这段代码的效果图：

好吧，这是一篇失败的文章

从未接触过 Flutter 的天真的我本打算边研究边写文章，结果发现这个框架跟我想象中的差异还是很大的，有很多 Concepts 要去了解，好在文档还比较全，不说了，看文档去了。

逃）