Flutter走過的坑（持續更新）

1 Target of URI doesn't exist 'package:flutter/material.dart'

官方下載的flutter中有一個example文件夾，里面有很多flutter的小demo，打開其中一個demo，執行運行的指令后，出現該錯誤。

錯誤原因是沒有下載flutter依賴包，就像RN沒有執行npm install 一樣

解決方法：執行flutter packages get

2 flutter: command not found

flutter環境變量的配置

mac配置環境變量參考該網址https://jingyan.baidu.com/article/8065f87f47b29523312498e4.html

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

export PATH="$PWD/flutter/bin:$PATH"

關閉終端，重新打開一次就可以了

具體可以參考https://flutter.dev/community/china

3 Error on line 45, column 4 of pubspec.yaml: Expected a key while parsing a block mapping

assets:
^

assets前面多了一個空格，刪除就好了

4 More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

ios和flutter混合開發，使用flutter attach可以調試flutter代碼

但是運行flutter attach后並沒有出現預期的效果，而是出現了

More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

 

“xxx”的 iPhone • b13a6cf6ca28106dcbd0d6273c205d0fec8583aa • ios • iOS 12.1.2

iPhone X      • 108E3AF0-CFF1-4069-8989-0CF95B2EAD31     • ios • iOS 12.1 (simulator)

當時就仔細看第一行是啥意思，又上網查資料浪費的好長時間，感覺是個好低級的錯誤。

其實就是同時連接了2個設備，運行flutter attach -d <deviceId>選擇其中一個就可以了，

或者斷開一個設備，只連接一個設備就好了

 

5 A RenderFlex overflowed by 240 pixels on the right

渲染的部分超出屏幕右側的寬度了

解決外層包裹一個可以滑動的widget，例如SingleChildScrollView，

因為我是水平方向超出了，所以還需要加上

scrollDirection: Axis.horizontal,

 

6 ListView運行時, 報錯Vertical viewport was given unbounded height

解決

可以通過指定 shrinkWrap = true為了你 ListView。

ListView(
  shrinkWrap: true,
  children...
)

可參考： https://cloud.tencent.com/developer/ask/138715

 

7 ScrollView嵌套ListView滾動沖突

解決： ListView添加physics:NeverScrollableScrollPhysics()，禁用ListView的滾動。

 

8 使用Android Studio調試項目

我們點擊AS狀態欄的flutter attach可以調試我們的項目（打斷點，看變量等），當進入flutter頁面時，需要等一段時間才能連接上我的的手機或模擬器，而網絡請求部分在等待時間就請求完了，沒有進入斷點。

解決：在網絡請求前加一個延時（

await Future.delayed(Duration(seconds: 6,));

），這樣可以保證連接成功前還沒有運行到我們的斷電，成功后正常進入斷點。

 

9 The element type 'Type' can't be assigned to the list type 'Widget'

body: TabBarView(
        controller: model._tabController,
        children: <Widget>[
          Content,
          Content
        ]
      )


class Content extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Center(child: Text("測試"),);
  }

}

解決： 調用時加上小括號，將Content改成Content()就可以了

 10 dart中map方法獲取index

參考： https://cloud.tencent.com/developer/ask/207919/answer/321886

List arr = ["a", "b", "c"];
List.asMap().map((index, item)=> MapEntry(index,Text(item)
)).values.toList()

11 當電腦刪除原來的flutter sdk，然后在官網上下載最新的flutter版本后，建議重新更新環境變量，否則會有問題

 

12. 關於GestureDetector中onTap點擊事件對空白處點擊不相應的bug

GestureDetector(
  child: Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text("左"),
        Text("右")
      ],
    ),
  ),
  onTap: () {
    print("點擊了Container");
  },
);

如上代碼所示，當點擊文字“左”“右”時會觸發點擊時間，點擊其他地方並不會觸發點擊事件，如果想點擊其他空白處也觸發點擊事件，可以在Contaier加一個color屬性，如下代碼所示 

GestureDetector(
  child: Container(
    color: Colors.transparent,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text("左"),
        Text("右")
      ],
    ),
  ),
  onTap: () {
    print("點擊了Container");
  },
);

 13 由於本地flutter環境與服務器打包flutter環境不一致導致連續點擊2次flutter頁面崩潰的問題

原來使用的flutter版本為1.2.1，之后升級了flutter版本到1.5.4，對應pubspec.lock中對應的依賴版本有變化

只是本地升級，服務器環境沒有升級，所以打包時環境不對，出現了連續點擊2次flutter頁面導致崩潰，

升級服務器的flutter環境后，問題解決

 

14 pageView放在stack里，而此時stack是column的子組件，容易出錯，將放置順序調整為column放在stack里面，pageView放在column中沒有問題

需要主要stack和colum的放置順序

 

15  Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 110 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.

這個問題找解決方案找了很長時間

終於在這個網站https://stackoverflow.com/questions/52296387/scrollcontroller-jumpto-scrollcontroller-not-attached-to-any-scroll-views看到解決的要點

問題是出在

_pageController.animateToPage(
        _index, 
        duration: changeTimeOut, 
        curve: Curves.linear
      );

 我使用了上面的代碼，但是此時_pageController是沒有的（向上滑動后這部分UI不顯示了，所以flutter就不渲染了，我理解_pageController也就不存在了），所以報錯了。

解決方案是加一個判斷，等向上滑動后UI不顯示了，就不執行這部分代碼就好了

上面那個網站給出了是 if (_scrollController.hasClients){}

對應我的代碼的解決方案是if (_scrollController.offset < 200) {上面的代碼}

16 輸入flutter attach時出現以下提示 

Waiting for another flutter command to release the startup lock...

解決：

此時需要打開 flutter/bin/cache/lockfile，刪除就行了

參考：https://www.jianshu.com/p/7507d087e9f1

 

17 更新flutter版本1.7.8+hotfix.3后出現以下錯誤

Error: The argument type 'Null Function(ImageInfo, bool)' can't be assigned to the parameter type 'ImageStreamListener'.

 

解決方法： 

將出現錯誤的地方

_imageStream.addListener(_handleImageLoaded);

改成

_imageStream.addListener(ImageStreamListener(_handleImageLoaded));

 

18 [FATAL:flutter/third_party/txt/src/minikin/FontCollection.cpp(95)] nTypefaces == 0 

[ERROR:flutter/third_party/txt/src/minikin/FontFamily.cpp(184)] Could not get cmap table size!

原因是引用的字體或者圖標不存在

 

19 [FATAL:flutter/runtime/dart_vm.cc(380)] Error while initializing the Dart VM: Wrong full snapshot version, expected '1d7acad1540192ac459cf60344efb7c1' found 'c8562f0ee0ebc38ba217c7955956d1cb'

問題發生於升級flutter sdk之后，看上邊的日志Wrong full snapshot version可以猜測：升級了sdk，但是之前已生成的編譯產物還是舊的，不匹配，需要重新build一下

1） removing the content of flutter/bin/cache

2）  thenrunning flutter upgrade again

3） thenrunning flutter clean prior to flutter run

參考 https://juejin.im/post/5d1c596d6fb9a07ee742fa59

 

20 flutter升級到1.9.1 后 ios打包失敗 Flutter.framework: Permission denied

 

這是flutter官方的一個bug，查資料說flutter升級到1.10就好了

不升級flutter的情況下，可以改Flutter SDK 的一個文件，flutter/packages/flutter_tools/bin/xcode_backend.sh

144行

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" \;

=>

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -iname '.h' -exec chmod a-w "{}" \;

 21 

E/flutter_error: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════════════
The following NoSuchMethodError was thrown during paint():
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)

錯誤代碼：

Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          height: 40,
          width: 100
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: ...
        )
         
        topicListMainUIWidget()
      ],
    )        

錯誤原因是因為Row里是一個list，高度是不固定的，需要一個Expanded Widget把Row包裹起來