大家好，小弟飞狐。终于有时间来写Flutter的系列教程。这个Flutter实战系列里我会带领大家从零基础开始迈向高手进阶。让大家由浅入深，从入门变高手。好咯话不多说，首先我们由3W开始。
What Flutter？
Flutter是一款移动开发框架，而且是谷歌新一代系统Fuchsia的御用框架，旨在用自家语言Dart写一套代码就可以开发跨平台应用。当然，这个跨平台不只是IOS和Android，而至于Fuchsia的野心在这里我们也不聊。提到Flutter的跨平台特性，就不得不提基于C/C++编写的Flutter Engine，Flutter能够在iOS和Android上运行起来，依靠的正是这个引擎。
Flutter Engine是Flutter应用程序的运行环境，开发人员可以通过Flutter框架和API在内部进行交互。这里面有个很有棒的特点就是低延迟、高帧速率。大家可能会觉得，普通的APP运行流畅就可以了，那么高帧率太过剩啦，这里飞狐为大家准备了小彩蛋AR来辩证性的看这个很棒的特性。
先科普一下AR，AR是将真实环境与虚拟环境实时叠加到同一帧画面。通过摄像头获取真实环境，通过图形图像识别算法识别真实环境中的特定物体，结合数据分析，再将虚拟物体嵌入同一帧画面。
上面的介绍Flutter 基于Skia引擎控制渲染帧数。都不说今年谷歌演示的Flare动画作为widget嵌入到flutter中，如何激发了设计师们的热情了，单就说同是谷歌推出的Fuchsia 、ARCore再结合5G的浪潮。大家想想高帧速率对于AR的支持那可是起决定性作用的。也就是说飞狐在这里大胆的预测，这便是为之后用Flutter开发AR/VR应用埋下的伏笔。
上面这幅是Flutter框架结构图。对于开发者而言最常用的是widgets，因为APP里的元素都由widgets层来实现。Flullter有自己的一套内置的widgets，您甚至可以认为在Flutter里一切皆为组件。在图中大家可以看到Widgets上面有两种风格的组件库供您选择：
1.Material 就是大名鼎鼎的Material Design，是Google I/O 2014发布的设计语言，也是目前Android Mobile、Android Table、Desktop Chrome等平台的设计语言规范。前端的小伙伴们比较熟悉的Angular框架，官方提供的UI库也是Material。
2.Cupertino则是模拟的IOS设计。
接着往下看，Animation、Painting、Gestures这仨直译，大家也可以知道是动画、绘制、手势。
再往下看则是刚刚提到的Flutter Engine虚拟机。值得一提的是谷歌提供的Skia，因为Flutter的高帧速率正是因为采用了Skia引擎渲染。大家熟悉的Chrome浏览器、Android系统等也都用Skia进行绘制处理，包括图形图像、文本、动画等。
Why Flutter？
为什么要用flutter呢，讲到这个发展史，个人比较偏向由前端说开去。
首先，前端从最开始的PC端，到现在的小程序，APP，PWA等等，加上NodeJS、Deno等，可以说是将前端从工业化之后又掀向了另一个高潮。
这里我们单说移动端，从最开始的 WebApp 通过 WebView 加载本地网页，就像Cordova、Phonegap、Ionic等，小小的催催老一辈前端们的热泪。再到后面，react-native的时代，摒弃了WebView的方式，当时也是掀起了一阵小小的波澜。
同一时期的阿里也推出了Weex，也被不少小伙伴们追捧。Flutter也是借鉴了react-native思想，不一样的是青出于蓝而胜于蓝。理由如下图（其实比较中性，因为不太想吐槽）：
其次，对比Android，IOS来讲，作为未来系统Fuchsia的御用框架不说，通过Dart语言就能构建跨平台语言也不说。
我们就只谈Flutter的目标，不只是IOS和Android，而是不断探索将Flutter扩展到更多终端平台上。例如Flutter Desktop Embedding，这是一个能让Flutter 运行于 macOS、Linux 和 Windows 等桌面操作系统的项目。
再看看Hummingbird，基于Web 实现的Flutter运行时环境。通过Dart可编译JavaScript的特性，让Flutter开发的应用运行在标准Web平台且无需改动。
最后，Flutter本身的三大优势：
1.依赖Material Design，构建精美的UI界面设计。
2.基于Skia硬件加速图形引擎，低延迟输入、高帧速率，不只是媲美原生。
3.高效的开发效率，革命性的新特性Stateful Hot Reload，热重载对于前端应该是一点都不陌生了。
How Flutter？
好啦，怎样玩儿好flutter呢，飞狐会从这个实战系列开始，一个系列一个系列的让大家会从零开始感受flutter的魅力。每个系列也就6篇左右，给您的不单是实战一个APP，下个系列让您领略Flutter架构之美。首先配置环境等，请大家移步至配置篇。
配置好环境之后，大家需要记住三个基本的命令：
- 查看版本号：flutter --version
- 检查当前开发环境是否存在问题：flutter doctor
- 升级更新版本：flutter upgrade
紧接着，我们开始创建第一个 flutter 项目，步骤列表如下：
1.命令行中输入open -a simulator，打开xcode模拟器
2.打开vscode编辑器，快捷键 Ctrl + Shift + P 打开命令面板，然后输入flutter
3.选择 flutter：New Project 选项创建新项目
4.选择项目存放目录后便自动创建 flutter 项目
5.打开vscode终端，输入flutter run
再接再厉，这时候我们可以看到目录结构也非常清晰，这里我们先关注两个点：
1.lib文件夹，这是我们的工作文件夹，我们的开发文件之后都存放在这里，前端的小伙伴儿们可以当成src
2.pubspec.yaml文件，这是构建依赖包的文件，前端小伙伴儿们可以理解为package.json
打开lib文件夹可以看到main.dart，这就是我们上图对应的开发文件。现在清空这个文件，咱们从零开始，飞狐一步一步带您构建应用。步骤如下：
1.引入material组件包，箭头表达式的写法前端小伙伴比较熟悉，mian()是主函数，runApp()里是你要执行的应用敲入如下代码：
import 'package:flutter/material.dart'; // 引入material组件包
void main() => runApp(MyApp()); // 运行应用
class MyApp extends StatelessWidget {}
2.这么写，大家会发现类MyApp上有一个错误提示未实例build函数，我们改造一下，再加入一个文本控件，语法如下：
Text('文本内容', style: TextStyle(fontSize: 12))
import 'package:flutter/material.dart'; // 引入material组件包
void main() => runApp(MyApp()); // 运行应用
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '第一个应用哟', // 任务栏的标题
home: Text('hello world'), // 应用的主界面
theme: ThemeData(primarySwatch: Colors.red), // 配置应用主题
);
}
}
敲完上面的代码之后，在终端命令界面里按一下R，就自动刷新了。大家可以打开模拟器看看，变成了这幅模样。
3，接着我们加入脚手架组件Scaffold，脚手架主要包含部分为：
- 北丐导航条：appBar
- 中神通主体内容：body
- 西毒侧边栏：drawer
- 南帝导航栏：bottomNavigationBar
- 东邪浮动按钮：floatingActionButton
我们来实现一把，代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home: Scaffold(
appBar: AppBar(
title: Text('北丐'),
),
body: Center(
child: Text('中神通'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Text('东邪')
),
drawer: Drawer(),
),
);
}
}
这样我们就已经构建了一个应用的基本界面。这一回我们就讲到这里啦，非常基础。复盘一下，这一回我们对Flutter进行了基本的介绍，学了基础控件Scaffold和Text，其实还学了一个无状态组件StatelessWidget。
我们在 flutter领航系列02 中会详细介绍flutter组件的状态。
好啦，下回见，祝大家新年快乐耶(＾－＾)V
