大家好，小弟飛狐。終于有時間來寫Flutter的系列教程。這個Flutter實(shí)戰(zhàn)系列里我會帶領(lǐng)大家從零基礎(chǔ)開始邁向高手進(jìn)階。讓大家由淺入深，從入門變高手。好咯話不多說，首先我們由3W開始。

What Flutter？

Flutter是一款移動開發(fā)框架，而且是谷歌新一代系統(tǒng)Fuchsia的御用框架，旨在用自家語言Dart寫一套代碼就可以開發(fā)跨平臺應(yīng)用。當(dāng)然，這個跨平臺不只是IOS和Android，而至于Fuchsia的野心在這里我們也不聊。提到Flutter的跨平臺特性，就不得不提基于C/C++編寫的Flutter Engine，F(xiàn)lutter能夠在iOS和Android上運(yùn)行起來，依靠的正是這個引擎。

Flutter Engine是Flutter應(yīng)用程序的運(yùn)行環(huán)境，開發(fā)人員可以通過Flutter框架和API在內(nèi)部進(jìn)行交互。這里面有個很有棒的特點(diǎn)就是低延遲、高幀速率。大家可能會覺得，普通的APP運(yùn)行流暢就可以了，那么高幀率太過剩啦，這里飛狐為大家準(zhǔn)備了小彩蛋AR來辯證性的看這個很棒的特性。
先科普一下AR，AR是將真實(shí)環(huán)境與虛擬環(huán)境實(shí)時疊加到同一幀畫面。通過攝像頭獲取真實(shí)環(huán)境，通過圖形圖像識別算法識別真實(shí)環(huán)境中的特定物體，結(jié)合數(shù)據(jù)分析，再將虛擬物體嵌入同一幀畫面。

Flare動畫

上面的介紹Flutter 基于Skia引擎控制渲染幀數(shù)。都不說今年谷歌演示的Flare動畫作為widget嵌入到flutter中，如何激發(fā)了設(shè)計師們的熱情了，單就說同是谷歌推出的Fuchsia 、ARCore再結(jié)合5G的浪潮。大家想想高幀速率對于AR的支持那可是起決定性作用的。也就是說飛狐在這里大膽的預(yù)測，這便是為之后用Flutter開發(fā)AR/VR應(yīng)用埋下的伏筆。

Flutter框架結(jié)構(gòu)圖

上面這幅是Flutter框架結(jié)構(gòu)圖。對于開發(fā)者而言最常用的是widgets，因?yàn)锳PP里的元素都由widgets層來實(shí)現(xiàn)。Flullter有自己的一套內(nèi)置的widgets，您甚至可以認(rèn)為在Flutter里一切皆為組件。在圖中大家可以看到Widgets上面有兩種風(fēng)格的組件庫供您選擇：
1.Material 就是大名鼎鼎的Material Design，是Google I/O 2014發(fā)布的設(shè)計語言，也是目前Android Mobile、Android Table、Desktop Chrome等平臺的設(shè)計語言規(guī)范。前端的小伙伴們比較熟悉的Angular框架，官方提供的UI庫也是Material。
2.Cupertino則是模擬的IOS設(shè)計。
接著往下看，Animation、Painting、Gestures這仨直譯，大家也可以知道是動畫、繪制、手勢。
再往下看則是剛剛提到的Flutter Engine虛擬機(jī)。值得一提的是谷歌提供的Skia，因?yàn)镕lutter的高幀速率正是因?yàn)椴捎昧薙kia引擎渲染。大家熟悉的Chrome瀏覽器、Android系統(tǒng)等也都用Skia進(jìn)行繪制處理，包括圖形圖像、文本、動畫等。

Why Flutter？

為什么要用flutter呢，講到這個發(fā)展史，個人比較偏向由前端說開去。

首先，前端從最開始的PC端，到現(xiàn)在的小程序，APP，PWA等等，加上NodeJS、Deno等，可以說是將前端從工業(yè)化之后又掀向了另一個高潮。
這里我們單說移動端，從最開始的 WebApp 通過 WebView 加載本地網(wǎng)頁，就像Cordova、Phonegap、Ionic等，小小的催催老一輩前端們的熱淚。再到后面，react-native的時代，摒棄了WebView的方式，當(dāng)時也是掀起了一陣小小的波瀾。
同一時期的阿里也推出了Weex，也被不少小伙伴們追捧。Flutter也是借鑒了react-native思想，不一樣的是青出于藍(lán)而勝于藍(lán)。理由如下圖（其實(shí)比較中性，因?yàn)椴惶胪虏郏?/p> Flutter框架對比

其次，對比Android，IOS來講，作為未來系統(tǒng)Fuchsia的御用框架不說，通過Dart語言就能構(gòu)建跨平臺語言也不說。
我們就只談Flutter的目標(biāo)，不只是IOS和Android，而是不斷探索將Flutter擴(kuò)展到更多終端平臺上。例如Flutter Desktop Embedding，這是一個能讓Flutter 運(yùn)行于 macOS、Linux 和 Windows 等桌面操作系統(tǒng)的項(xiàng)目。
再看看Hummingbird，基于Web 實(shí)現(xiàn)的Flutter運(yùn)行時環(huán)境。通過Dart可編譯JavaScript的特性，讓Flutter開發(fā)的應(yīng)用運(yùn)行在標(biāo)準(zhǔn)Web平臺且無需改動。

最后，F(xiàn)lutter本身的三大優(yōu)勢：
1.依賴Material Design，構(gòu)建精美的UI界面設(shè)計。
2.基于Skia硬件加速圖形引擎，低延遲輸入、高幀速率，不只是媲美原生。
3.高效的開發(fā)效率，革命性的新特性Stateful Hot Reload，熱重載對于前端應(yīng)該是一點(diǎn)都不陌生了。

Flutter 官網(wǎng)案例

How Flutter？

好啦，怎樣玩兒好flutter呢，飛狐會從這個實(shí)戰(zhàn)系列開始，一個系列一個系列的讓大家會從零開始感受flutter的魅力。每個系列也就6篇左右，給您的不單是實(shí)戰(zhàn)一個APP，下個系列讓您領(lǐng)略Flutter架構(gòu)之美。首先配置環(huán)境等，請大家移步至配置篇。

配置好環(huán)境之后，大家需要記住三個基本的命令：

• 查看版本號：flutter --version
• 檢查當(dāng)前開發(fā)環(huán)境是否存在問題：flutter doctor
• 升級更新版本：flutter upgrade

Flutter --version

緊接著，我們開始創(chuàng)建第一個 flutter 項(xiàng)目，步驟列表如下：
1.命令行中輸入open -a simulator，打開xcode模擬器
2.打開vscode編輯器，快捷鍵 Ctrl + Shift + P 打開命令面板，然后輸入flutter
3.選擇 flutter：New Project 選項(xiàng)創(chuàng)建新項(xiàng)目
4.選擇項(xiàng)目存放目錄后便自動創(chuàng)建 flutter 項(xiàng)目
5.打開vscode終端，輸入flutter run

Flutter 初始化界面

再接再厲，這時候我們可以看到目錄結(jié)構(gòu)也非常清晰，這里我們先關(guān)注兩個點(diǎn)：
1.lib文件夾，這是我們的工作文件夾，我們的開發(fā)文件之后都存放在這里，前端的小伙伴兒們可以當(dāng)成src
2.pubspec.yaml文件，這是構(gòu)建依賴包的文件，前端小伙伴兒們可以理解為package.json

打開lib文件夾可以看到main.dart，這就是我們上圖對應(yīng)的開發(fā)文件?，F(xiàn)在清空這個文件，咱們從零開始，飛狐一步一步帶您構(gòu)建應(yīng)用。步驟如下：
1.引入material組件包，箭頭表達(dá)式的寫法前端小伙伴比較熟悉，mian()是主函數(shù)，runApp()里是你要執(zhí)行的應(yīng)用敲入如下代碼：

import 'package:flutter/material.dart';// 引入material組件包 void main() => runApp(MyApp());// 運(yùn)行應(yīng)用 class MyApp extends StatelessWidget {} 

2.這么寫，大家會發(fā)現(xiàn)類MyApp上有一個錯誤提示未實(shí)例build函數(shù)，我們改造一下，再加入一個文本控件，語法如下：

Text('文本內(nèi)容', style: TextStyle(fontSize: 12))

import 'package:flutter/material.dart';// 引入material組件包 void main() => runApp(MyApp());// 運(yùn)行應(yīng)用 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '第一個應(yīng)用喲',// 任務(wù)欄的標(biāo)題 home: Text('hello world'),// 應(yīng)用的主界面 theme: ThemeData(primarySwatch: Colors.red),// 配置應(yīng)用主題 ); } } 

敲完上面的代碼之后，在終端命令界面里按一下R，就自動刷新了。大家可以打開模擬器看看，變成了這幅模樣。

Flutter Text組件

3，接著我們加入腳手架組件Scaffold，腳手架主要包含部分為：

• 北丐導(dǎo)航條：appBar
• 中神通主體內(nèi)容：body
• 西毒側(cè)邊欄：drawer
• 南帝導(dǎo)航欄：bottomNavigationBar
• 東邪浮動按鈕：floatingActionButton
  我們來實(shí)現(xiàn)一把，代碼如下：

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

這樣我們就已經(jīng)構(gòu)建了一個應(yīng)用的基本界面。這一回我們就講到這里啦，非?；A(chǔ)。復(fù)盤一下，這一回我們對Flutter進(jìn)行了基本的介紹，學(xué)了基礎(chǔ)控件Scaffold和Text，其實(shí)還學(xué)了一個無狀態(tài)組件StatelessWidget，我們在后面文章中會詳細(xì)介紹flutter組件的狀態(tài)。

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18390.html