大家好，小弟飛狐。終于有時間來寫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://www.junxiaosheng.cn/18390.html