前言

Flutter 是一個(gè)由谷歌開(kāi)發(fā)的開(kāi)源移動(dòng)應(yīng)用軟件開(kāi)發(fā)工具包，用于為 Android、iOS、Windows、Mac、Linux、Google Fuchsia 開(kāi)發(fā)應(yīng)用。

我們可以將 Flutter 理解為一個(gè)移動(dòng) UI 框架，它可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶(hù)界面，使用這一框架可以大大提高開(kāi)發(fā)效率。在全世界，F(xiàn)lutter 正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且 Flutter 是完全免費(fèi)、開(kāi)源的。

flutter.jpeg

Flutter 的特點(diǎn)

• 跨平臺(tái)：Flutter 支持常見(jiàn)的 MacOS、Windows、Linux、Android、iOS 平臺(tái)，可以說(shuō)是目前支持平臺(tái)最多的 UI 框架。良好的跨平臺(tái)性，可以大大減少了開(kāi)發(fā)成本。
• 絲滑般的體驗(yàn)：使用 Flutter 內(nèi)置的 Material Design（Android 風(fēng)格）和 Cupertino（iOS 風(fēng)格）風(fēng)格組件，以及豐富的 motion API，平滑而自然的滑動(dòng)效果和平臺(tái)感知，為用戶(hù)帶來(lái)全新的體驗(yàn)。
• 響應(yīng)式框架：使用一系列基礎(chǔ)組件和響應(yīng)式框架，可以輕松構(gòu)建用戶(hù)界面。使用功能強(qiáng)大且靈活的 API 可以實(shí)現(xiàn)復(fù)雜的界面效果。
• 聲明示編程：主流編程思想，以結(jié)果為導(dǎo)向，允許多種實(shí)現(xiàn)方式，開(kāi)發(fā)更加靈活。（當(dāng)然，要表達(dá)更復(fù)雜的目標(biāo)時(shí)，也應(yīng)向命令式靠攏了。把流程表達(dá)的清晰明了才是一個(gè)合格的程序員）
• 開(kāi)發(fā)效率高：支持Hot reload和Hot restart，寫(xiě)UI界面的時(shí)候,一鍵看效果。
• 支持插件：使用插件可以訪問(wèn)平臺(tái)本地 API，如相機(jī)、藍(lán)牙、WiFi 等等。借助現(xiàn)有的 Java、Swift、Object-C、C++ 代碼實(shí)現(xiàn)對(duì)原生系統(tǒng)的調(diào)用。
• 60fps超高性能：Flutter 編寫(xiě)的應(yīng)用可以達(dá)到 60fps（每秒傳輸幀數(shù)）。Flutter 采用 GPU 渲染技術(shù)，所以性能很好，完全可以勝任游戲開(kāi)發(fā)。
• 嵌套式編碼方式：復(fù)雜界面嵌套嚴(yán)重，可讀性不高

Flutter 的發(fā)展

在 2017 年 Google I/O 大會(huì)上，Google 首次發(fā)布 Flutter。到 2022年5月中旬，已經(jīng)有 140K 的 Star，Star 數(shù)量 Github 上排名18位 。經(jīng)歷了5年的發(fā)展，F(xiàn)lutter 生態(tài)系統(tǒng)得以快速增長(zhǎng)，國(guó)內(nèi)外有非常基于 Flutter 的成功案例，國(guó)內(nèi)的互聯(lián)網(wǎng)公司基本都有專(zhuān)門(mén)的 Flutter 團(tuán)隊(duì)?？傊?，歷時(shí) 4 年，F(xiàn)lutter 發(fā)展飛快，已在業(yè)界得到了廣泛的關(guān)注和認(rèn)可，在開(kāi)發(fā)者中受到了熱烈的歡迎，成為了移動(dòng)跨端開(kāi)發(fā)中最受歡迎的框架之一。
Google 目前在大力推廣 Flutter，F(xiàn)lutter 項(xiàng)目的貢獻(xiàn)者中有很多人都是來(lái)自 Chromium 團(tuán)隊(duì)，并且 Github上活躍度很高。

一、學(xué)習(xí)路線

Flutter作為一門(mén)新開(kāi)源的移動(dòng)UI框架，在設(shè)計(jì)之初，谷歌的工程師就考慮到了開(kāi)發(fā)者在學(xué)習(xí)Flutter的成本問(wèn)題，Dart語(yǔ)言與Flutter的結(jié)合，獲得泛型、class等強(qiáng)類(lèi)型語(yǔ)言的特性保證了我們開(kāi)發(fā)的應(yīng)用安全可控，同時(shí)Flutter借鑒了FaceBook成熟開(kāi)源框架React的單向數(shù)據(jù)綁定的特性，使我們?cè)陂_(kāi)發(fā)的過(guò)程中可以恰到好處的更新和控制我們的頁(yè)面。

通過(guò)我們的實(shí)際開(kāi)發(fā)使用的經(jīng)驗(yàn)看，F(xiàn)lutter是一門(mén)學(xué)習(xí)起來(lái)十分順滑的成熟技術(shù)框架，下面將推薦一下學(xué)習(xí)路線讓你快速的入門(mén)Flutter，構(gòu)建你想要的應(yīng)用：

1.學(xué)習(xí)Dart語(yǔ)言

官網(wǎng)快速入門(mén)：Dart 語(yǔ)言開(kāi)發(fā)文檔（dart.cn/guides）

2.學(xué)習(xí)Flutter UI框架

掌握Widget，在Flutter中，萬(wàn)物皆Widget！Widget作為我們搭建應(yīng)用的組件，需要至少掌握我們常見(jiàn)的Widget

基礎(chǔ)知識(shí)點(diǎn)

二、進(jìn)階學(xué)習(xí)

• 系統(tǒng)學(xué)習(xí)：Flutter實(shí)戰(zhàn)
• 插件使用：pub.dev
• 原生調(diào)用：文件操作、拍照、語(yǔ)音、視頻播放、本地化數(shù)據(jù)緩存、消息通道封裝處理...

三、拓展學(xué)習(xí)

• 即使Flutter已經(jīng)完成了大部分移動(dòng)開(kāi)發(fā)需要的Widget，但是還是有一些特殊的用戶(hù)需求需要我們?nèi)?shí)現(xiàn)，既然是跨平臺(tái)開(kāi)發(fā)，那就離不開(kāi)原生開(kāi)發(fā)！是的，如果需要深入移動(dòng)領(lǐng)域，要學(xué)習(xí)原生！
• 學(xué)習(xí)Flutter運(yùn)行機(jī)制可以幫助我們更好的解決實(shí)際開(kāi)發(fā)中的一些問(wèn)題，譬如：渲染、動(dòng)畫(huà)機(jī)制、數(shù)據(jù)綁定、流數(shù)據(jù)處理。學(xué)習(xí)方法：讀Flutter源碼，大量實(shí)踐 、思考及總結(jié)。

四、環(huán)境配置

安裝和環(huán)境配置：
flutter官網(wǎng)
mac安裝流程

五、代碼風(fēng)格

好的代碼有一個(gè)非常重要的特點(diǎn)就是擁有好的風(fēng)格。一致的命名、一致的順序、以及一致的格式讓代碼看起來(lái)是一樣的。這非常有利于發(fā)揮我們視力系統(tǒng)強(qiáng)大的模式匹配能力。如果我們整個(gè) Dart 生態(tài)系統(tǒng)中都使用統(tǒng)一的風(fēng)格，那么這將讓我們彼此之間更容易的互相學(xué)習(xí)和互相貢獻(xiàn)。它使我們所有人都可以更容易地學(xué)習(xí)并為彼此的代碼做出貢獻(xiàn)。

1.命名

在 Dart 中標(biāo)識(shí)符有三種類(lèi)型。

• UpperCamelCase(大駝峰)： 每個(gè)單詞的首字母都大寫(xiě)，包含第一個(gè)單詞。
• lowerCamelCase (小駝峰)：除了第一個(gè)字母始終是小寫(xiě)（即使是縮略詞），每個(gè)單詞的首字母都大寫(xiě)。
• lowercase_with_underscores(下劃線)： 只是用小寫(xiě)字母單詞，即使是縮略詞，并且單詞之間使用 _ 連接。

要使用 UpperCamelCase 風(fēng)格命名類(lèi)型

每個(gè)單詞的首字母都大寫(xiě)，包含第一個(gè)單詞。

Classes（類(lèi)名）、 enums（枚舉類(lèi)型）、 typedefs（類(lèi)型定義）、擴(kuò)展名（）、以及 type parameters（類(lèi)型參數(shù)）應(yīng)該把每個(gè)單詞的首字母都大寫(xiě)（包含第一個(gè)單詞），不使用分隔符。

要使用lowerCamelCase 風(fēng)格來(lái)命名。

除了第一個(gè)字母始終是小寫(xiě)（即使是縮略詞），每個(gè)單詞的首字母都大寫(xiě)。

類(lèi)成員、頂級(jí)定義、變量、參數(shù)以及命名參數(shù)等 。

要使用 lowercase_with_underscores風(fēng)格命名類(lèi)型

小寫(xiě)字母單詞，即使是縮略詞，并且單詞之間使用 _ 連接。

命名庫(kù)，包，文件夾，源文件。

2. 引用順序

為了使文件前面部分保持整潔，我們規(guī)定了關(guān)鍵字出現(xiàn)順序的規(guī)則。每個(gè)“部分”應(yīng)該使用空行分割。(暫未查到Flutter有類(lèi)似iOS的PrefixHeader頭文件，一些大量復(fù)用的工具類(lèi)文件要多次引用？)
順序如下：dart: =>package:=>export

import 'dart:async';
import 'dart:html';
import 'package:bar/bar.dart';
import 'package:foo/foo.dart';
import 'foo.dart';
import 'foo/foo.dart';
export 'src/error.dart';

六、插件使用規(guī)范

使用規(guī)范

建議所有的第三方插件都進(jìn)行二次封裝后放入pubs文件夾使用，有利于插件版本升級(jí)、更換，符合我們開(kāi)發(fā)原則：“一處處理，多處實(shí)現(xiàn)”，降低我們的維護(hù)成本和開(kāi)發(fā)成本。

插件匯總

1.Provder：數(shù)據(jù)動(dòng)態(tài)管理插件

熟悉provider是如何調(diào)用build方法去通知頁(yè)面更新，了解context掛載provider實(shí)例，如何通過(guò)context在element tree中獲取到對(duì)應(yīng)的provider實(shí)例。

2. dio：網(wǎng)絡(luò)請(qǐng)求插件

熟悉dio基本配置，攔截網(wǎng)絡(luò)請(qǐng)求做業(yè)務(wù)處理

3. flutter_screenutil：屏幕適配

了解屏幕適配的基本原理，如何調(diào)用全局context for root

4. shared_preferences：本地持久化

主要應(yīng)用場(chǎng)景：少量本地化存取，例如：user信息、版信息。大批量、反復(fù)調(diào)用存取不建議使用。

5. mqtt_client：mqtt客戶(hù)端

6. sqflite：數(shù)據(jù)庫(kù)

主要應(yīng)用場(chǎng)景：大批量數(shù)據(jù)本地化存取，例如：搜索歷史、聊天歷史等。注意使用是表的開(kāi)關(guān)，以釋放內(nèi)存。

7. device_info：設(shè)備信息

8. cached_network_image：圖片緩存

9. cached_video_player：視頻播放

10. wechat_assets_picker：圖片視頻選擇器

仿微信選擇圖片與視頻

11. path_provider：設(shè)備路徑

注意區(qū)分臨時(shí)文件路徑和項(xiàng)目文件路徑的區(qū)別

12. permission_handler：權(quán)限管理

13. isolate：線程管理使用

在大批量調(diào)用渲染和網(wǎng)絡(luò)請(qǐng)求等“高消耗”的操作下，F(xiàn)lutter Ui視圖會(huì)造成卡頓現(xiàn)象，這時(shí)候要開(kāi)啟一個(gè)線程去跑這些操作。在使用isolate過(guò)程中注意使用完后關(guān)閉isolate并釋放掉內(nèi)存，否則會(huì)因內(nèi)存占用大而導(dǎo)致應(yīng)用奔潰。

14. flutter_sound：音頻錄取和播放

七、Flutter常用命令

1.環(huán)境安裝

flutter --version 查看當(dāng)前安裝的flutter 版本
flutter upgrade 升級(jí)當(dāng)前的flutter 版本
flutter doctor 檢查環(huán)境安裝是否完成
flutter channel 查看flutter所處分支
flutter channel master 切換flutter分支到master（建議使用'stable'穩(wěn)定分支）

2.項(xiàng)目編譯運(yùn)行

flutter clean 清空build目錄
flutter pub get 獲取pub插件包
open -a Simulator 運(yùn)行iOS模擬器
flutter devices 可用模擬器設(shè)備列表
flutter run -d 設(shè)備名稱(chēng) 運(yùn)行項(xiàng)目到指定設(shè)備

3.打包

flutter build apk --release --target-platform android-arm64 生成指定CPU架構(gòu)的apk
flutter build ios iOS打包 這一步并不能生成ipa文件，需要使用Xcode 打包