Flutter初识

一、Flutter是什么？

根据Flutter中文官网(英文官网)的解释：Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。使用的语言是Dart

tips:1.这段话直接摘抄自官网，这里我把英文和中文官网都放上了，有兴趣的根据自己选择进行阅读。因为有时候翻译过来的东西容易造成表意不明。

        2.本来这里应该提一下Google全新的操作系统Fuchsia的，因为Fuchsia 的官方应用框架就是 Flutter + Dart 但是因为才疏学浅，了解并不多，所以这里不打算展开讲了。

特点：

1.快速开发：Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。

        根据英文的写法应该是叫做Hot Reload。就比如我们平时做安卓开发有的地方本来只需要做一些简单的修改，你改完想看下效果，就得运行项目在模拟器或者手机上面，有些大型的项目编译起来就比较头疼，虽然现在有一些组件化的思想来解决这个问题，但是效果也不是尽善尽美。Flutter可以做过在亚毫秒级（官网是这么吹的）重新渲染界面，并且不会丢失状态，而不是重新运行整个项目（官网有演示）。

2.富有表现力，漂亮的用户界面：自带的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果。

        Flutter的所有Widgets目录。这里的Widgets就相当于android里面的View。不过他们肯定是有区别的，Widget仅支持一帧，并且在每一帧上，Flutter的框架都会创建一个Widget实例树(相当于一次性绘制整个界面)。 相比之下，在Android上View绘制结束后，就不会重绘，直到调用invalidate时才会重绘。在Flutter里面万物皆Widget，界面是Widget，普通控件也是Widget。这些组件我大致看了一下，基本上很多都是可以跟android组件类似或对应的。

        写过网页的小伙伴们看到这个Row和Colume可能会有点熟悉，因为这个概念就是从web那边搬过来的，而且Flutter的设计灵感也是从React那里来的。

3.响应式框架：使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。

        Flutter是采用响应式的框架来构建的，中心思想是用组件(widget)构建你的UI。组件描述了在给定其当前配置和状态时他们显示的样子。但是这里要注意的一点是，不像Android里的view是可以直接修改的，Flutter的设计理念里widget是不可变的，不会直接更新，而必须使用Widget的状态。

4.访问本地功能和SDK：Flutter可以复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

        字面意思，所以不解释。。。。。

5.统一的应用开发体验：Flutter拥有丰富的工具和库，可以帮助开发者轻松地同时在iOS和Android系统中实现想法和创意。

        说实话我不太相信。因为现在还是属于预览版阶段，完善的社区和使用群体都没有。我写这篇文章包括碰到问题的时候，百度基本上是找不到答案的，Google出来的全是英文。也是自己生啃了几篇英文的，才总结出来一些。

6.原生性能：Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

        这一块的话，自己还没正式开始写，也不好下定论，持观望态度。

二、Flutter和ReactNative的区别

       听我上面讲了这么多，肯定有人要说，两三年前ReactNative也是这么吹的，但是现在已经被拍死在沙滩上了。区别比较大的大一点就是ReactNative核心是通过Javascript开发，执行时需要Javascript解释器，UI是通过原生控件渲染。

      但是Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。 相反，Flutter使用自己的高性能渲染引擎来绘制widget。Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建。在IOS上，Flutter引擎的C/C ++代码使用LLVM编译，任何Dart代码都是AOT编译为本地代码的，Flutter应用程序使用本机指令集运行（不涉及解释器）。而在Android下，Flutter引擎的C/C ++代码是用Android的NDK编译的，任何Dart代码都是AOT编译成本地代码的，Flutter应用程序依然使用本机指令集运行（不涉及解释器）。因此，Flutter能达到原生应用一样的性能。

对比图：左边->ReactNative。                        右边->Flutter。

三、Flutter的运行环境配置

        环境的配置请参照官网的这篇说明Flutter环境配置，我也是照着这个配置。跟Androidsdk和jdk配置类似。

四、AndroidStudio创建Flutter项目。

 走到这一步的前提是你已经安装好了FLutter和Dart的运行环境，要不然就算你装了下面这两个插件也是没用的，切记，切记。安装两个插件，一个叫Dart，一个叫Flutter。推荐用as3.0以上的版本，因为我在2.x的版本失败了。

        这里直接搜Flutter点击Install就可以了，他会提示你去安装Dart，然后一直确定就可以了，安装好之后重启。在as左上角Flie->New这里就会出现这个东西

        点一下创建Flutter项目，里面会让你填Flutter SDK的路径，这个路径一定要弄对，就是Flutter的文件夹全路径。项目名，项目路径什么的就随你喜欢了。创建成功之后里面是这样子的

        如果熟悉ReactNative的朋友对这些目录并不会陌生，因为Flutter和那个类似，这里大概分四个文件夹，android就是表示安卓程序的入口，跟我们平时创建的安卓项目很像，不过他这里的MainActivity继承的是FlutterActivity。ios当然就是ios程序入口，lib就是主要代码逻辑所在的地方，安卓和ios都是用这里的同一套的代码的，可以看到文件结尾是.dart。test就是测试的。

       接下来我们打开main.dart文件，就像我们创建一个安卓项目一样，里面肯定不是空的，是有一些自带的dart代码的。

这一段就是上面提到过的Dart语言了，可以看到其实不是特别美观。这个main.dart把我吓到了，我什么都还没写，直接一打开算上注释接近150行。这里我去掉了一些多余的注释，留下了一些简单的，应该看注释就大概能知道每一部分是干啥的了。说实话有些部分我暂时也不清楚是干啥的，不过先不管了，运行一下再说。

根据这个运行后的图片再去看上面的一个个class就大概可以看得懂了：

        1、void main() => runApp(new MyApp());指定程序的入口，在这里就是MyApp，这个比较像ReactNative里面ES6的写法。

        2、第一个class MyApp就是指定图片上最上面那个“Flutter Demo Home Page”的主题，颜色，字体的。在这里他是无状态的（StatelessWidget)。

        3、第二个class MyHomePage创建了一个有状态的Widget（StatefulWidget），并通过这段代码_MyHomePageState createState() => new _MyHomePageState();去指定管理他状态的类，也就是第三个class，可以看到他们的名字是对应的。

        4、第三个class _MyHomePageState()就是改变状态的代码，也就是渲染界面的实际代码，因为上面我们说了Widget是通过改变状态来控制的。里面的build就是主入口了，可以看到里面有appBar,body,floatingActionButton之类的，每一个后面跟着他们的的文本大小啊，文本内容。排列方式什么的。就相当于我们在安卓开发中xml文件里面的内容，Flutter都是写在代码上面的。

tip:解释一下这个有状态和无状态的意思：

        StatelessWidget，这个的特点是静态，页面中的数据一旦渲染后，就不能在更改，一般用于显示静态页面。

        StatefulWidget，则是可以改变状态的Widget，页面的显示随着状态改变而改变。通过setState方法可以非常方便的修改页面状态，与现在web动态绑定框架是类似的。

五、总结

暂时先告一段落了，自己也是这两天才开始正式了解这个东西。先是打算从一个大致的结构先去理解这个东西是啥。然后再从语法和组件去学习。接下来打算学习一些有关Dart语言的内容，Flutter被诟病最多也是这个问题，为什么要采用可读性这么差的Dart的语言，说实话，我也觉得Dart语言比较难看。。。。。但是另一个我认为更困难的地方就是现在能找到的教程和文章大多数都是英文的，我也是翻译了一部分，如果觉得我说的不好。我在参考里面会贴上一些我找到的英文文章。可以自行浏览。不过强烈推荐的还是我上面给出的Flutter中文网，真的非常非常详细。

参考教程：

awesome-flutter（这里我找到的翻译过后的版本，不过很可惜里面的资料是全英文，有些还需要科学上网，我文章一部分就是从这里翻译过来的）

flutter的Github地址（Flutter的源码地址）

Dart语言教程（一篇相对来说比较好的Dart教程）

Flutter for Android（写给android开发者看的Flutter教程，写的非常好！）

Flutter专栏（CSDN上的Flutter专栏，建议从最后一页开始阅读）