前言

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

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

flutter.jpeg

Flutter 的特點(diǎn)

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

Flutter 的發(fā)展

在 2017 年 Google I/O 大會上，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)得以快速增長，國內(nèi)外有非?；?Flutter 的成功案例，國內(nèi)的互聯(lián)網(wǎng)公司基本都有專門的 Flutter 團(tuán)隊?？傊?，歷時 4 年，F(xiàn)lutter 發(fā)展飛快，已在業(yè)界得到了廣泛的關(guān)注和認(rèn)可，在開發(fā)者中受到了熱烈的歡迎，成為了移動跨端開發(fā)中最受歡迎的框架之一。
Google 目前在大力推廣 Flutter，F(xiàn)lutter 項目的貢獻(xiàn)者中有很多人都是來自 Chromium 團(tuán)隊，并且 Github上活躍度很高。

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

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

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

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

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

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

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

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

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

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

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

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

四、環(huán)境配置

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

五、代碼風(fēng)格

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

1.命名

在 Dart 中標(biāo)識符有三種類型。

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

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

每個單詞的首字母都大寫，包含第一個單詞。

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

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

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

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

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

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

命名庫，包，文件夾，源文件。

2. 引用順序

為了使文件前面部分保持整潔，我們規(guī)定了關(guān)鍵字出現(xiàn)順序的規(guī)則。每個“部分”應(yīng)該使用空行分割。(暫未查到Flutter有類似iOS的PrefixHeader頭文件，一些大量復(fù)用的工具類文件要多次引用？)
順序如下：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文件夾使用，有利于插件版本升級、更換，符合我們開發(fā)原則：“一處處理，多處實現(xiàn)”，降低我們的維護(hù)成本和開發(fā)成本。

插件匯總

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

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

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

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

3. flutter_screenutil：屏幕適配

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

4. shared_preferences：本地持久化

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

5. mqtt_client：mqtt客戶端

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

主要應(yīng)用場景：大批量數(shù)據(jù)本地化存取，例如：搜索歷史、聊天歷史等。注意使用是表的開關(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ū)分臨時文件路徑和項目文件路徑的區(qū)別

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

13. isolate：線程管理使用

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

14. flutter_sound：音頻錄取和播放

七、Flutter常用命令

1.環(huán)境安裝

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

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

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

3.打包

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