前面幾個章節介紹了 Flutter
的開發語言 Dart
的相關內容:
- (一)Flutter學習之Dart變數和型別系統
- (二)Flutter學習之Dart展開操作符 和 Control Flow Collections
- (三)Flutter學習之Dart函式
- (四)Flutter學習之Dart操作符、控制流和異常處理
- (五)Flutter學習之Dart物件導向
- (六)Flutter學習之Dart非同步操作詳解
下面我們真正開始進入 Flutter
的部分了, 開發 Flutter
專案的 IDE
工具很多, 比如:
- IDEA
- AndroidStudio
- VSCode
IDEA 環境準備
安裝 Flutter 外掛
進入 IDEA
的設定介面, 找到 plugin
選項, 然後搜尋 flutter
:

下載 Flutter SDK
進入 Flutter 官網:
然後選擇你的系統, 下載對應的 SDK
檔案
解壓完成後, 配置 PATH
環境變數, 路徑精確到 bin
目錄
然後在控制檯執行 flutter
命令: 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
, 你僅僅是像新建一個 Dart
專案, 瞭解下 Dart
語言, 還需要配置 Dart SDK
路徑
你也可以專門下載 Dart SDK
, 其實 Flutter SDK
裡面已經包含了 Dart SDK
, 在 cache
目錄:

新建專案
配置好環境後就可以建立 Flutter
專案了, 建立 Flutter
工程可以通過命令:
flutter create my_project_name
// 指定 Android 和 iOS 的使用語言
flutter create -i swift -a kotlin your__project_name
複製程式碼
也可以通過 IDE
來建立工程, 比如通過 IDEA
來建立工程:
File -> Project -> Flutter :


對於上面的 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
複製程式碼
執行專案
下圖是執行專案的關鍵功能:

執行效果如下圖所示:

Reference
flutter.dev/docs/develo… flutter.dev/docs/develo… www.jianshu.com/p/2a1997c9a…
聯絡我
下面是我的公眾號,乾貨文章不錯過,有需要的可以關注下,有任何問題可以聯絡我:
