Flutter基礎—開發環境與入門
Flutter開發環境的前提要求如下:
Windows 7以上版本(64位)、Mac或Linux作業系統(64位)
磁碟空間:400 MB(不包括Android Studio的磁碟空間)。
已經安裝及配置Git
Mac開發環境
Flutter SDK
Dart SDK與Flutter捆綁在一起,沒有必要單獨安裝Dart。在當前終端視窗執行以下命令使用Git安裝Flutter,並臨時設定PATH變數。
git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH
執行以下命令檢視是否有依賴關係需要安裝以完成設定,此命令檢查環境並向終端視窗顯示報告。
flutter doctor
首次執行flutter命令時,它會自動下載自己的依賴項並進行編譯。
開啟或建立$ HOME / .bash_profile
,注意每臺計算機上的檔案路徑和檔名可能不同。然後新增以下行。
export PATH=$HOME/flutter/bin:$PATH
執行source $HOME/.bash_profile
重新整理當前視窗,然後執行以下命令驗證flutter/bin
目錄在PATH中。
echo $PATH
安裝Xcode
通過網頁下載或Mac App Store安裝Xcode 7.2或更新版本,通過執行以下命令列,來配置Xcode命令列工具,以使用新安裝的Xcode版本。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
iOS模擬器
在Mac上設定iOS模擬器,需要通過Spotlight或使用以下命令找到Simulator。
open -a Simulator
通過檢查模擬器的Hardware > Device選單中的設定,確保模擬器正在使用64位裝置(iPhone 5s或更高版本)。
根據開發機器的螢幕尺寸,模擬的高螢幕密度iOS裝置可能會溢位螢幕。在模擬器的Window > Scale選單下設定裝置刻度。
iOS真機
要將Flutter應用程式部署到物理iOS裝置,需要一些其他工具和Apple帳戶,還需要在Xcode中設定物理裝置部署。
首先需要安裝homebrew,然後開啟終端並執行這些命令來安裝用於將Flutter應用程式部署到iOS裝置的工具。
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
如果這些命令失敗並出現錯誤,可以執行brew doctor
,並按照說明解決問題。
按照Xcode簽名流程來設定專案:
通過在Flutter專案目錄的終端視窗中執行
open ios/Runner.xcworkspace
,開啟專案中的預設Xcode工作區。在Xcode中,選擇左側導航面板中的
Runner
專案。在
Runner
設定頁面中,確保General > Signing > Team開發團隊被選擇。當選擇一個團隊時,Xcode將建立並下載開發證書,將您的設備註冊到您的帳戶,並建立下載配置檔案。
- 要啟動第一個iOS開發專案,需要使用Apple ID登入Xcode。第一次使用附加的物理裝置進行iOS開發時,需要相任該裝置上的Mac和開發證書。首次將iOS裝置連線到Mac時,請在對話方塊提示中選擇信任。
- 然後,轉到iOS裝置上的設定應用,選擇General > Device Management並信任證書。如果Xcode中自動簽名失敗,請驗證專案的General > Identity > Bundle Identifier值是否唯一。
執行Flutter
在設定好iOS模擬器或者iOS真機之後,執行以下命令,在專案目錄下新建並執行一個Flutter專案。
flutter create myapp
cd myapp
flutter run
如果成功執行專案,說明我們已經成功在Mac下配置完成。
Windows開發環境
Git
在控制面板>系統和安全>系統>高階系統設定>環境變數,Path變數中新增Git的路徑
C:\[你的Git路徑]\Git\cmd
Flutter SDK
開啟一個新的Cmd或PowerShell視窗,執行以下命令使用Git安裝Flutter
git clone https://github.com/flutter/flutter.git
在控制面板>系統和安全>系統>高階系統設定>環境變數,Path變數中新增Flutter的路徑
C:\[你的Flutter路徑]\flutter\bin
安裝完成後,再開啟一個新的Cmd或PowerShell視窗,並執行以下命令來檢視是否需要安裝依賴關係以完成安裝
flutter doctor
Android SDK
到Android官網下載Android SDK安裝包並安裝
安裝完成後,Flutter需要最新的Android SDK和Android SDK Platform-Tools軟體包,使用SDK Manager下載。
IntelliJ IDE
到IntelliJ官網下載IntelliJ IDE安裝包並安裝
IntelliJ IDE開發Flutter專案需要Flutter和Dart外掛,搜尋並下載Flutter和Dart外掛
IntelliJ IDE>Plugins
(如果搜尋不到Flutter外掛,可以離線下載安裝)
建立專案
安裝Flutter和Dart外掛後,重啟IntelliJ IDE,選擇建立專案,配置Flutter和Dart路徑
完成上一步操作後按下一步建立專案
專案建立後,如上圖,main.dart是預設生成的程式碼檔案,綠色倒三角表示手機已經連線,點選即可除錯專案。
Linux開發環境
Dart SDK
開啟終端,輸入命令,更新軟體源
sudo apt-get update
輸入命令,啟用HTTPS傳輸
sudo apt-get install apt-transport-https
輸入命令,獲取谷歌Linux軟體包簽名金鑰
sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
輸入命令,建立與谷歌伺服器的穩定連線
sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
輸入命令,更新軟體源
sudo apt-get update
輸入命令,安裝最新的DartSDK
sudo apt-get install dart
輸入命令,檢視Dart版本
dart --version
Java SDK
在Java官網下載JDK的tar.gz檔案,在下載目錄下開啟終端,輸入命令,解壓檔案
tar zxvf jdk-8u102-linux-x64.tar.gz
將終端位置移動至/usr/local/lib下,輸入命令,移動檔案
sudo mv /home/hekaiyou/下載/jdk1.8.0_102/ .
將終端位置移動至/usr/local/bin下,輸入命令,建立java軟連結
sudo ln -s /usr/local/lib/jdk1.8.0_102/bin/java java
輸入命令,驗證java軟連結的正確性
java -version
輸入命令,開啟/etc/profile檔案,設定Java環境變數
sudo vim /etc/profile
export JAVA_HOME=/usr/local/lib/jdk1.8.0_102
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=$JAVA_HOME/bin:$PATH
輸入命令,重新載入/etc/profile檔案
source /etc/profile
輸入命令,驗證java環境變數
echo $JAVA_HOME
Android SDK
在Android官網下載AndroidSDK,下載基本的 Android 命令列工具即可,不需要IDE。下載完成後,在下載目錄下開啟終端,輸入命令,解壓檔案
sudo mv /home/hekaiyou/下載/android-sdk-linux/ .
將SDK檔案移動至存放目錄,在存放目錄下輸入命令,開啟android工具下載相關內容
android-sdk-linux/tools/android
輸入命令,開啟/etc/profile檔案,設定Android環境變數
sudo vim /etc/profile
export SDK_HOME=/home/hekaiyou/文件/android-sdk-linux/
export PATH=$SDK_HOME/tools:$SDK_HOME/platform-tools:$PATH
輸入命令,重新載入/etc/profile檔案
source /etc/profile
輸入命令,檢視android幫助
android -h
Git
開啟終端,輸入命令,安裝Git
sudo apt-get install git
輸入命令,配置git使用者名稱和郵箱
git config --global user.name "[使用者名稱]"
git config --global user.email "郵件地址"
Flutter SDK
開啟終端,輸入命令,從git克隆flutterSDK到終端所在目錄
git clone https://github.com/flutter/flutter.git
輸入命令,開啟/etc/profile檔案,設定Flutter環境變數
sudo vim /etc/profile
export PATH=/home/hekaiyou/flutter/bin:$PATH
輸入命令,重新載入/etc/profile檔案
source /etc/profile
輸入命令,檢視是否需要安裝其他依賴元件
flutter doctor
輸入命令,檢視Flutter配置
flutter config
Flutter開發入門
連線Android裝置
手機開啟除錯模式,用USB線連線電腦,電腦開啟終端,輸入命令,驗證連線裝置
flutter devices
建立Flutter專案
將終端目錄移動至專案資料夾下,輸入命令,建立Flutter專案
flutter create myapp
執行Flutter專案
將終端目錄移動至專案根目錄下,輸入命令,執行Flutter專案
flutter run
在連線電腦的Android裝置上會執行Flutter專案
使用IDEA開發Flutter
啟動IDEA-IC後,按下圖所示,點選Plugins進入外掛管理頁面
在外掛管理頁面,搜尋Dart、Flutter兩個外掛並點選安裝
下載外掛後,點選建立新專案,先選擇Dart,在對應位置填入Dart SDK的path
最後再選擇Flutter,在對應位置填入Flutter SDK的path,然後點選建立按鈕,就可以建立一個新的Flutter專案了