Flutter實際專案開發中踩坑大合集（持續更新..）

寫在前面

• 面向讀者：Web前端開發工程師|IOS開發工程師|安卓開發工程師|Flutter開發工程師
• 更新維度：暫且以時間（Time）維度更新，後續會慢慢調整為坑的型別（Type）
• 核心內容：尊重原創|企業開發中實錄|坑坑見血
• 更新時間：儘量以日為單位
• 共建精神：掘友在開發過程中所遇坑可在評論區留言，會更新在本篇之上
• 侵權聯絡：youngwanlia@gmail.com，牽扯到侵權的內容，請郵件聯絡（見核心內容）

傳送門

• Flutter實戰 從頭擼一個「孤島」APP（No.1、專案初始化、螢幕適配）
• Flutter實戰 從頭擼一個「孤島」APP（No.2、閃屏Splash Page、引導頁）

踩坑合集

---

2019-12-03

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
使用外掛	資料型別	0

坑描述

這個坑主要是在使用第三方外掛的時候，資料的引入問題，

坑截圖

坑解決

在從父元件傳來的資料的進行校驗很有必要，

List<List<num>> data;
    if (data1.length == 0 && data2.length != 0) {
      data = [data2];
    }
    if (data1.length != 0 && data2.length == 0) {
      data = [data1];
    }
    if (data1.length != 0 && data2.length != 0) {
      data = [data1, data2];
    }

    features = features.sublist(0, numberOfFeatures.floor());
    data = data
        .map((graph) => graph.sublist(0, numberOfFeatures.floor()))
        .toList();
    return Container(
      // width: width100,
      // height: height120,
      alignment: Alignment.center,
      // decoration:
      //     BoxDecoration(border: Border.all(width: 1, color: Colors.green)),
      // padding: EdgeInsets.only(left: 60),
      child: RadarChart.light(
        ticks: ticks,
        features: features,
        data: data,
        reverseAxis: true,
      ),
    );
複製程式碼

---

2019-11-29

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
網路請求	dio / 網路請求	0

坑描述

dio 上傳檔案的時候，res返回的是 null 但還是有正確的結果返回 在控制檯

坑截圖

坑解決

這個問題主要是因為我們在封裝的網路請求時設定的超時時間及連線時間，資料還是空的時候，就直接返回， 解決方案：更改一下connectTimeout``receiveTimeout

---

2019-11-28

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
基礎部件用法	decoration / color	0

坑描述

給一個Container，做修飾的時候，decoration裝飾器與color不建議一起使用

坑截圖

但是當兩者一起使用的時候

Cannot provide both a color and a decoration The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

坑解決

那問題主要是就像評論有人用了我的名字說的，存在斷言問題，我們把原始碼帖上來

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  }) : assert(margin == null || margin.isNonNegative),
       assert(padding == null || padding.isNonNegative),
       assert(decoration == null || decoration.debugAssertIsValid()),
       assert(constraints == null || constraints.debugAssertIsValid()),
       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
       ),
       decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),
       constraints =
        (width != null || height != null)
          ? constraints?.tighten(width: width, height: height)
            ?? BoxConstraints.tightFor(width: width, height: height)
          : constraints,
       super(key: key);
複製程式碼

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
資料模型	await/資料互動/型別報錯	0

坑描述

在等待後臺資料的時候，Future<dynamic>' is not a subtype of type 'Map<String, dynamic>'

坑截圖

坑解決

造成這個問題的原因是型別不匹配，在請求的時候，需要await等待返回的結果

---

2019-11-27

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
資料模型	Model/後臺資料	0

坑描述

在後臺返回的資料後，轉Model類的時候，丟擲異常，

坑截圖

坑解決

造成這個問題的原因是型別不匹配，可以嘗試在宣告初始化資料的時候，暫且使用var或者List等，不新增資料的型別，待結果返回後，再加上型別，配上一個截圖

2019-11-26

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
除錯配置	Vscode/Debug/launch.json/編輯器	0

坑描述

除錯Flutter 程式碼的時候用Debug模式，除錯控制檯，配置launch.json檔案

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以檢視現有屬性的描述。
    // 欲瞭解更多資訊，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Dart",
            "program": "bin/main.dart",
            "request": "launch",
            "type": "dart"
        }
    ]
}
複製程式碼

坑截圖

坑解決

刪除 生成的.vscode資料夾即可，然後重新debug

---

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
第三方外掛	Flutter匯入包/編輯器爆紅/引入失敗	0

坑描述

在引入第三方包後，已經正確在pubspec.yaml安裝了依賴,依然報錯誤

坑截圖

坑解決

方式一：再次確認 pubspec.yaml 有沒正確配置 方式二：再次檢查 import 匯入包的使用方式 方式三：重新flutter pub get 方式四：更新SDK版本 flutter upgrade 方式五：重啟所用編輯器

---

坑型別(type)	關鍵詞	是否進度（0坑已填/1進行中/-1坑待填）
第三方外掛	Chart/圖表/ charts_flutter/plot/散點圖	0

坑描述

在引入Google官方庫下的圖表外掛時，需要與後臺資料結合，傳值問題，SimpleScatterPlotChart.withRandomData(data)，建立資料地方後臺dataList取不到

坑截圖

坑解決

SimpleScatterPlotChart.withSampleData()就得到了這個顯示的圖表 這裡需要一個引數SimpleScatterPlotChart.withSampleData(orginData);

活躍社群

QQ平臺

• Flutter交流群 674639629
  • 關鍵詞： 前端屆大佬技術胖
  • 1群
  • 活躍指數：5顆星
• Flutter交流群2 806799257
  • 關鍵詞： 前端屆大佬技術胖
  • 2群
  • 活躍指數：5顆星
• Flutter中國開發者 860708630
  • 關鍵詞： 賈鵬輝的技術部落格官網
  • 慕課網《Flutter從入門到進階-實戰攜程網App》
  • 活躍指數：3顆星
• OpenFlutter 交流群 892398530
  • 關鍵詞： Github適用於Flutter的微信SDK
  • 開源Fluwx討論群
  • 活躍指數：4顆星
  • Fluwx 視訊教程：網易雲課堂-來自作者

B站平臺

• UP主：馬友發
• UP主：HansYangBilibili

youtube平臺

• HansYangBilibili

---

特別鳴謝

• JS瘦
  • github地址
  • Flutter 圖表相關坑

寫在最後

我是洋小洋同學，讓我們一起UP,這是我的個人站大鵬一日同風起，歡迎來玩~~

再見會再見

---