Flutter教程(一)Flutter概览

Flutter官网点击访问

作为2018世界移动大会的内容之一，Google发布了Flutter的第一个 beta 版本。Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量的原生应用的全新移动 UI 框架。现在就可以去 flutter.io快速上手开发精美的原生应用。

首先我们要理解什么是跨平台。

什么是跨平台？如果你是移动开发者的话，应该知道 Android 是使用 Java\Kotlin 语言来开发而 iOS 则是 OC\Swift来开发。各大科技圈大佬们都在绞尽脑汁的想统一这两个平台，无论 Android 还是 iOS 都是移动端，若能统一用一套语言开发应用那最好不过的。这也正是跨平台的意思，简单的说就是你写的同一套代码可以运行在不同的平台。不仅能够大大加快开发的进度，同时也能减少人力成本的投入。

Flutter就是在这种理念中诞生出的跨平台框架。

Flutter 的目标是解决移动开发中的两个重要问题：
1. 实现原生应用的性能和与平台的集成
2. 提供一个多平台，可移植的 UI 工具包来支持高效的应用开发。

Flutter与ReactNative的区别？

一个是 Facebook 推出两年多的 ReactNative ，另一个则是 Google 这种顶级科技公司的产品Flutter。那么它们有什么区别呢？

看过ReactNative源码的朋友都应该知道，RN中的组件都继承自Native View组件。例如：ReactNative 中的 ListView 在 Android 中就是继承自 ListView ，还有 RecycleView。

而Flutter则不同，它的所有 UI 组件都是一帧一帧画出来的。这样能够很准确并且很灵活的做出你想要的 UI 。

Flutter 使用 Dart语言开发而 ReactNative 则使用 JS 结合 XML 来开发的。

估计说道Dart语言，很多朋友都不知道。其实，我也是刚刚知道。。。

下面就说道说道Dart语言。

基于Dart语言开发的Flutter框架

dart语言是由谷歌公司开发的网络编程语言，于2011年10月10日发布。谷歌2010年内部备忘录显示，Dart的目标就是要代替JavaScript网络开发通用语言的地位。

然而，那么多年过去了。。。今天却以这种方式出现

先来看段代码

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            new Image.network(
              'https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg',
            )
          ],
        ),
      ),
      persistentFooterButtons: <Widget>[new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ) ]
      ,
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.

    );
  }
}

是不是还在各种括号和嵌套中魂牵梦绕呢？

直观感受就是没有RN写起来那么简洁明了。

在知乎上看到的一个真实的段子

为什么Flutter 用 Dart 开发在会后，我也主动的去找 Flutter 的开发专家 Divod 聊了会。我问到他一个问题，我说为什么你们会选择用 Dart 语言来开发而不选择用XML 和 JS ，从刚才您的代码示例上我的第一感觉就是没有 ReactNative 的可读性高。大家也许觉得我太大胆，在 Google 的场子提 Facebook 的东西。但技术毕竟是技术，程序员何苦为难程序员，这是一场技术的交流。最后，他也给了我一个满意和无力反驳的答案，“因为 Dart 的开发团队就在他们旁边，他们能给到我们很快的支持。我们能很快沟通到”。所以我也就默认了 Flutter 注定会一直使用 Dart 这门语言。

Flutter的优点

1. 跨平台的优点不必多说
2. Flutter默认Meteria UI，开发起来贼溜
3. hot reload的开发模式非常方便，基本上做到实时查看改变的UI
4. 将来发布的 Fuchsia OS 就钦定了 Flutter 作为 UI Toolkit
5. 从性能上来讲，Flutter是加分的。

Flutter的缺点

1. 使用Dart开发容易造火箭
2. 目前处于beta版本，商业化的话还需要再等等。。。鬼知道什么时候
3. 对于IOS UIKit来说，Flutter Meterial Design还不能取代之,只能作为一种补充。
4. 在Android 平台上，一个架构的SO居然要7M左右，简直不能忍。

对于Flutter我还是持乐观态度的，但是就看Google努力否了。如果能像Tensorflow或者Golang那样流行就好了。想玩的童鞋可以持续关注Flutter的动向，如果想要运用到商业项目上还是等等吧。

Flutter教程 (二)Flutter安装及运行