一、Flutter初始入門構建window環境，並且執行helloWorld

Jeannette發表於2019-09-05
Flutter

@author: Jeannette

引言: Flutter框架已經不用過多解釋了，只要知道它是Google的提供的解決方案, 並且語法糖是Dart就可以了。目的就是一套程式碼解決Web, APP, Desktop多端問題，並且免費/開源。

官網: flutter.dev/

flutter執行概要

  1. flutter執行包
  2. Android-studio / flutter外掛
  3. vscode / flutter外掛
  4. 夜神模擬器

1. 首先需要從官網下載最新的flutter包

1-1 設定映象

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

1-2 安裝Flutter sdk

  • 通過git克隆下載git clone -b stable https://github.com/flutter/flutter.git
  • 通過官網下載https://flutter.dev/docs/development/tools/sdk/releases#windows

1-3 手動設定Flutter環境變數

1)開啟 【win選單-> 控制皮膚> 使用者帳戶> 使用者帳戶> 更改我的環境變數】
2)在【使用者環境】下檢查是否有名為【Path】的條目:
    2-1)如果該條目存在, 追加 flutter\bin的全路徑，使用 ; 作為分隔符.
    2-2)如果條目不存在, 建立一個新使用者變數 Path ，然後將 flutter\bin的全路徑作為它的值.
3)在【使用者變數】下檢查是否有名為【PUB_HOSTED_URL】和【FLUTTER_STORAGE_BASE_URL】的條目，如果沒有，也新增它們。
重啟Windows以應用此更改

複製程式碼

最後執行cmd執行 flutter version 進行檢查是否正常執行

1-4 執行flutter docker

用於檢查本地環境缺乏的內容，一開始還沒有安裝好Android-studio，一般都會報出此錯誤Android toolchain - develop for Android devices 與 Unable to locate Android SDK，請繼續第2步,說明你的系統還沒有進行配置與下載Android-studio, 至於其它錯誤一步步來

flutter doctor
複製程式碼
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.7.8+hotfix.4, on Microsoft Windows [Version 10.0.17763.194], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code, 64-bit edition
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available
複製程式碼

2. 安裝Android-studio與android-sdk

2.1 安裝Android-studio

推薦下載地址: http://www.android-studio.org/index.php/download 安裝完成後Start a new Android Studio project

一、Flutter初始入門構建window環境，並且執行helloWorld

隨便建立一個專案-然後一路Next就可以了， 最後Finish

一、Flutter初始入門構建window環境，並且執行helloWorld

2.2 設定Android-studio SDK 路徑並且安裝

在這裡不建議指定去C盤，由於SDK容量過大需要修改路徑 在Android-studio —> File -> Settings -> System Settings -> Android SDK -> 修改Android SDK Location路徑

一、Flutter初始入門構建window環境，並且執行helloWorld

選擇幾個Android SDK 版本勾選，並且點選Apply-> 進行下載 -> 最後點選 ok

下載時間過長，請慢等

一、Flutter初始入門構建window環境，並且執行helloWorld

2.3 在Android-studio下Setting - plugins 安裝flutter外掛

一、Flutter初始入門構建window環境，並且執行helloWorld

2.4 指定Android-sdk的系統環境變數

第一步：

 set ANDROID_HOME=F:\DEVLOP\Android-SDK
複製程式碼

第二步：指定環境變數-加入到path中

一、Flutter初始入門構建window環境，並且執行helloWorld

一、Flutter初始入門構建window環境，並且執行helloWorld

當安裝完成後， 再次執行 flutter doctor 原來報錯： Android toolchain - develop for Android devices 與 Unable to locate Android SDK就不會報錯了

3. 配置vscode

報錯：VS Code, 64-bit edition X Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

在vscode--> F1 --> install Extensions 新增 flutter 外掛 既可以解決

4. 安裝夜神模擬器並進行連線

  1. 首先本地執行adb命令看看是否有配置環境變數，如果adb能正常執行則代表已經配置
  2. 如果沒有配置adb環境變數，請將剛才放置Android-studio 存放sdk 的目錄下\platform-tools 的放置系統環境變數中

    如： F:\DEVLOP\Android-SDK\platform-tools

一、Flutter初始入門構建window環境，並且執行helloWorld

  1. 最後使用adb connect 127.0.0.1:62001 , 62001 是夜神埠

5. 建立與執行專案並且執行flutter run

  1. 使用vscode --> F1 --> Flutter New Project --> 命名 --> 建立專案後
  2. 開啟夜神模擬器
  3. 執行flutter run 進行執行， 會發現專案會執行在夜神模擬器中
  4. 在vscode-> 選中debug - > 開啟F5 , 進入除錯模式
  5. vscode中-> 在執行中熱載入r 和 熱過載R ? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
  6. 最後開啟 lib -> main.dart -> 修改build下的Text('Hello World')
    一、Flutter初始入門構建window環境，並且執行helloWorld

一、Flutter初始入門構建window環境，並且執行helloWorld

其他問題

flutter run 白屏：flutter run --enable-software-rendering
（這個辦法有點不好，就是熱載入的時候要手動在命令列輸入r）
報timeout超時問題是下載不了谷歌映象導致的（翻不了牆）：使用阿里映象,如下：
sdk路徑: E:\flutter\packages\flutter_tools\gradle\flutter.gradle
在flutter SDK資料夾找到flutter.gradle檔案修改buildscript.repositories裡的內容,註釋掉google()和jcenter()，增加下面三行程式碼：
maven{ url 'https://maven.aliyun.com/repository/google' }
        maven{ url 'https://maven.aliyun.com/repository/jcenter' }
        maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}

使用F5鍵啟動專案之後不能熱過載需要新增配置：在launch.json新增屬性：
"args": ["--enable-software-rendering", "-d", "all"]

複製程式碼
結語:
其實整個過程官網都有非常詳細的講解，只是過程中有一些細節可能會遇到一些報錯
至於IOS版本需要執行在xcode上面，這裡需要到蘋果電腦才能配置
做個總結，讓下一次配置更方便，謝謝大家。
複製程式碼

相關文章