Flutter Introduction | App Creation ~ Running on Android Emulator and iOS Simulator

Tadashi Shigeoka ·  Thu, February 20, 2020

To get started with Flutter, I’ll introduce the steps to launch a Flutter app on Android Emulator.

Flutter

Flutter Installation

💡 Install - Flutter

Following the official site article above, I’ll install Flutter.

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

Add the following to ~/.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

In my environment, I installed CocoaPods with gem install cocoapods in the above state.

gem install cocoapods

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

Installing the Flutter plugin in Android Studio will also install the Dart plugin together.

[!] VS Code ✗ Flutter extension not installed

Click the Install button from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter to install the Flutter extension in VS Code app.

[!] Connected device

This was resolved by creating a New Flutter Project in Android Studio and then enabling Android Emulator from AVD Manager.

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!

Now I’m ready to develop Flutter apps.

Flutter App Creation and First Launch

Launch on Android Emulator

Following the article Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう - エンジニアHub, you can create a Flutter app and verify its operation on Android Emulator.

Launch on iOS Simulator

Following the procedure in Flutter official documentation iOS setup, I was able to confirm launching Flutter app on iOS Simulator.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
open -a Simulator
flutter run

Flutter Sample Code

The Flutter app created in this article can be checked from the following GitHub Repository:

💡 codenote-net/flutter_sandbox | GitHub

That’s all about getting started with Flutter and practicing with Flutter app on Android Emulator from the Gemba.

That’s all from the Gemba.