一、认识Flutter

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

Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用

并且Flutter是完全免费、开源的。

跨平台：现在Flutter至少可以跨4种平台，甚至支持嵌入式开发。常用的有Linux、Android、IOS，甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方扩展，甚至可以跑在MacOS和Windows上，到目前为止，Flutter算是支持平台最多的框架了，良好的跨平台性，直接带来的好处就是减少开发成本。
原生用户界面： 它是原生的，让我们的体验更好，性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知，为您的用户带来全新的体验。（可以看一下图片，这是Flutter的表现）
开源免费：这个不用多说，只要学会并使用，这些都是免费的。

主流框架对比

Cordova：个人认为Flutter可以完胜了，因为Cordova还是基于网页技术进行包装，利用插件的形式开发移动应用的，就这一点。无论是性能还是体验，Flutter都可以完胜了。
RN（React Native）：RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。
Flutter：吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染。

二、下载安装 FlutterSDK

官网下载Flutter安装包，下载地址:https://flutter.io/sdk-archive/#windows
将安装包zip解压到你想安装Flutter SDK的路径（如： E:\fluter\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。
在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。
配置环境变量，Flutter的执行是要进行联网的，由于国内的原因，所以你需要设置环境变量，path路径。
可以通过Flutter doctor进行flutter安装环境检测。
安装Android Studio
详细参考：https://jspang.com/detailed?id=41

三、vcs下使用Flutter

安装flutter插件

使用dos命令开启虚拟机运行环境

现在想开启虚拟机需要打开Android Studio,然后再打开AVD虚拟机，下面就用一条命令，或者说制作一个批处理文件，来直接开启AVD虚拟机，这样就不用再等两分钟来开启Android Studio了。

开启虚拟机需要两个步骤：

打开emulator.exe这个程序，可以利用windows的查找工具进行查找。
打开设置的虚拟机，批处理时需要填写你设置的虚拟机名称。

具体步骤如下：

新建一个xxx.bat文件到桌面，xxx的意思是，你可以自己取名字，随意叫什么都可以。我这里叫EmulatorRun.bat.
查找emulator.exe文件的路径，把查找到的路径放到bat文件中，你一般会查找到两个emulator.exe文件，一个是在tools目录下，一个是在emulator目录下，我们选择emulator目录下的这个,复制它的路径。
1
C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe
打开Android Studio，并查看你的AVD虚拟机名称，
然后根据你复制的名称，把bat文件输入成如下形式。
1
C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28
进行保存后双击bat文件，就可以迅速打开虚拟机了。

参数解释：

-netdelay none :设置模拟器的网络延迟时间，默认为none，就是没有延迟。
-netspeed full: 设置网络加速值，full代表全速。

flutter run开启

在模拟器也有了，VSCode也支持Flutter开发了.现在可以在VSCode中直接打开终端，快捷键是ctrl+~，然后在终端中输入下面的命令。

1	flutter run

经过短暂的编译后就会启动程序了。

四、hello flutter

先快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色bar条和屏幕中间区域的内容。

这段代码写在根目录\lib\main.dart文件中，这就是Flutter主文件。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Welcome to Flutter'),
          ),
          body: const Center(
            child: Text('Hello Flutter1111111111111'),
          )),
    );
  }
}