大家好，小弟飞狐。终于有时间来写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是将真实环境与虚拟环境实时叠加到同一帧画面。通过摄像头获取真实环境，通过图形图像识别算法识别真实环境中的特定物体，结合数据分析，再将虚拟物体嵌入同一帧画面。

Flare动画

上面的介绍Flutter 基于Skia引擎控制渲染帧数。都不说今年谷歌演示的Flare动画作为widget嵌入到flutter中，如何激发了设计师们的热情了，单就说同是谷歌推出的Fuchsia 、ARCore再结合5G的浪潮。大家想想高帧速率对于AR的支持那可是起决定性作用的。也就是说飞狐在这里大胆的预测，这便是为之后用Flutter开发AR/VR应用埋下的伏笔。

Flutter框架结构图

上面这幅是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思想，不一样的是青出于蓝而胜于蓝。理由如下图（其实比较中性，因为不太想吐槽）：

Flutter框架对比

其次，对比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，热重载对于前端应该是一点都不陌生了。

Flutter 官网案例

How Flutter？

好啦，怎样玩儿好flutter呢，飞狐会从这个实战系列开始，一个系列一个系列的让大家会从零开始感受flutter的魅力。每个系列也就6篇左右，给您的不单是实战一个APP，下个系列让您领略Flutter架构之美。首先配置环境等，请大家移步至配置篇。

配置好环境之后，大家需要记住三个基本的命令：

• 查看版本号：flutter --version
• 检查当前开发环境是否存在问题：flutter doctor
• 升级更新版本：flutter upgrade

Flutter --version

紧接着，我们开始创建第一个 flutter 项目，步骤列表如下：
1.命令行中输入open -a simulator，打开xcode模拟器
2.打开vscode编辑器，快捷键 Ctrl + Shift + P 打开命令面板，然后输入flutter
3.选择 flutter：New Project 选项创建新项目
4.选择项目存放目录后便自动创建 flutter 项目
5.打开vscode终端，输入flutter run

Flutter 初始化界面

再接再厉，这时候我们可以看到目录结构也非常清晰，这里我们先关注两个点：
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，就自动刷新了。大家可以打开模拟器看看，变成了这幅模样。

Flutter Text组件

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组件

这样我们就已经构建了一个应用的基本界面。这一回我们就讲到这里啦，非常基础。复盘一下，这一回我们对Flutter进行了基本的介绍，学了基础控件Scaffold和Text，其实还学了一个无状态组件StatelessWidget，我们在后面文章中会详细介绍flutter组件的状态。

好啦，下回见，祝大家新年快乐耶(＾－＾)V

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/18390.html