Flutter を入門するべく、Android Emulator で Flutter アプリを起動するまでの手順をご紹介します。
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 アプリまで実践してみた、現場からお送りしました。