flutter前端入門踩坑記錄

flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。 flutter能夠與現有的代碼一塊兒工做。在全世界，flutter正在被愈來愈多的開發者和組織使用，而且flutter是徹底免費、開源的。flutter使構建精美的移動應用程序變得輕鬆快捷。

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

• 官方中文文檔
• 官方英文安裝文檔
• GitHub

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/
複製代碼

3. 解壓到目標路徑 輸入上述命令後，緊接着上面的窗口輸入解壓命令，確保文件能解壓到目標路徑,~/Downloads/ 表示安裝包的路徑

unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
複製代碼

• 查看文件路徑：把文件拖到瀏覽器中會顯示文件路徑

4. 配置 flutter 的 PATH 環境變量：

export PATH="$PATH:`pwd`/flutter/bin"
複製代碼

這個命令配置了 PATH 環境變量，且只會在你 當前 命令行窗口中生效。 若是想讓它永久生效，還須要 更新 PATH 環境變量。

• 更新 PATH 環境變量 （1）首先肯定你想要把Flutter SDK 放置在哪個目錄內，獲取並記錄這個目錄的路徑 打開或者建立，本文檔的路徑爲 /Applications/honghong/study/flutter/

2. 打開或者建立 打開終端，輸入如下命令

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卸載了 就再也裝不上了，不知道什麼緣由，先熟悉語法和功能，後面再解決真機的問題

2. 切換到項目路線：

cd flutter_app
複製代碼

3. 要在模擬器中啓動應用程序，請確保模擬器正在運行（如何運行模擬器，請參考【設置iOS模擬器】），而後輸入：
   

$ flutter run
複製代碼

第一次運行這個命令須要等好幾分鐘的時間
啓動項目後出現如下界面：

此時咱們能夠用編輯器打開代碼看一下代碼結構：

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，須要在編輯器中下載擴展插件：

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 ，出現如下界面表示安裝成功。

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

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佈局原理，理解主軸、交叉軸等知識。因爲沒有開發者帳號，目前我只發佈了安卓版本的，併成功安卓到安卓手機。以上就是個人踩坑總結和心得

感謝你們的閱讀，若是文中有不當的地方，麻煩指出來，我及時更正。