随着纯客户端到Hybrid技术，到RN&Weex，再到如今的Flutter技术，客户端实现技术不断前进。在之前的一个APP项目中，由于历史缘由当时选择了weex，随着使用的不断深入，我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。而Flutter技术的不断成熟和流行，Flutter的良好的跨平台性和高性能优点，不断吸引着我们。

1.Flutter是啥玩意儿？

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

具有跨平台开发特性，支持IOS、Android、Web三端。
热重载特性大大提高了开发效率
自绘UI引擎和编译成原生代码的方式，使得系统的运行时的高性能成为了可能
使用Dart语言，目前已经支持同时编译成Web端代码，

到底值不值得跟进Flutter技术呢？看下图吧！

入门 Flutter

GitHub排行第7的技术，能不学吗？

苦逼的前端就是这样，你不跟潮流，潮流就会把你抛弃。

2.Flutter性能

为了达到极致性能，Flutter前进了一步，Flutter代码编译完成后来，直接就是原生代码，并且使用自绘UI引擎原生方式做渲染。 Flutter依赖一个Skia 2D图形化引擎。Skia也是Android平台和Chrome的底层渲染引擎，所以性能方面完全不用担心。由于使用Dart做AOT编译成原生，自然也比使用解释性的JS在V8引擎中执行性能更快，并且由于去掉Bridge，没有了繁琐的数据通信和交互，性能就更前进了一步。

3.Dart语言

学习Flutter，得先了解Dart。Dart语言曾经雄心勃勃的要替换Javascript, 但是发布的时机正好遇到JS的飞速发展，于是就逐渐沉寂，直到配合Flutter的发布，才又重新焕发了生机。

4.环境配置

无论学什么新语言，第一都是环境配置。由于Flutter出自Google，所以有必定门槛。

安装教程，参照官网。
https://flutter.dev/docs/get-started/install

Flutter支持多种编辑器如：Android Studio , XCode。但是既然作为支持跨双端的开发，个人还是推荐使用 VSCode。

VSCode安装完成后，需要安装Flutter插件和Dart插件. 在扩展窗口里，搜索Flutter，和Dart，点击“Install”即可，超级方便。

入门 Flutter

5.Hello World

作为一个伟大的程序员，第一行代码总是从Hello World开始。^_^

5.1 创建项目：

方法1：直接使用命令创建：

flutter create projectname

方法2：使用VSCode创建:

View -> Command Palette -> Flutter:New Project 即可

入门 Flutter

注意请先打开代理，否则你的创建进度，会一直被卡住。

5.2 项目结构

将项目先拖入VSCode，看下目录结构。自动创建完成的项目中，我们看到已经自带了Android，IOS相关的运行环境。

入口主文件是main.dart. 可以打开来先熟悉下，暂时不了解没关系，后面再讲。

还有一个重大的文件是pubspec.yaml ，是项目的配置文件，这个后续也会做修改。

入门 Flutter

5.3 启动模拟器

点击VSCode右下角的模拟器，启动模拟器。(VSCode会自动找到Android环境、IOS环境下的模拟器，以及真机环境)

入门 Flutter

5.4 启动项目APP

入门 Flutter

选中Main.dart，点击Debug-> Start Debugging , 项目就会启动调试，并在模拟器里运行。

入门 Flutter

5.5 简化版的Hello World

讲道理，Flutter一上来就用StatefulWidget做一个自增的Demo，实则是对新手不太友善。我还是喜爱循序渐进，先删掉那些复杂的自增逻辑，我们基于StatelessWidget 只做一个最简单的静态页面显示。（什么是StatefulWidget 和StatelessWidget？后面会说）

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
   @override
  Widget build(BuildContext context) {
       return Scaffold(
            appBar: AppBar(
              title: Text("我是Title"),
            ),
            body: Center(
                    child: Text(
                        'Hello World',
                    )
            )
      );
  }  
}