（七）Flutter學習之開發環境搭建

Chiclaim發表於2019-07-28
Flutter開發環境

前面幾個章節介紹了 Flutter 的開發語言 Dart 的相關內容:

下面我們真正開始進入 Flutter 的部分了, 開發 Flutter 專案的 IDE 工具很多, 比如:

  • IDEA
  • AndroidStudio
  • VSCode

IDEA 環境準備

安裝 Flutter 外掛

進入 IDEA 的設定介面, 找到 plugin 選項, 然後搜尋 flutter :

IDEA Flutter Plugin

下載 Flutter SDK

進入 Flutter 官網：

flutter.dev/docs/get-st…,

然後選擇你的系統, 下載對應的 SDK 檔案

解壓完成後, 配置 PATH 環境變數, 路徑精確到 bin 目錄

然後在控制檯執行 flutter 命令: flutter doctor:

flutter-doctor

Flutter 相關命令

檢視當前安裝的 Flutter 版本

$ flutter --version

Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (3 months ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849
Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)
複製程式碼

從中可以看出： flutter 版本為 1.5.4-hotfix.2, flutter channel stable , Dart 語言版本為 2.3.0

檢視當前安裝的 Flutter 有哪些版本

$ flutter version

v1.7.8+hotfix.3
v1.8.1
v1.7.8+hotfix.2
v1.7.8+hotfix.1
v1.8.0
v1.7.11
v1.7.10
v1.7.9
v1.7.8
v1.7.7
v1.7.6
v1.7.5
v1.7.4
v1.7.3
...

複製程式碼

檢視正在使用的 Flutter channel

$ flutter channel

Flutter channels:
  beta
  dev
  master
* stable

複製程式碼

不同的 channel 分別代表的意思為:

  • master 當前程式碼樹的頂端, 最新的版本. 一般有很多新功能, 但是不保證以後會不會砍掉
  • dev 是最新的完全測試過的版本. 也包含了新功能
  • beta 每隔幾周都會選取近幾個月中最好的一個dev版本，當作 beta 版，這個版本是通過 Google 的 codelabs 測試的
  • stable 穩定版, 生產環境中使用

切換 flutter channel

flutter channel stable
複製程式碼

升級 Flutter SDK

flutter upgrade
複製程式碼

該命令會同時更新 Flutter SDK 和你的 flutter 專案依賴包. 如果你只想更新專案依賴包(不包括 Flutter SDK), 可以使用如下命令：

更新專案依賴包

// 獲取專案所有的依賴包
flutter packages get

// 獲取專案所有依賴包的最新版本
flutter packages upgrade 
複製程式碼

配置 SDK 路徑

下載完 Flutter SDK 之後, 配置 Flutter SDK path:

Flutter-SDK-path

如果安裝完 Flutter SDK, 你僅僅是像新建一個 Dart 專案, 瞭解下 Dart 語言, 還需要配置 Dart SDK 路徑

你也可以專門下載 Dart SDK, 其實 Flutter SDK 裡面已經包含了 Dart SDK, 在 cache 目錄:

dart-sdk

新建專案

配置好環境後就可以建立 Flutter 專案了, 建立 Flutter 工程可以通過命令:

flutter create my_project_name

// 指定 Android 和 iOS 的使用語言
flutter create -i swift -a kotlin your__project_name
複製程式碼

也可以通過 IDE 來建立工程, 比如通過 IDEA 來建立工程:

File -> Project -> Flutter :

create-flutter

flutter-create

對於上面的 project type 的選擇, 根據具體的情況來定:

  • 如果你建立的工程是最終給使用者安裝使用的, 請選擇 Application
  • 如果給 Android/iOS 開發者使用的, 請選擇 Plugin;
  • 如果是純 Dart 元件,例如 Widget 庫, 請選擇 Package

配置國內映象

如果在建立專案的過程中, 過了好久依然沒有反應, 比如通過命令建立一直處於這個狀態

Running "flutter packages get" in project_name...
複製程式碼

或者通過 IDE 建立專案, 一直處於 creating flutter project... 中

可能是因為無法訪問 Google 的問題, Google 為此提出的解決方案是配置國內的映象站

如果你是 Linux/Mac 系統, 配置如下環境變數:

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

如果你是 Windows 系統, 新增兩個環境變數:

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

執行專案

下圖是執行專案的關鍵功能:

flutter-run

執行效果如下圖所示:

flutter-hello

Reference

flutter.dev/docs/develo… flutter.dev/docs/develo… www.jianshu.com/p/2a1997c9a…

聯絡我

下面是我的公眾號，乾貨文章不錯過，有需要的可以關注下，有任何問題可以聯絡我：

公眾號: chiclaim

相關文章