適用于新手入門Flutter的學(xué)習(xí)手冊及開發(fā)規(guī)范。本說明書圍繞著：Flutter技術(shù)落地使用、環(huán)境配置及日常開發(fā)踩坑總結(jié)、項目結(jié)構(gòu)規(guī)劃及實例說明、代碼規(guī)范、插件使用規(guī)范、現(xiàn)有公共組件和待改進(jìn)等七個方面

Flutter技術(shù)落地使用

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費、開源的。

本章節(jié)將從學(xué)習(xí)路線、進(jìn)階、及未來學(xué)習(xí)方向等3個方面拓展性總結(jié)Flutter技術(shù)在實際業(yè)務(wù)中需要掌握的基本開發(fā)能力。

一、學(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

Widget拓展 進(jìn)階學(xué)習(xí)：flutter.cn/docs/develo…

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

• 插件使用：pub.flutter-io.cn/
• 原生調(diào)用：文件操作、拍照、語音、視頻播放

四、拓展學(xué)習(xí)：

• 原生學(xué)習(xí)：Android、ios開發(fā)

  即使Flutter已經(jīng)完成了大部分移動開發(fā)需要的Widget，但是還是有一些特殊的用戶需求需要我們?nèi)崿F(xiàn)，既然是跨平臺開發(fā)，那就離不開原生開發(fā)！是的，如果需要深入移動領(lǐng)域，要學(xué)習(xí)原生！

• 深入學(xué)習(xí)Flutter運(yùn)行機(jī)制

  學(xué)習(xí)Flutter運(yùn)行機(jī)制可以幫助我們更好的解決實際開發(fā)中的一些問題，譬如：渲染、動畫機(jī)制、數(shù)據(jù)綁定、流數(shù)據(jù)處理。學(xué)習(xí)方法：讀Flutter源碼，大量實踐 、思考及總結(jié)。

環(huán)境配置及日常開發(fā)踩坑總結(jié)

1.17版本無法連接

Flutter 添加新插件后報The number of method references in a .dex file cannot exceed 64K.

地址：https://juejin.im/post/6844904048034856967

彈窗鍵盤彈起影響布局解決方案

地址：https://juejin.im/post/6844904048898867208)

xcode 啟動一直在轉(zhuǎn)無法啟動 一直卡著菊花在轉(zhuǎn) 解決方案

地址：https://juejin.im/post/6844904056398282766

listview顯示不全的解決辦法

地址：https://juejin.im/post/6844904056725438477

run ios 真機(jī)報錯一直卡在installing and launching問題診斷及解決辦法

地址：https://juejin.im/post/6844904080146432008

軟鍵盤收起

地址：https://juejin.im/post/6844904118012608520

dio或http請求阻塞ui，導(dǎo)致頁面UI卡頓問題及其解決辦法

地址：https://juejin.im/post/6844904158735106061

FlutterEasyLoading導(dǎo)致No MediaQuery widget found.

地址：https://juejin.im/post/6845166891690885133

Android studio remove JVM property “https.proxyHost”?

地址：https://juejin.im/post/6857334907060879368

Error connecting to the service protocol: failed to connect

地址：https://juejin.im/post/6857775588762091533

代碼風(fēng)格

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

一、命名

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

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

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

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

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

///?類名
class?WodeerProvider?{}
class?Http?{}

///?typedefs
typedef?Predicate?=?bool?Function(T?value);

///?extensions
extension?MyFancyList?on?List?{?...?}
extension?SmartIterable?on?Iterable?{?...?}

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

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

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

///?一些文件系統(tǒng)不區(qū)分大小寫，所以很多項目要求文件名必須是小寫字母。使用分隔符這種形式可以保證命名?///?的可讀性。使用下劃線作為分隔符可確保名稱仍然是有效的Dart標(biāo)識符。

library?peg_parser.source_scanner;

import?'file_system.dart';
import?'slider_menu.dart';
import?'dart:math'?as?math;
import?'package:angular_components/angular_components'
????as?angular_components;
import?'package:js/js.dart'?as?js;

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

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

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

var?item;
var?pageData;
const?wodeerFile;
HttpRequest?httpRequest;

void?getPageData()?{
??print('');
}

二、順序

為了使文件前面部分保持整潔，我們規(guī)定了關(guān)鍵字出現(xiàn)順序的規(guī)則。每個“部分”應(yīng)該使用空行分割。

順序如下：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';

三、 格式化

具有一致的空格風(fēng)格有助于幫助我們能夠用編譯器相同的方式理解代碼。

1. 要使用 dartfmt 格式化你的代碼。

在提交代碼前，請格式化自己的代碼。

在下載dart插件安裝后，編輯器支持dart代碼格式化。

2. 考慮修改你的代碼讓格式更友好。

無論你扔給格式化程序什么樣代碼，它都會盡力去處理，但是格式化程序不會創(chuàng)造奇跡。如果代碼里有特別長的標(biāo)識符，深層嵌套的表達(dá)式，混合的不同類型運(yùn)算符等。格式化輸出的代碼可能任然很難閱讀。

當(dāng)有這樣的情況發(fā)生時，那么就需要重新組織或簡化你的代碼。考慮縮短局部變量名或者將表達(dá)式抽取為一個新的局部變量。換句話說，你應(yīng)該做一些手動格式化并增加代碼的可讀性的修改。在工作中應(yīng)該把 dartfmt 看做一個合作伙伴，在代碼的編寫和迭代過程中互相協(xié)作輸出優(yōu)質(zhì)的代碼。

????///?抽出相近業(yè)務(wù)邏輯的模塊獨立出來
????///?使用_下劃線私有化組件，保證全局代碼干凈

????class?Page?extends?StatelessWidget?{
??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('我是頁面'),
??????),
????????????body:?ListView(
????????children:?[
??????????_title(),
??????????_caseNo(),
??????????_name(),
??????????_unit(),
??????????_content(),
????????],
??????),????
????);
??}
????}

????Widget?_title()?{
??return?Container();
????}

????Widget?_caseNo()?{
??return?Container();
????}

????Widget?_name()?{
??return?Container();
????}

????Widget?_unit()?{
??return?Container();
????}

????Widget?_content()?{
??return?Container();
????}
????

3. 避免單行超過 80 個字符。

4. 對所有流控制結(jié)構(gòu)使用花括號。

這樣可以避免 dangling else（else懸掛）的問題。

????if?(isShow)?{
??print('Hello?Wodeer?!');
????}?else?{
??print('==.==!');
????}

????///?例外：一個沒有 else 的 if 語句，并且這個 if 語句以及它的執(zhí)行體適合在一行中實現(xiàn)。在這種情況下，可以不用括號：
????if?(arg?==?null)?return?defaultValue;

????///?但是，如果執(zhí)行體包含下一行，請使用大括號：
????if?(overflowChars?!=?other.overflowChars)?{
??return?overflowChars?????}
????

項目結(jié)構(gòu)規(guī)劃及實例說明

項目架構(gòu)

經(jīng)過多個項目實戰(zhàn)總結(jié)，手機(jī)端開發(fā)采取MVVM模式開發(fā)，通過Provider使得頁面UI與數(shù)據(jù)model和數(shù)據(jù)操作分離實現(xiàn)。

在我們實際開發(fā)中，這套模式涵蓋了我們大部分的頁面開發(fā)需求，有效的做到了代碼結(jié)藕，同時在測試環(huán)節(jié)中我們可以快速的定位到我們問題所在，有效的提高了開發(fā)效率。

lib

| __ assets 存放icon、page

| __ api 存放api配置文件夾

| __ config 存放項目基礎(chǔ)配置，譬如生產(chǎn)版本、開發(fā)版本不同端口域名設(shè)置

| __ enums 存放枚舉項目文件夾

| __ models 存放model文件，與page文件一一對應(yīng)存放

| __ providers 存放providerl文件，與page文件一一對應(yīng)存放

| __ page 存放page頁面

|__ components 存放公共頁面，本文件夾只存放同級頁面公用的page級文件，獨屬模塊公用 頁面在自己頁面文件夾中新開components文件夾存放

| __ pubs 存放插件文件夾，所有插件原則上需二次改造供業(yè)務(wù)使用

| __ router 路由文件夾

| __ utils 公共工具文件夾

|__ common 。。。

|__ page

|__ utils

|__ widget

說明：

• model、provider、page在文件夾中一一對應(yīng)。

• 在一些簡單（簡單的單頁面數(shù)據(jù)展示：詳情頁）的頁面中，我們可以使用簡單的原生開發(fā)（setstate），不必拘泥于要用provider而用provider導(dǎo)致頁面過重，這樣就得不償失。

• 在使用本套開發(fā)模式時，請深入了解Flutter的渲染機(jī)制、state機(jī)制、Provider插件的使用及注意事項。

插件使用規(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：音頻錄取和播放

最后