Flutter领航系列篇01

大家好,小弟飞狐。终于有时间来写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中,如何激发了设计师们的热情了,单就说同是谷歌推出的FuchsiaARCore再结合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领航系列02 中会详细介绍flutter组件的状态。

好啦,下回见,祝大家新年快乐耶(^-^)V

推荐阅读更多精彩内容