一、簡單介紹flutter

Build apps for any screen! 跨端多棧方案終結(jié)者
英文自學(xué)通道
中文自學(xué)通道

二、基礎(chǔ)軟件安裝

VScode 作為代碼編輯器
Android Studio 作為安卓simulator(模擬器)提供者
Xcode 作為 IOS simulator(模擬器)提供者
Flutter macOS 和windows 參照官網(wǎng)下載對應(yīng)最新包，配置好環(huán)境變量

// windows
1、下載最新包  https://docs.flutter.dev/get-started/install/windows
// 找個目錄存放你的flutter  要注意的是目標(biāo)路徑中避免特殊字符和空格，比如C:\Program Files\
2、應(yīng)解壓到比如 C:\src\flutter   

// 如果你不想安裝一個固定的flutter版本，而是不斷獲取新的flutter
3、可以不用做1,2，直接到目標(biāo)目錄比如 C:\src 下 執(zhí)行 git clone https://github.com/flutter/flutter.git -b stable
4、更新環(huán)境變量
// (1)轉(zhuǎn)到 “控制面板>用戶帳戶>用戶帳戶>更改我的環(huán)境變量
// (2)在“用戶變量”下檢查是否有名為“Path”的條目:如果該條目存在, 追加 flutter\bin的全路徑，使用 ; 作為分隔符.如果條目不存在, 創(chuàng)建一個新用戶變量 Path ，然后將 flutter\bin的全路徑作為它的值.
// (3)在“用戶變量”下檢查是否有名為”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目，如果沒有，也添加它們。然后重啟windows
// 注意 PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國內(nèi)開發(fā)者搭建的臨時鏡像，可以參考https://github.com/flutter/flutter/wiki/

// macOS
1、下載最新包  https://docs.flutter.dev/get-started/install/macos
// 找個目錄存放你的flutter
2、cd ~/development   
3、unzip ~/Downloads/flutter_macos_3.3.0-stable.zip
4、export PATH="$PATH:`pwd`/flutter/bin"
// 新開一個終端，診斷下flutter
5、flutter doctor

三、常見問題

• 1、cmdline-tools component is missing
  顧名思義，沒有安裝對應(yīng)的命令行工具
  解決方法:
  打開Android Studio，系統(tǒng)偏好Appearance & Behavior 下的Android SDK
  選擇SDK Tools 找到如下，apply 后 OK~
  
  下載命令行工具
• 2、Android license status unknown
  flutter 給了解決命令: flutter doctor --android-licenses 一路選y就行
• 3、CocoaPods not installed
  解決命令: sudo gem install cocoapods
• 4、CocoaPods installed but not working
  解決命令: sudo gem install cocoapods (重新裝下，要輸入用戶名密碼)
• 5、HTTP host "https://cocoapods.org/" is not reachable.
  類似問題還有比如 "HTTP host "https://pub.flutter-io.cn" is not reachable." ""https://storage.flutter-io.cn""
  解決方法: 找到flutter 安裝目錄，進入路徑/Users/luyouming/ flutter/packages/flutter_tools/lib/src/http_host_validator.dart 用vscode 打開編輯。如果公司不允許訪問外網(wǎng):
  • (1) 修改https://maven.google.com/為 google maven 的國內(nèi)鏡像http://maven.aliyun.com/repository/google/
  • (2) kPubDevHttpHost 改為 http://pub.flutter-io.cn/
  • (3) kgCloudHttpHost 改為 http://storage.flutter-io.cn/
  • (4) 進入到flutter\bin目錄，刪除cache目錄下的flutter_tools.snapshot 文件
  • (5) 在終端輸入flutter doctor，如果還有請求無法觸達(dá)的，單獨鏈接ping一下，試試，鏈接過時了，找對應(yīng)新的國內(nèi)鏡像地址即可，如果https地址不可訪問，換http 試試~

四、創(chuàng)建一個項目

一切就緒

1、選擇項目文件夾進入，創(chuàng)建你的第一個flutter 應(yīng)用

// 進入終端，找到目標(biāo)文件夾
cd Projects
flutter create flutter_app  // 注意命名用_隔開
code flutter_app // 安裝了vscode,可直接打開項目

2、VScode 配置flutter 插件

• Flutter
• Dart
• dart-import
• 打開settings 搜索hot reload ，把Flutter Hot Reload On Save 設(shè)置為all
  ** ps: 當(dāng)然還有很多的插件都是值得安裝的，我們這里只是先確保下我們的熱重載

3、打開一個模擬器

open -a  simulator // 開啟一個默認(rèn)是IOS的模擬器

4、跑起來

flutter run // 會運行到默認(rèn)打開的那個模擬器上
// 按F5 可以開啟調(diào)試模式，這樣就可以熱重載，修改之后立即生效啦~