flutter前端入門踩坑記錄

青成發表於2020-06-03
Flutter前端

flutter前端入門踩坑記錄

flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 flutter可以與現有的程式碼一起工作。在全世界，flutter正在被越來越多的開發者和組織使用，並且flutter是完全免費、開源的。flutter使構建精美的移動應用程式變得輕鬆快捷。

本文的安裝環境和開發步驟文件不推薦完全照著開發，因為不會涉及的很細節，而且官方的文件（直接看英文官方文件，中國的文件可能由於翻譯不及時，也會踩坑）一直都在更新和變化，推薦去flutter官網跟著步驟和提示一步步走，本文主要是記錄一些踩坑問題和心得。

1. 安裝與環境配置

1.1. 系統配置要求

  • 作業系統：MacOS（64位）
  • 磁碟空間：700 MB（不包含 IDE 或其餘工具所需要的磁碟空間）
  • 命令工具：Flutter 需要你的開發環境中已經配置了以下命令列工具。
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which 可以檢視軟體按照目錄，如which node

如何檢視開發環境是否配置了命令列工具？

  1. 開啟終端
  2. 輸入 xx --help,如輸入 git --help，如果出現git相關的命令， 表示開發環境中已經配置了 git 命令列工具，如圖：

1.2. 獲取Flutter SDK

  1. 下載 MacOS 版本的 flutter 安裝包
  2. 開啟終端，定位到目標路徑，比如：
cd /Applications/honghong/study/flutter/
複製程式碼
  1. 解壓到目標路徑 輸入上述命令後，緊接著上面的視窗輸入解壓命令，確保檔案能解壓到目標路徑,~/Downloads/ 表示安裝包的路徑
unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
複製程式碼
  • 檢視檔案路徑：把檔案拖到瀏覽器中會顯示檔案路徑
  1. 配置 flutter 的 PATH 環境變數：
export PATH="$PATH:`pwd`/flutter/bin"
複製程式碼

這個命令配置了 PATH 環境變數，且只會在你 當前 命令列視窗中生效。 如果想讓它永久生效，還需要 更新 PATH 環境變數。

  • 更新 PATH 環境變數 （1）首先確定你想要把Flutter SDK 放置在哪一個目錄內，獲取並記錄這個目錄的路徑 開啟或者建立，本文件的路徑為 /Applications/honghong/study/flutter/
  1. 開啟或者建立 開啟終端，輸入以下命令
open $HOME/.bash_profile
複製程式碼

開啟檔案後加入一下程式碼： export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

1.3. 設定iOS模擬器

要準備在iOS模擬器上執行和測試flutter應用，請按照以下步驟操作：

  1. 在Mac上，通過Spotlight或使用以下命令找到Simulator：
    content_copy
$ open -a Simulator
複製程式碼
  1. 通過檢查模擬器的“ **硬體”>“裝置”**選單中的設定，確保模擬器使用的是64位裝置（iPhone 5s或更高版本）。
  2. 根據開發計算機的螢幕大小，模擬的高螢幕密度iOS裝置可能會溢位螢幕。在模擬器的“ **視窗”>“比例”**選單下設定裝置比例 。

2. 建立並執行一個簡單的 Flutter 應用

  1. 通過允許以下命令來建立一個新的 Flutter 應用
flutter create flutter_app
複製程式碼

建立時 遇到的坑

  • 需要等很長很長未知的時間，原來網路問題。。。


翻譯後：

  • 暫時不配置真機，真機能成功 但是一旦你把app解除安裝了 就再也裝不上了，不知道什麼原因，先熟悉語法和功能，後面再解決真機的問題
  1. 切換到專案路線：
cd flutter_app
複製程式碼
  1. 要在模擬器中啟動應用程式，請確保模擬器正在執行（如何執行模擬器，請參考【設定iOS模擬器】），然後輸入：
$ flutter run
複製程式碼

第一次執行這個命令需要等好幾分鐘的時間
啟動專案後出現以下介面：

此時我們可以用編輯器開啟程式碼看一下程式碼結構：

image.png

3. 編輯工具設定

（一）安裝Android Studio 下載安裝成功後，開啟編輯器時彈出 Unable to access Android SDK add-on list（Unable to access Android SDK add-on list） 的錯誤，是網路原因導致的
Android Studio，IntelliJ或VS Code等編輯器新增編輯器外掛都支援的，我選擇的編輯器是VSCode，需要在編輯器中下載擴充套件外掛：

image.png

4. 開發程式碼

4.1. 下載新依賴

flutter pub get
複製程式碼

4.2. http請求封裝（部分程式碼）

import 'dart:async';
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:shared_preferences/shared_preferences.dart';

var request = new Dio(BaseOptions(
  baseUrl: "",
  connectTimeout: 5000,
  // 5s
  headers: {'api': '1.0.0', 'channel': '2'},
  contentType: Headers.jsonContentType,
  // Transform the response data to a String encoded with UTF8.
  // The default value is [ResponseType.JSON].
  responseType: ResponseType.plain,
));

class HttpUtils {
  static String csrfToken;
  // 獲取本地儲存的token
  static Future<dynamic> getCsrfToken() async {
    csrfToken = '';
    Future<dynamic> future = Future(() async {
      SharedPreferences _prefs = await SharedPreferences.getInstance();
      return json.decode(_prefs.getString('userInfo'));
    });
    // 請求攔截器
    request.interceptors
        .add(InterceptorsWrapper(onRequest: (RequestOptions options) {
      future.then((value) {
        csrfToken = value['csrfToken'] ?? null;
        options.headers['csrfToken'] = csrfToken == null ? null : csrfToken;
        return options;
      });
    }));
  }

  static Future get(String url, Map<String, dynamic> params) async {
    // 請求攔截器
    await getCsrfToken();
    var response;
    print('get請求header頭:+${request.options.headers}');
    response = await request.get(url, queryParameters: params);
    return response.data;
  }

  static Future post(String url, params) async {
    // 請求攔截器
    await getCsrfToken();
    var response;
    response = await request.post(url, data: params);
    return response.data;
  }
}

複製程式碼

4.3. UI元件

使用 material 元件，

5. 踩坑記錄

5.1. 安裝過程中

5.1.1. flutter安裝不成功，執行失敗

如果您位於中國，多半是和網路有關係，因為flutter是國外的，需要訪問 pub.flutter-io 網址，如果無法訪問，則需要配置映象，請參見本頁：

flutter.dev/community/c…

5.1.1.1. 配置Flutter使用映象站點

如果您在中國安裝或使用Flutter，使用託管Flutter依賴項的可信任本地映象站點可能會有所幫助。要指示Flutter工具使用備用儲存位置，需要在執行命令之前設定兩個環境變數PUB_HOSTED_URL和 。FLUTTER_STORAGE_BASE_URL``flutter
以MacOS或Linux為例，以下是使用映象站點的設定過程的前幾個步驟。在要儲存本地Flutter克隆的目錄中的Bash shell中執行以下命令：
content_copy

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
複製程式碼

完成這些步驟後，您應該能夠繼續 正常設定Flutter。從這裡開始，包通過獲取flutter pub get來自被下載flutter-io.cn在任何外殼PUB_HOSTED_URL 和FLUTTER_STORAGE_BASE_URL設定。
該flutter-io.cn伺服器是GDG China維護的Flutter依賴項和軟體包的臨時映象。Flutter團隊不能保證此服務的長期可用性。如果有其他映象，您可以自由使用。如果您有興趣在中國設定自己的映象，請聯絡 flutter-dev@googlegroups.com 尋求幫助。

按照以上步驟設定後，執行 flutter doctor 測試一下 flutter ，出現以下介面表示安裝成功。

image.png


同時還會自動幫你檢測你電腦上的IDE版本或者licenses是否支援，需要用哪個編輯器就按照提示去安裝或者更新即可。
image.png

5.2. 啟動過程

啟動過程遇到太多坑了，比如模擬器是依賴Xcode，Xcode需要更新到最新版本，但是Xcode的更新又依賴macOS的更新，macOS和Xcode更新都特別慢，大概花了兩個小時搞定。建立的專案終於能啟動成功。

5.2.1. "flutter run" prints warning multiple times after switching Flutter SDK's

可以通過在系統上專案的根目錄中執行flutter pub get來解決此問題

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

刪除以下檔案且保證網路通暢

<YOUR FLUTTER FOLDER>/bin/cache/lockfile
複製程式碼


/Users/luohong/.nvm/versions/node/v12.7.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/honghong/⁨github⁩/⁨pms-flutter⁩/flutter/bin
如果是在VSCode中輸入flutter命令，那麼刪除檔案後需要關閉編輯器，重新開啟。

如果上面路徑下提示成功，在其他路徑下提示不成功，那麼進行下面命令：

vim ~/.zshrc

在開啟的檔案裡最下面增加一行程式碼，就是配置的路徑

export PATH=/Users/使用者名稱/Desktop/Flutter/flutter/bin:$PATH

儲存退出後，再使用source命令重新載入一下：

source ~/.zshrc

到這裡，應該可是在任何路徑下使用flutter命令了。

5.2.3. Failed to launch iOS Simulator

Failed to launch iOS Simulator: Error: Emulator didn't connect within 60 seconds
Cannot launch without an active device
解決方法：

  • 第一步：flutter clean
  • 第二步：I got same problem and fixed by this:

rm -rf <flutter_repo_directory>/bin/cache && flutter doctor -v
參考連結：github.com/flutter/flu…

5.2.4. Error running pod install

Error launching application on iPhone SE (2nd generation).
解決方法：

  • 部署到iOS裝置

要將Flutter應用程式部署到物理iOS裝置，您需要第三方CocoaPods依賴關係管理器和Apple Developer帳戶。您還需要在Xcode中設定物理裝置部署。

  1. 通過執行以下命令來安裝和設定CocoaPods：
    content_copy
$ sudo gem install cocoapods
$ pod setup
複製程式碼

5.2.5. Error output from CocoaPods:

Error output from CocoaPods:
↳
    /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin19/rbconfig.rb:229: warning: Insecure world
    writable dir /Applications/honghong/github/pms-flutter/flutter in PATH, mode 040777

    [!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a
    platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Error running pod install
Error launching application on iPhone SE (2nd generation).
複製程式碼

解決方法：
這裡說的是需要安裝ios依賴，需要去ios根目錄安裝

cd ios
pod install --verbose
複製程式碼
複製程式碼

每次修改完成ios記得執行下 flutter clean
（pod是ios的包管理器命令，包管理器叫CocoaPods）
完成之後，這時候

[!] `<PBXGroup UUID=`97C146E51CF9000F007C117D`>` attempted to initialize an
    object with an unknown UUID. `CF3B75C9A7D2FA2A4C99F110` for attribute:
    `children`. This can be the result of a merge and  the unknown UUID is being
    discarded.
複製程式碼
複製程式碼
Error output from Xcode build:
↳
    ** BUILD FAILED **
Xcode's output:
↳
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    error:
    /Users/xiexiuyue/Documents/www/flutter/cjyy/ios/Flutter/Debug.xcconfig:1:
    could not find included file 'Pods/Target Support
    Files/Pods-Runner/Pods-Runner.debug.xcconfig' in search paths (in target
    'Runner')
    warning: Capabilities for Runner may not function correctly because its
    entitlements use a placeholder team ID. To resolve this, select a
    development team in the build settings editor. (in target 'Runner')
    note: Using new build systemnote: Planning buildnote: Constructing build
    description
Could not build the application for the simulator.
Error launching application on iPhone Xʀ.
複製程式碼
複製程式碼

安裝一些外掛會導致iOS原生程式碼發生變化，這時候如果以為單單是因為改了然後恢復原來的，繼續執行，如果發現錯誤就clean然後繼續，會發現錯誤繼續。
沒錯，flutter run 、 flutter pub get 都會導致iOS原生程式碼的修改，這時候不管怎麼搞，程式碼都無法執行，這時候就得找到上次得程式碼了，然後看最近新增的幾個包裡面，排查是哪個包出現的問題。
連結：juejin.im/post/5d91ef…
**解決辦法：**是使用移除sudo gem uninstall cocoapodsCocoapods sudo gem install cocoapods -v 1.7.5，然後使用，然後安裝Cocoapods 1.7.5 pod setup。

I'm also getting this issue with 1.8.1, I can also confirm installing cocoapods 1.7.5 fixes it. Make sure to uninstall previous versions or it won't work! :)

sudo gem uninstall cocoapods
If using brew, run this too: brew uninstall cocoapods

sudo gem install cocoapods -v 1.7.5
pod setup
flutter doctor -v
Maybe there should be a (temporary) note in the docs in the iOS setup while this is fixed.

Edit: version 1.8.1 is now working as expected so no need for this workaround, see #41491
複製程式碼

github.com/flutter/flu…

5.2.6. getter 'value' was called on null

如果您已經為變數建立並分配了值，但該變數仍然顯示getter 'value' was called on null，請嘗試使用Run或Restart應用代替Hot Reload。因為Hot Reload將不會呼叫initstate()（變數將為其賦值），該呼叫只會由Restarting應用程式呼叫。

5.3. 真機除錯

5.3.1. iOS真機

5.3.1.1. Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator.

flutter.dev/docs/develo…
github.com/flutter/flu…

I can confirm the bug exists when using Flutter (0.5.7-pre.105) with latest beta of Xcode (10.0 beta 3). As you can read from build log, Flutter.framework/Flutter executable has indeed wrong access permissions ("write" flag is missing for "owner"). I didn't manage to solve the problem, but I noticed that switching to legacy build system in Xcode helps.

Open ios/Runner.xcworkspace in Xcode 10 beta 3
From Xcode menu select: "File ~> Workspace settings..."
Change selected build system from "New build system (Default)" to "Legacy build system"
If there is no Runner.xcworkspace in ios directory, open Runner.xcodeproj and instead of "Workspace Settings..." choose "Project settings...", rest is the same.

I think the issue could be a bug in "New build system" that comes with Xcode 10 (that would mean it's independent from Flutter), or it could be a problem with build configuration for Flutter.framework. Anyway, as a workaround we can just switch to legacy build system (known as a default one from previous versions of Xcode) and the problem should disappear.
複製程式碼

5.3.2. Android真機

5.3.2.1. flutter啟動超時失敗

解決方法：所有的配置請求地址一定要改為國內映象，重啟編輯器，flutter clean這幾個步驟不能少。
www.jianshu.com/p/171a9660e…

6. 釋出應用

6.1. 釋出Android apk

Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java

複製程式碼

上面的路徑替換掉 keytool

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

複製程式碼

替換後為：

/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home/bin/java -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
複製程式碼
192:pms_flutter luohong$ keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
輸入金鑰庫口令:  

複製程式碼

在命令列中：

  1. 輸入cd <app dir>
    （替換<app dir>為應用程式的目錄。）
  2. 執行flutter build apk --split-per-abi
    （flutter build命令預設為--release。）

此命令產生三個APK檔案：

  • <app dir>/build/app/outputs/apk/release/app-armeabi-v7a-release.apk
  • <app dir>/build/app/outputs/apk/release/app-arm64-v8a-release.apk
  • <app dir>/build/app/outputs/apk/release/app-x86_64-release.apk

7. 注意事項

  1. 網路條件滿足的情況下，安裝並啟動成功demo，按照提示一步步走是非常順利的。
  2. 儘量檢視官方的英文資料，這些是一手資料，檢視issuses ,檢視和自己遇到相同問題的人，注意版本問題。

8.參考資料

9. 心得和體會

app的開發需要一臺效能好的電腦和良好的網路條件，佈局的時候要熟悉flex佈局原理，理解主軸、交叉軸等知識。由於沒有開發者賬號，目前我只釋出了安卓版本的，併成功安卓到安卓手機。以上就是我的踩坑總結和心得

感謝大家的閱讀，如果文中有不當的地方，麻煩指出來，我及時更正。

相關文章