淺談跨平臺框架Flutter的搭建與執行

一、系統環境要求 ：要安裝並執行Flutter，開發環境必須滿足以下條件。

• 作業系統：Windows 7或更高版本（64-bit）；

• 磁碟空間：400MB；

• 工具：Flutter依賴PowerShell 5.0或更新的版本和Git for Windows（Git命令列工具）這些命令列工具。

我們可以去Flutter官網下載最新可用的安裝包。

下載地址：

注意：Flutter的渠道變動頻繁，請以官網為準。同時，我們也推薦去Flutter github專案下下載安裝包。

下載地址：

下載完成後，請先將安裝包zip解壓到想安裝Flutter SDK的路徑（注意：不要將Flutter安裝到需要高許可權的路徑，如 C:Files)。之後，在Flutter安裝目錄的flutter檔案下找到flutter_console.bat，雙擊執行並啟動flutter命令列。

二、更新環境變數： 若想在Windows系統自帶命令列執行flutter命令，開發者需要新增以下環境變數到使用者PATH：“控制皮膚->使用者賬戶->更改我的環境變數”，同時，在“使用者變數”下檢查是否有名為“Path”的條目：如果該條目存在，追加flutter \ bin的全路徑，使用；作為分隔符。如果該條目不存在，建立一個新使用者變數Path，然後將flutter \ bin的全路徑作為它的值。Flutter的執行需要聯網，還需要設定：

export PUB_HOSTED_URL=
export FLUTTER_STORAGE_BASH_URL=

三、執行flutter doctor命令： 開發者需在Flutter命令列執行flutter doctor命令來檢視是否需要安裝其它依賴，如果需要，則進行安裝。在終端中輸入flutter doctor，如果出現和下圖類似的結果，甚至得到的x比圖示更多，主要原因是沒有安裝Android studio。下面我們將列出Android Studio的安裝步驟。

四、Android Studio的安裝：

• 在官網下載Android Studio，下載地址：https://developer.android.com/；

• 啟動Android Studio，執行“Android Studio安裝嚮導”並安裝最新的Android SDK、Android SDK工具和Android SDK構建工具，這些都是用Flutter進行Android開發所需要的；

• 開啟Android Studio軟體，找到Plugin的配置，搜尋Flutter外掛，出現如圖所示頁面。點選中間“Search in repositories”，然後點選安裝，全部安裝完成後需重啟。

五、安裝Android證書

安裝好Android Studio後，再次開啟終端（命令列），輸入flutter doctor，這時x的數量會明顯減少，但可能還是會遇到1-2個，如果只有1個就說明沒有安裝證書，開發者只需在終端裡執行以下命令即可：

flutter doctor --android-licenses

當提示Y/N選擇時，請直接選擇Y即可完成安裝。

一、系統環境要求： 要安裝並執行Flutter，開發環境必須滿足以下條件。

• 作業系統： MacOS（64-bit）；

• 磁碟空間：大於700M，如果算上Android Studio等編輯工具，儘量大於3G；

• 命令列工具：bash、mkdir、rm、git、curl、unzip、which、brew。

二、下載Flutter SDK包：

推薦在官網下載，網址： 。

下載完成後，解壓安裝包到想安裝的目錄，如:cd ~/development

unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

三、配置環境變數

壓縮包下載好以後，選擇位置進行解壓，壓縮包解壓的位置在下面配置環境變數的時候仍要使用。

首先開啟終端工具，使用vim進行配置環境變數，命令如下：

vim ~/.bash_profile

然後，在開啟的檔案裡增加一行程式碼，配置flutter命令，使其在任何地方都可以使用。新增的程式碼為：

export PATH=/app/flutter/bin:$PATH

這行命令需要根據壓縮包解壓的位置來進行編寫，內容是你的路徑。配置完成後，還需用source命令重新載入，具體命令如下:

source ~/.bash_profile

完成以後， flutter的安裝工作已基本完成，但要進行開發，還需要使用命令來檢測其是否成功安裝。

四、檢查開發環境： 如上圖所示，已經成功安裝了Flutter，但是還不具備開發環境，可以用flutter doctor命令來檢查還需安裝的外掛和軟體。

五、安裝Xcode： 要為iOS開發Flutter應用程式，需要Xcode9.0或更高版本。

• 在蘋果商店安裝Xcode 9.0或更新版本。

• 配置Xcode命令列工具以使用新安裝的Xcode版本，命令如下：

sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer

在大多數的情況下，當你想要使用最新版本的Xcode時，這是正確的路徑。如果需要使用不同版本的Xcode，請指定相應的路徑。

• 確保Xcode許可協議是透過開啟一次Xcode或透過命令sudo xcodebuild –license 。

  
  

六、安裝Android Studio： 和Windows一樣，在Android裝置上構建並執行Flutter程式都需要先安裝Android Studio。

Flutter SDK有多個分支，如beta、dev、master、stable，其中stable為穩定分支，dev和master為開發分支。flutter安裝完成後，可以執行flutter channel，檢視所有分支。

若想升級flutter SDK，需要執行命令：flutter upgrade 。

該命令會同時更新Flutter SDK和flutter專案依賴包。若只更新專案依賴包（不包括Flutter SDK），可以使用以下命令：

flutter packages get 獲取專案所有的依賴包。
flutter packages upgrades 獲取專案所有依賴包的最新版本。

一、Android studio配置與使用

首先需要安裝兩個外掛，分別是Flutter和Dart外掛：

• Flutter外掛：支援Flutter開發工作流(執行、除錯、熱過載等)；

• Dart外掛：提供程式碼分析(輸入程式碼時進行驗證、程式碼補全等)。

1.安裝步驟

• 啟動Android Studio；

• 開啟外掛首選項 （MacOS：Preferences>Plugins, Windows：File>Settings>Plugins）；

• 先選擇 Browse repositories…，再選擇 flutter 外掛並點選 install；

• 重啟Android Studio後外掛生效。

2.建立Flutter應用

• 選擇 File>New Flutter Project ；

• 選擇 Flutter application 作為 project 型別, 然後點選 Next；

• 輸入專案名稱 (如 myapp)，點選 Next；

• 點選 Finish；

• 等待Android Studio安裝SDK並建立專案。

3.執行應用程式

• 定位到Android Studio工具欄；

• 在 target selector 中, 選擇一個執行該應用的Android裝置。如果沒有列出可用，請選擇 Tools>Android>AVD Manager 建立；

• 在工具欄中點選 Run圖示；

• 如果一切正常,在裝置或模擬器上會看到啟動的應用程式，如下圖所示：

4.體驗熱過載： Flutter可以透過熱過載實現快速的開發週期，熱過載無需重啟應用程式就能實時載入修改後的程式碼，並且不會丟失狀態。對程式碼進行簡單的更改，然後使用IDE或命令列工具進行重新載入，可以在裝置或模擬器上看到更改。

• 開啟`lib/main.dart`檔案；

• 將字串`'You have pushed the button this many times:'` 更改為`'You have clicked the button this many times:'`；

• 不要按“停止”按鈕，讓應用繼續執行；

• 要檢視更改，請呼叫 **Save** (`cmd-s` / `ctrl-s`)，或者點選 **熱過載按鈕** (帶有閃電圖示的按鈕)。

二、 VS Code的配置與使用

1.安裝flutter外掛：

• 啟動VS Code；

• 呼叫View>Command Palette...；

• 輸入'install'後選擇Extensions:Install Extension action；

• 在搜尋框輸入flutter，在搜尋結果列表中選擇'Flutter'並點選Install；

• 選擇'OK'並重新啟動VS Code；

• 驗證配置：首先，呼叫View>Command Palette...，輸入'doctor'，然後選擇'Flutter:Run Flutter Doctor'action。檢視“OUTPUT”視窗中的輸出是否有問題。

2.建立Flutter應用

• 啟動VS Code；

• 呼叫View>Command Palette...；

• 輸入'flutter'後選擇'Flutter:New Project'action；

• 輸入Project名稱(如myapp)並按Enter鍵；

• 指定防止專案的位置，然後確認；

• 等待專案建立繼續，並顯示main.dart檔案。

3.體驗熱過載

用VSCode編寫Flutter的缺點之一是需要手動載入更新應用，這在一定程度上影響了工作效率。當我們執行flutter run以後，會出現一段紅色的文字提示，如下所示：

• r 鍵：點選後熱載入，即重新載入；

• p 鍵：顯示網格，可以掌握佈局情況；

• o 鍵：切換Android和iOS的預覽模式；

• q 鍵：退出除錯預覽模式。

4.寫一個HelloWorld程式

當我們搭建好開放環境搭後，按照慣例我們需要寫一個HelloWorld程式。 將下面這段程式碼寫在根目錄.dart檔案中，作為Flutter主檔案。

import 'package:flutter/material.dart';
//主函式（入口函式），下面我會簡單說說Dart的函式
void main() =>runApp(MyApp());
// 宣告MyApp類
class MyApp extends StatelessWidget{
//重寫build方法
@override
Widget build(BuildContext context){
//返回一個Material風格的元件
return MaterialApp(
  title:'Welcome to Flutteraa',
  home:Scaffold(
    //建立一個Bar，並新增文字
    appBar:AppBar(
      title:Text('Welcome to Flutter'),
    ),
    //在主體的中間區域，新增一個hello world 的文字
    body:Center(
      child:Text('Hello World'),
    ),
    ),
    );
    }
}

結果如下圖所示：

Window下只支援為Android裝置構建並執行Flutter應用，而macOS同時支援iOS和Android裝置。下面將分別介紹如何連線Android和iOS裝置來執行flutter應用。

一、連線Android模擬器

在Android模擬器上執行並測試Flutter應用，請按照以下步驟操作：

• 啟動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device；

• 選擇一個裝置並選擇 Next；

• 為要模擬的Android版本選擇一個或多個系統印象，然後選擇 Next。建議使用 x86 或 x86_64 image；

• 在 “Emulated Performance”下, 選擇 Hardware - GLES 2.0 以啟用硬體加速；

• 驗證AVD配置是否正確，然後選擇 Finish；

• 在“Android Virtual Device Manager”中，點選工具欄的 Run。模擬器啟動並顯示所選作業系統版本或裝置的啟動畫面；

• 執行 flutter run 啟動您的裝置。連線的裝置名是 Android SDK built for <platform>，其中 platform 是晶片系列，如 x86。

二、連線Android真機裝置

要準備在Android裝置上執行並測試Flutter應用，需要Android 4.1或更高版本的Android裝置。

• 在Android裝置上啟用開發人員選項和USB除錯；

• 使用USB將手機插入電腦。如果裝置出現除錯授權提示，請授權你的電腦可以訪問該裝置；

• 在命令列執行 flutter devices 命令以驗證Flutter識別您連線的Android裝置；

• 執行啟動你應用程式 flutter run。

三、連線iOS模擬器

要準備在iOS模擬器上執行並測試Flutter應用，請按以下步驟操作：

• 在你的MAC上，透過 Spotlight 或以下命令找到模擬器:open -a Simulator；

• 透過檢查模擬器 Hardware > Device 選單中的設定，確保模擬器正在使用64位裝置（iPhone 5s或更高版本)；

• 根據電腦螢幕大小，模擬高畫質屏iOS裝置可能會溢位螢幕。可以在模擬器的 Window> Scale 選單下設定裝置比例；

• 執行 flutter run，啟動flutter應用程式。

四、連線iOS真機裝置

如果要將Flutter應用安裝到iOS真機裝置，除了需要一些額外的工具和一個Apple賬戶，還需要在Xcode中進行一些設定。

1.安裝homebrew(如果已經安裝了brew，跳過此步驟)；

2.開啟終端並執行如下這些命令：
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
如果這些命令中的任何一個失敗並出現錯誤，需要執行brew doctor並按照說明解決問題

3.遵循Xcode簽名流程來配置專案：

在你Flutter專案目錄中透過open ios/Runner.xcworkspace開啟預設的Xcode workspace。

• 在Xcode中，選擇導航皮膚左側中的Runner專案。
  在Runner target設定頁面中，確保在General > Signing > Team下選擇你的開發團隊。當你選擇一個團隊時，Xcode會建立並下載開發證書，向你的裝置註冊你的賬戶，並建立和下載配置檔案。

• 如果要開始你的第一個iOS開發專案，需要使用你的Apple ID登入Xcode。任何Apple ID都支援開發和測試，但若想將應用分發到App Store，就必須註冊Apple開發者計劃。

• 當你第一次使用attach真機裝置進行iOS開發時，需要同時信任你的Mac和該裝置上的開發證書。iOS裝置首次連線到Mac時，選擇信任。然後轉到iOS裝置上的設定選單，選擇常規>裝置管理並信任您的證書。

• 執行flutter run，啟動flutter應用程式。

個推技術團隊基於Flutter平臺也進行了不少開發和探索，其中訊息推送外掛Getui Flutter Plugin，作為一個特殊的Package，可以為Android和iOS提供底層封裝，在Flutter底層提供元件功能，使Flutter可以較為方便地呼叫Native模組。藉助Getui Flutter Plugin，開發者可以快速構建穩定高效的訊息推送系統，滿足日常的工作需求。

下載連結：