我喜欢 Google Flutter

在 Google I/O ’17 上，Google 向咱们介绍了 Flutter —— 一款新的用于建立移动应用的开源库。

正如你所想的那样，Flutter 是可以帮助建立拥有漂亮 UI 界面的跨平台移动应用解决方案。Flutter 的界面设计与 web 应用相似，所以，你可以从 Flutter 上找到像使用 HTML/CSS 那样熟悉的感受。

Google 表示：

Flutter 将会帮你更容易，更快速的开发出界面美观的移动应用。

听起来很美好，可是首先要说的是，我对其余跨平台解决方案，诸如  Xamarin，PhoneGap，Ionic，React Native 等并非很承认。 你们都知道，这些解决方案互有利弊，很难选择。虽然我并不肯定 Flutter 是否会与它们有所不一样，可是我很期待。

 

为何要用 Flutter ？

你可能会好奇，而后问本身一个问题：

Flutter 有什么创新之处？它是如何工做的？与 React Native 有什么不一样之处？

我不会在这里讨论技术问题，由于其余人作得更好。若是你对 Flutter 的工做细节感兴趣，我建议你读读这篇文章：Flutter 的革命性创新是什么？你也能够在“ The Magic of Flutter ”演示中查看 Flutter 概念的总结。

简要来讲，Flutter 是一个移动 SDK ，容许咱们建立混合移动应用（这样你就能够编写一份代码，在 Android 和 iOS 均可以运行这个应用程序）。你在 Dart 中编写代码，这是一种由谷歌开发的语言，若是你之前用过 Java ，那看它会以为很是熟悉。你再也不须要用 XML 文件构建布局树，而是像这样：

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {  @override
  Widget build(BuildContext context) {    return new MaterialApp(
      title: "HelloFlutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("HelloFlutter"),
        ),
        body: new Container(
          child: new RaisedButton(onPressed: _handleOnPressed),
        ),
      ),
    );
  }
}

正如你所看到的，布局是由嵌套的组件（小部件）构建的。核心部件是 MaterialApp（这是整个应用程序），而后咱们有了 Scaffold （这是主要的布局结构），而后在里面咱们有 AppBar（像 Android 工具栏）和一些容器做为主体。在内部，咱们将放置布局小部件 —— 文本、按钮等。

 

#1 热重载

好的，如今就开始吧！

咱们从一个基本的应用开始。咱们有三个按钮，它们中的每个都能改变文本的颜色：

如今，咱们将会使用其中一个最酷的特性——热重载。它能让你的网页作到当即重建。看看效果：

回顾下咱们具体作了什么？咱们变动了一些代码（在按钮上的文本），当咱们点击“热重载”（在 IntelliJ IDE 的顶部）而且咱们能在短期内就看到结果。是否是很酷炫？

热重载不只仅快还智能——若是你有一些数据已经被显示（好比说，这个例子中的文本颜色），你能够在应用运行期间使用热重载改变 UI ：内容仍是同样的。

 

#2 全套小部件 (Material Design)

Flutter 的另外一个优势是，咱们有一个很是丰富的内置 UI 组件的目录。里面有两套小部件—— Material Design（针对 Android ）和 Cupertino（适用于 iOS ）。你能够选择并轻松实现你想要的任何东西。好比说若是想要建立一个新的浮动动做按钮，则能够像下面这样:

更棒的是，你能够在各个平台上实现任意的小部件。并且若是你已经实现了一些 Material Design 或 Cupertino 小部件，那么它在每一个 Android 和 iOS 设备上都是同样的。你不须要担忧在众多设备上看起来会有什么不一样。

 

#3 全部东西都是一个小部件

正如你在以前的 gif 中所看到的，建立 UI 很是简单。这得感谢 Flutter 的核心原则 —— 全部东西都是一个小部件。你的 app 类是一个小部件（MaterialApp），你的总体布局结构也是一个小部件（Scaffold），全部东西都是一个小部件（AppBar, Drawer, SnackBar）。想让视图居中？用 Center 就好（cmd/ctrl+Enter）！

有了 Fluter，建立 UI 就像用许多不一样的小部件组合布局同样简单。

Flutter 还有另一个核心原则，组合优先于继承。这意味着，若是你想要建立一些新的部件（widget），则可使用几个 Widget 组成新的 Widget ，而不是扩展示有的 Widget 类。

 

#4 Android / iOS 差别化主题

一般，咱们但愿咱们的 Android 应用与 iOS 应用不一样，不只在颜色上，并且在小部件的尺寸和样式上也有差别。在 Flutter 中能够用主题来实现这个目标：

正如你所看到的，咱们为工具栏（AppBar）设置了不一样的颜色和高度。咱们使用的是 Theme.of(Context).platform 参数来适配当前平台（android/ios）：

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {  @override
  Widget build(BuildContext context) {    return new MaterialApp(
        title: "HelloFlutter",
        theme: new ThemeData(
            primaryColor:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? Colors.grey[100]
                    : Colors.blue),
        home: new Scaffold(
          appBar: new AppBar(
            elevation:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? 0.0
                    : 4.0,
            title: new Text(              "HelloFlutter",
            ),
          ),
          body: new Center(child: new Text("Hello Flutter!")),
        ));
  }
}

 

#5 很是、很是、很是多的资源

虽然 Flutter 依然在 alpha 版，但 Flutter 的开发社区很是庞大并且参与度很高。正因如此 Flutter 才有了不少资源的支持（类库的形式，就像 Android 中的 Gradle 依赖包）。咱们有不少诸如开源图形、HTTP 请求、内容分享、存储参数、访问传感器、部署 Firebase 等等多种多样的类库。固然，每一个资源包都支持 Android 和 iOS 。Flutter库列表 - Flutter Awesome

 

如何开始呢？

若是你喜欢 Flutter ，想本身尝试一下，最好的办法就是打开 Google Codelabs ：

• 在这个网站中，你将了解建立布局的基础：用 Flutter 构建漂亮的 UI

• 若是想尝试更多的话，你能够试试 Flutter 的 Firebase