1. 程式人生 > >Flutter基礎—開發環境與入門

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專案了