前言
Flutter 是一個由谷歌開發(fā)的開源移動應用軟件開發(fā)工具包杆故，用于為 Android悴势、iOS粮坞、Windows肪凛、Mac攒钳、Linux居灯、Google Fuchsia 開發(fā)應用啦扬。
我們可以將 Flutter 理解為一個移動 UI 框架濒翻，它可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面屁柏，使用這一框架可以大大提高開發(fā)效率。在全世界肴焊，F(xiàn)lutter 正在被越來越多的開發(fā)者和組織使用前联，并且 Flutter 是完全免費、開源的娶眷。
Flutter 的特點
- 跨平臺：Flutter 支持常見的 MacOS似嗤、Windows、Linux届宠、Android烁落、iOS 平臺乘粒，可以說是目前支持平臺最多的 UI 框架。良好的跨平臺性伤塌，可以大大減少了開發(fā)成本灯萍。
- 絲滑般的體驗：使用 Flutter 內(nèi)置的 Material Design（Android 風格）和 Cupertino（iOS 風格）風格組件，以及豐富的 motion API每聪，平滑而自然的滑動效果和平臺感知旦棉，為用戶帶來全新的體驗。
- 響應式框架：使用一系列基礎組件和響應式框架药薯，可以輕松構(gòu)建用戶界面绑洛。使用功能強大且靈活的 API 可以實現(xiàn)復雜的界面效果。
-
聲明示編程：主流編程思想童本，以結(jié)果為導向真屯，允許多種實現(xiàn)方式，開發(fā)更加靈活穷娱。
（當然绑蔫，要表達更復雜的目標時，也應向命令式靠攏了泵额。把流程表達的清晰明了才是一個合格的程序員） - 開發(fā)效率高：支持Hot reload和Hot restart配深，寫UI界面的時候,一鍵看效果。
- 支持插件：使用插件可以訪問平臺本地 API梯刚，如相機凉馆、藍牙、WiFi 等等亡资。借助現(xiàn)有的 Java澜共、Swift、Object-C锥腻、C++ 代碼實現(xiàn)對原生系統(tǒng)的調(diào)用嗦董。
- 60fps超高性能：Flutter 編寫的應用可以達到 60fps（每秒傳輸幀數(shù)）。Flutter 采用 GPU 渲染技術(shù)瘦黑，所以性能很好京革，完全可以勝任游戲開發(fā)。
-
嵌套式編碼方式：
復雜界面嵌套嚴重幸斥，可讀性不高
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 團隊冰悠”ざ剩總之，歷時 4 年溉卓，F(xiàn)lutter 發(fā)展飛快皮迟，已在業(yè)界得到了廣泛的關注和認可，在開發(fā)者中受到了熱烈的歡迎的诵，成為了移動跨端開發(fā)中最受歡迎的框架之一万栅。
Google 目前在大力推廣 Flutter，F(xiàn)lutter 項目的貢獻者中有很多人都是來自 Chromium 團隊西疤，并且 Github上活躍度很高。
一休溶、學習路線
Flutter作為一門新開源的移動UI框架代赁，在設計之初，谷歌的工程師就考慮到了開發(fā)者在學習Flutter的成本問題兽掰，Dart語言與Flutter的結(jié)合芭碍，獲得泛型、class等強類型語言的特性保證了我們開發(fā)的應用安全可控孽尽，同時Flutter借鑒了FaceBook成熟開源框架React的單向數(shù)據(jù)綁定的特性窖壕，使我們在開發(fā)的過程中可以恰到好處的更新和控制我們的頁面。
通過我們的實際開發(fā)使用的經(jīng)驗看杉女，F(xiàn)lutter是一門學習起來十分順滑的成熟技術(shù)框架瞻讽，下面將推薦一下學習路線讓你快速的入門Flutter，構(gòu)建你想要的應用：
1.學習Dart語言
官網(wǎng)快速入門：Dart 語言開發(fā)文檔（dart.cn/guides）
2.學習Flutter UI框架
掌握Widget熏挎，在Flutter中速勇，萬物皆Widget！Widget作為我們搭建應用的組件坎拐，需要至少掌握我們常見的Widget
| Widget | 說明 |
|---|---|
| Container | 一個擁有繪制烦磁、定位、調(diào)整大小的 widget哼勇。 |
| Row | 在水平方向上排列子widget的列表都伪。 |
| Column | 在垂直方向上排列子widget的列表。 |
| Image | 一個顯示圖片的widget |
| Text | 單一格式的文本 |
| Icon | A Material Design icon. |
| RaisedButton | Material Design中的button积担， 一個凸起的材質(zhì)矩形按鈕 |
| Scaffold | Material Design布局結(jié)構(gòu)的基本實現(xiàn)陨晶。此類提供了用于顯示drawer、snackbar和底部sheet的API磅轻。 |
| Appbar | 一個Material Design應用程序欄珍逸，由工具欄和其他可能的widget（如TabBar和FlexibleSpaceBar）組成逐虚。 |
| ListView | 列表顯示 |
| Icon | 圖標 |
| Switch | 單選開關 |
| Checkbox | 復選框 |
| TextField | 輸入框 |
| Form | 表單組件 |
| Flex、Expanded | 彈性布局 |
| Wrap | 流式布局 |
| Stack谆膳、Positioned | 層疊布局叭爱，用于頁面定位，層疊擺放 |
| Align | 對齊與相對定位 |
| GestureDetector | 手勢識別 |
二漱病、進階學習
- 系統(tǒng)學習：Flutter實戰(zhàn)
- 插件使用：pub.dev
- 原生調(diào)用：文件操作买雾、拍照、語音杨帽、視頻播放漓穿、本地化數(shù)據(jù)緩存、消息通道封裝處理...
三注盈、拓展學習
- 即使Flutter已經(jīng)完成了大部分移動開發(fā)需要的Widget晃危，但是還是有一些特殊的用戶需求需要我們?nèi)崿F(xiàn)，既然是跨平臺開發(fā)老客，那就離不開原生開發(fā)僚饭！是的，如果需要深入移動領域胧砰，要學習原生鳍鸵！
- 學習Flutter運行機制可以幫助我們更好的解決實際開發(fā)中的一些問題，譬如：渲染尉间、動畫機制偿乖、數(shù)據(jù)綁定、流數(shù)據(jù)處理哲嘲。學習方法：讀Flutter源碼贪薪，大量實踐 、思考及總結(jié)撤蚊。
四古掏、環(huán)境配置
安裝和環(huán)境配置：
flutter官網(wǎng)
mac安裝流程
五、代碼風格
好的代碼有一個非常重要的特點就是擁有好的風格侦啸。一致的命名槽唾、一致的順序、以及一致的格式讓代碼看起來是一樣的光涂。這非常有利于發(fā)揮我們視力系統(tǒng)強大的模式匹配能力庞萍。如果我們整個 Dart 生態(tài)系統(tǒng)中都使用統(tǒng)一的風格，那么這將讓我們彼此之間更容易的互相學習和互相貢獻忘闻。它使我們所有人都可以更容易地學習并為彼此的代碼做出貢獻钝计。
1.命名
在 Dart 中標識符有三種類型。
-
UpperCamelCase(大駝峰)： 每個單詞的首字母都大寫，包含第一個單詞私恬。 -
lowerCamelCase (小駝峰)：除了第一個字母始終是小寫（即使是縮略詞）债沮，每個單詞的首字母都大寫。 -
lowercase_with_underscores(下劃線)： 只是用小寫字母單詞本鸣，即使是縮略詞疫衩，并且單詞之間使用 _ 連接。
要使用 UpperCamelCase 風格命名類型
每個單詞的首字母都大寫荣德，包含第一個單詞闷煤。
Classes（類名）、 enums（枚舉類型）涮瞻、 typedefs（類型定義）鲤拿、擴展名（）、以及 type parameters（類型參數(shù)）應該把每個單詞的首字母都大寫（包含第一個單詞）署咽，不使用分隔符近顷。
要使用lowerCamelCase 風格來命名。
除了第一個字母始終是小寫（即使是縮略詞）宁否，每個單詞的首字母都大寫幕庐。
類成員、頂級定義家淤、變量、參數(shù)以及命名參數(shù)等 瑟由。
要使用 lowercase_with_underscores風格命名類型
小寫字母單詞絮重，即使是縮略詞，并且單詞之間使用 _ 連接歹苦。
命名庫青伤，包，文件夾殴瘦，源文件狠角。
2. 引用順序
為了使文件前面部分保持整潔，我們規(guī)定了關鍵字出現(xiàn)順序的規(guī)則蚪腋。每個“部分”應該使用空行分割丰歌。(暫未查到Flutter有類似iOS的PrefixHeader頭文件，一些大量復用的工具類文件要多次引用屉凯？)
順序如下：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ī)范
建議所有的第三方插件都進行二次封裝后放入pubs文件夾使用，有利于插件版本升級悠砚、更換晓勇，符合我們開發(fā)原則：“一處處理，多處實現(xiàn)”，降低我們的維護成本和開發(fā)成本绑咱。
插件匯總
1.Provder：數(shù)據(jù)動態(tài)管理插件
熟悉provider是如何調(diào)用build方法去通知頁面更新绰筛，了解context掛載provider實例，如何通過context在element tree中獲取到對應的provider實例描融。
2. dio：網(wǎng)絡請求插件
熟悉dio基本配置铝噩，攔截網(wǎng)絡請求做業(yè)務處理
3. flutter_screenutil：屏幕適配
了解屏幕適配的基本原理，如何調(diào)用全局context for root
4. shared_preferences：本地持久化
主要應用場景：少量本地化存取稼稿，例如：user信息薄榛、版信息。大批量让歼、反復調(diào)用存取不建議使用敞恋。
5. mqtt_client：mqtt客戶端
6. sqflite：數(shù)據(jù)庫
主要應用場景：大批量數(shù)據(jù)本地化存取，例如：搜索歷史谋右、聊天歷史等硬猫。注意使用是表的開關，以釋放內(nèi)存改执。
7. device_info：設備信息
8. cached_network_image：圖片緩存
9. cached_video_player：視頻播放
10. wechat_assets_picker：圖片視頻選擇器
仿微信選擇圖片與視頻
11. path_provider：設備路徑
注意區(qū)分臨時文件路徑和項目文件路徑的區(qū)別
12. permission_handler：權(quán)限管理
13. isolate：線程管理使用
在大批量調(diào)用渲染和網(wǎng)絡請求等“高消耗”的操作下啸蜜，F(xiàn)lutter Ui視圖會造成卡頓現(xiàn)象，這時候要開啟一個線程去跑這些操作辈挂。在使用isolate過程中注意使用完后關閉isolate并釋放掉內(nèi)存衬横，否則會因內(nèi)存占用大而導致應用奔潰。
14. flutter_sound：音頻錄取和播放
七终蒂、Flutter常用命令
1.環(huán)境安裝
flutter --version 查看當前安裝的flutter 版本
flutter upgrade 升級當前的flutter 版本
flutter doctor 檢查環(huán)境安裝是否完成
flutter channel 查看flutter所處分支
flutter channel master 切換flutter分支到master（建議使用'stable'穩(wěn)定分支）
2.項目編譯運行
flutter clean 清空build目錄
flutter pub get 獲取pub插件包
open -a Simulator 運行iOS模擬器
flutter devices 可用模擬器設備列表
flutter run -d 設備名稱 運行項目到指定設備
3.打包
flutter build apk --release --target-platform android-arm64 生成指定CPU架構(gòu)的apk
flutter build ios iOS打包 這一步并不能生成ipa文件蜂林，需要使用Xcode 打包
