歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司！
余先生：13699882642
余先生：13699882642
8年
專注物流供應(yīng)鏈系統(tǒng)
余先生：13699882642
發(fā)表日期：2018-12 文章編輯：小燈 瀏覽次數(shù)：5223
大家好，小弟飛狐。終于有時間來寫Flutter的系列教程。這個Flutter實戰(zhàn)系列里我會帶領(lǐng)大家從零基礎(chǔ)開始邁向高手進階。讓大家由淺入深，從入門變高手。好咯話不多說，首先我們由3W開始。
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上運行起來，依靠的正是這個引擎。
Flutter Engine是Flutter應(yīng)用程序的運行環(huán)境，開發(fā)人員可以通過Flutter框架和API在內(nèi)部進行交互。這里面有個很有棒的特點就是低延遲、高幀速率。大家可能會覺得，普通的APP運行流暢就可以了，那么高幀率太過剩啦，這里飛狐為大家準備了小彩蛋AR來辯證性的看這個很棒的特性。
先科普一下AR，AR是將真實環(huán)境與虛擬環(huán)境實時疊加到同一幀畫面。通過攝像頭獲取真實環(huán)境，通過圖形圖像識別算法識別真實環(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，因為APP里的元素都由widgets層來實現(xiàn)。Flullter有自己的一套內(nèi)置的widgets，您甚至可以認為在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虛擬機。值得一提的是谷歌提供的Skia，因為Flutter的高幀速率正是因為采用了Skia引擎渲染。大家熟悉的Chrome瀏覽器、Android系統(tǒng)等也都用Skia進行繪制處理，包括圖形圖像、文本、動畫等。
為什么要用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思想，不一樣的是青出于藍而勝于藍。理由如下圖（其實比較中性，因為不太想吐槽）：
Flutter框架對比其次，對比Android，IOS來講，作為未來系統(tǒng)Fuchsia的御用框架不說，通過Dart語言就能構(gòu)建跨平臺語言也不說。
我們就只談Flutter的目標，不只是IOS和Android，而是不斷探索將Flutter擴展到更多終端平臺上。例如Flutter Desktop Embedding，這是一個能讓Flutter 運行于 macOS、Linux 和 Windows 等桌面操作系統(tǒng)的項目。
再看看Hummingbird，基于Web 實現(xiàn)的Flutter運行時環(huán)境。通過Dart可編譯JavaScript的特性，讓Flutter開發(fā)的應(yīng)用運行在標準Web平臺且無需改動。
最后，F(xiàn)lutter本身的三大優(yōu)勢：
1.依賴Material Design，構(gòu)建精美的UI界面設(shè)計。
2.基于Skia硬件加速圖形引擎，低延遲輸入、高幀速率，不只是媲美原生。
3.高效的開發(fā)效率，革命性的新特性Stateful Hot Reload，熱重載對于前端應(yīng)該是一點都不陌生了。
Flutter 官網(wǎng)案例好啦，怎樣玩兒好flutter呢，飛狐會從這個實戰(zhàn)系列開始，一個系列一個系列的讓大家會從零開始感受flutter的魅力。每個系列也就6篇左右，給您的不單是實戰(zhàn)一個APP，下個系列讓您領(lǐng)略Flutter架構(gòu)之美。首先配置環(huán)境等，請大家移步至配置篇。
配置好環(huán)境之后，大家需要記住三個基本的命令：
Flutter --version緊接著，我們開始創(chuàng)建第一個 flutter 項目，步驟列表如下：
1.命令行中輸入open -a simulator，打開xcode模擬器
2.打開vscode編輯器，快捷鍵 Ctrl + Shift + P 打開命令面板，然后輸入flutter
3.選擇 flutter：New Project 選項創(chuàng)建新項目
4.選擇項目存放目錄后便自動創(chuàng)建 flutter 項目
5.打開vscode終端，輸入flutter run
Flutter 初始化界面再接再厲，這時候我們可以看到目錄結(jié)構(gòu)也非常清晰，這里我們先關(guān)注兩個點：
1.lib文件夾，這是我們的工作文件夾，我們的開發(fā)文件之后都存放在這里，前端的小伙伴兒們可以當(dāng)成src
2.pubspec.yaml文件，這是構(gòu)建依賴包的文件，前端小伙伴兒們可以理解為package.json
打開lib文件夾可以看到main.dart，這就是我們上圖對應(yīng)的開發(fā)文件。現(xiàn)在清空這個文件，咱們從零開始，飛狐一步一步帶您構(gòu)建應(yīng)用。步驟如下：
1.引入material組件包，箭頭表達式的寫法前端小伙伴比較熟悉，mian()是主函數(shù)，runApp()里是你要執(zhí)行的應(yīng)用敲入如下代碼：
企業(yè)建站知識
推廣知識
小程序
微信營銷
APP開發(fā)
import 'package:flutter/material.dart';// 引入material組件包 void main() => runApp(MyApp());// 運行應(yīng)用 class MyApp extends StatelessWidget {} 2.這么寫，大家會發(fā)現(xiàn)類MyApp上有一個錯誤提示未實例build函數(shù)，我們改造一下，再加入一個文本控件，語法如下：
Text('文本內(nèi)容', style: TextStyle(fontSize: 12))
import 'package:flutter/material.dart';// 引入material組件包 void main() => runApp(MyApp());// 運行應(yīng)用 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '第一個應(yīng)用喲',// 任務(wù)欄的標題 home: Text('hello world'),// 應(yīng)用的主界面 theme: ThemeData(primarySwatch: Colors.red),// 配置應(yīng)用主題 ); } } 敲完上面的代碼之后，在終端命令界面里按一下R，就自動刷新了。大家可以打開模擬器看看，變成了這幅模樣。
Flutter Text組件3，接著我們加入腳手架組件Scaffold，腳手架主要包含部分為：
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)用的基本界面。這一回我們就講到這里啦，非常基礎(chǔ)。復(fù)盤一下，這一回我們對Flutter進行了基本的介紹，學(xué)了基礎(chǔ)控件Scaffold和Text，其實還學(xué)了一個無狀態(tài)組件StatelessWidget，我們在后面文章中會詳細介紹flutter組件的狀態(tài)。
好啦，下回見，祝大家新年快樂耶(＾－＾)V
