CodeNote

Flutter を入門するべく、Android Emulator で Flutter アプリを起動するまでの手順をご紹介します。

Flutter インストール

🔗 Install – Flutter

上記の公式サイトの記事を参考にして Fultter をインストールしていきます。

cd ~/Library
git clone https://github.com/flutter/flutter.git -b stable

~/.oh-my-zsh/custom/oh-my-zsh_custom.zsh に以下を追記

# Flutter
export PATH=$PATH:$HOME/Library/flutter/bin

flutter precache

flutter doctor

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.14.6 18G1012, locale en-JP)
 
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.41.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

[!] Android toolchain ! Some Android licenses not accepted.

flutter doctor --android-licenses

[!] Xcode ✗ CocoaPods not installed.

rvm gemset list

gemsets for ruby-2.7.0 (found in /Users/shigeoka/.rvm/gems/ruby-2.7.0)
=> (default)
   global

私の環境では、上記のような状態で gem install cocoapods しました。

gem install cocoapods

[!] Android Studio | Flutter/Dart plugin not installed

Android Studio にて Flutter プラグインをインストールすると Dart プラグインもまとめてインストールされます。

[!] VS Code ✗ Flutter extension not installed

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter から Install ボタンをクリックして VS Code アプリで Flutter extension をインストールします。

[!] Connected device

Android Studio で New Flutter Project 後に、AVD Manager から Android Emulator を利用できるようにすれば解決しました。

flutter doctor                                              

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.14.6 18G1012, locale en-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.42.0)
[✓] Connected device (1 available)

• No issues found!

これで Flutter アプリを開発する準備が整いました。

Flutter アプリ作成・初回起動

Android Emulator で起動

あとは Flutter入門 – 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう – エンジニアHub の記事の通りに進めていけば、Flutter アプリを作成して Android Emulator で動作確認までできるようになります。

iOS Simulator で起動

Flutter 公式ドキュメントの iOS setup の手順の通りに進めていけば、iOS Simulator でも Flutter アプリの起動を確認できました。

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

open -a Simulator

flutter run

Flutter サンプルコード

本記事で作成した Flutter アプリは以下の GitHub Repository から確認できます。

🔗 codenote-net/flutter_sandbox | GitHub

以上、Flutter 入門して、Android Emulator で Flutter アプリまで実践してみた、現場からお送りしました。