【Flutter 1.2】Flutter的安裝過程

Apr 28, 2019 · 1 min read · flutter dart install  ·
Share on:

iOS、Anroid也差不多邁入第十年，相信App Store、Google Play上的APP早就滿坑滿谷，人類能想出來的創意也差不多了，現在APP應該是求快速開發、雙平臺維護方便的道路前進才是。當然，能做手機雙平臺的IDE，不只有Google的Flutter而已，像是Facebook的React Native，Mircosoft的Xamarin，還有Adobe的PhoneGap、Apache的Cordova。今天為什麼是選擇Flutter呢？除了它爸爸Google有錢之外，Android系統跟甲骨文在使用Java API上的官司，相信Android系統早晚會棄用Java，而使用Dart的，另外加上Google Fuchsia的出現，相信Flutter除了在智慧型手機上應用之外，也能在桌面程式上能有一片天。而現在，就來記錄Flutter在macOS上的安裝過程，讓我們繼續看下去。

安裝過程

環境安裝

安裝工具 (安裝過程就不贅述)
  1. Brew - 等一下要安裝一些軟體用的
  2. Xcode - iOS的開發環境
  3. Android Studio - Android的開發環境
  4. VSCode - 好用的文字型IDE
安裝Flutter SDK
  1. 下載Flutter SDK
  2. 解壓縮下載檔案至桌面，並將資料夾更名為『FlutterSDK』
  3. 設定flutter執行檔路徑
cd ~/Desktop/FlutterSDK/
ls
export PATH="$PATH:`pwd`/bin"
echo $PATH
flutter precache

  1. 看看還有缺什麼沒有裝的
flutter doctor

  1. 當然測試成功的話，可以直接寫在『~/.bash_profile』內，就不用每一次都要重新設定$PATH了
code ~/.bash_profile


export PATH=$PATH:"~/Desktop/FlutterSDK/bin/"

source ~/.bash_profile
設定Android Studio及Xcode的相關元件
  1. 設定Android Studio及Xcode的相關元件，然後再看看還有什麼沒有設定的
flutter doctor --android-licenses

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

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

flutter doctor

  1. 安裝VSCode的flutter套件，然後再看看還有什麼沒有設定的 
flutter doctor

  1. 安裝Android Studio的flutter套件 
flutter doctor

  1. 開啟iPhone模擬器，至此應該就設定完成了
open -a Simulator
flutter doctor

利用指令建立第一支flutter App
  1. 建立flutter專案
cd ..
flutter create flutter_helloworld


cd flutter_helloworld
flutter run

利用Android Studio建立第二支flutter App
  1. 建立新的flutter專案
  2. 設定專案名稱及Flutter SDK路徑
  3. 設定專案domain
  4. 設定Android模擬器，然後執行 (設定模擬器過程就不贅述)
  5. 如果是開啟舊專案而找不到Flutter、Dart的SDK的話，請選左上角的Android Studio > preferences，去做相關的位置設定
  6. 如果要去除模擬器右上角的Debug橫條，請加入以下字樣，debugShowCheckedModeBanner: false
class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}
模擬器、實機測試
  1. 使用Android Studio做測試
  2. 使用VSCode當IDE (產生專案的方法跟使用指令相同)，右下角可以選實機、模擬器
flutter run
flutter run -d all
flutter run -d <DeviceID>