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

Flutter技術落地使用

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

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

一、學習路線

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

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

1. ?學習Dart語言：

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

2. ?學習Flutter UI框架：

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

Widget拓展 進階學習：flutter.cn/docs/develo…

二、進階學習：

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

四、拓展學習：

• 原生學習：Android、ios開發(fā)

  即使Flutter已經完成了大部分移動開發(fā)需要的Widget，但是還是有一些特殊的用戶需求需要我們去實現(xiàn)，既然是跨平臺開發(fā)，那就離不開原生開發(fā)！是的，如果需要深入移動領域，要學習原生！

• 深入學習Flutter運行機制

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

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

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 啟動一直在轉無法啟動 一直卡著菊花在轉 解決方案

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

listview顯示不全的解決辦法

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

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

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

軟鍵盤收起

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

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

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

FlutterEasyLoading導致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ā)揮我們視力系統(tǒng)強大的模式匹配能力。如果我們整個 Dart 生態(tài)系統(tǒng)中都使用統(tǒng)一的風格，那么這將讓我們彼此之間更容易的互相學習和互相貢獻。它使我們所有人都可以更容易地學習并為彼此的代碼做出貢獻。

一、命名

在 Dart 中標識符有三種類型。

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

要使用 UpperCamelCase 風格命名類型。

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

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

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

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

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

要使用 lowercase_with_underscores風格命名類型。

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

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

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

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 風格來命名。

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

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

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

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

二、順序

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

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

三、 格式化

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

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

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

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

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

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

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

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

????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. 對所有流控制結構使用花括號。

這樣可以避免 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?????}
????

項目結構規(guī)劃及實例說明

項目架構

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

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

lib

| __ assets 存放icon、page

| __ api 存放api配置文件夾

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

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

| __ models 存放model文件，與page文件一一對應存放

| __ providers 存放providerl文件，與page文件一一對應存放

| __ page 存放page頁面

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

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

| __ router 路由文件夾

| __ utils 公共工具文件夾

|__ common 。。。

|__ page

|__ utils

|__ widget

說明：

• model、provider、page在文件夾中一一對應。

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

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

插件使用規(guī)范

一、使用規(guī)范

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

二、插件匯總

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

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

2. ?dio：網絡請求插件

熟悉dio基本配置，攔截網絡請求做業(yè)務處理

3. ?flutter_screenutil：屏幕適配

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

4. ?shared_preferences：本地持久化

主要應用場景：少量本地化存取，例如：user信息、版信息。大批量、反復調用存取不建議使用。

5. ?mqtt_client：mqtt客戶端

6. ?sqflite：數據庫

主要應用場景：大批量數據本地化存取，例如：搜索歷史、聊天歷史等。注意使用是表的開關，以釋放內存。

7. ?device_info：設備信息

8. ?cached_network_image：圖片緩存

9. ?cached_video_player：視頻播放

10. ?wechat_assets_picker：圖片視頻選擇器

仿微信選擇圖片與視頻

11. ?path_provider：設備路徑

注意區(qū)分臨時文件路徑和項目文件路徑的區(qū)別

12. ?permission_handler：權限管理

13. ?isolate：線程管理使用

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

14. ?flutter_sound：音頻錄取和播放

最后