Help us understand the problem. What is going on with this article?

FlutterでHello worldを動かすまでの環境構築手順(iOS, Android)

FlutterでHello worldを動かす

仕事でFlutterを扱うことになったので、とりあえずHello world動かすところまでの流れをメモ。

「Flutterとは何ぞや?」って人は公式サイトを見てくれ。
Flutter - Beautiful native apps in record time

環境

Flutter SDKは、Windows、macOS、Linux向けに提供されていますが、本記事ではmacOS上での環境構築手順をまとめます。

OS バージョン
macOS Mojave バージョン10.14.6

Flutter SDKは「v1.9.1+hotfix.4」を使いました。

必要なコマンドラインツールは以下のとおりです。

  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which

※バージョンアップ等で本記事の情報が古くなっている場合は、公式ドキュメントを参照してください
Install - Flutter

Flutter SDKのインストール

まずはFlutter SDKをインストールします。
macOS install - Flutter

Flutter SDKのダウンロード

公式サイトから最新版SDKのzipファイルをダウンロードします。
本記事執筆時点のSDKバージョンは、v1.9.1+hotfix.6となっていました。
スクリーンショット 2019-10-28 14.17.15.png

インストール対象フォルダに移動し、ダウンロードしたzipファイルを解凍します。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

パスを通す

SDKを展開しただけではflutterコマンドが使えないので、パスを通します。

$ export PATH="$PATH:`pwd`/flutter/bin"

.bash_profileに直接追記しておけば、セッションを閉じても有効になります。

export PATH="/Users/unsoluble_sugar/flutter/bin:$PATH"

sourceコマンドで設定反映し、パスが有効になっていることを確認します。

$ source ~/.bash_profile
$ echo $PATH

開発用バイナリをダウンロード

必要に応じてプラットフォーム固有の開発バイナリをダウンロードします。

$ flutter precache

flutter doctorを実行する

セットアップ完了のために別途インストールが必要なツールがないか、依存関係をチェックします。

$ flutter doctor

flutter doctorコマンドを実行すると以下のようなログが表示されます。flutterコマンドが使用できない場合は、前述のパスが通っていないケースが多いです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods installed but not initialized.
        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 initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.5)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

[!] の付いている項目は準備が完了していない項目です。

Android、Xcode関連はのちほど設定するので無視してください。Connected device もデバッグ時に使用するものなので、いまは気にせず大丈夫です。

[✓] Flutter となっていない場合は、Flutterの設定まわりに何かしら問題が起きている状態です。表示されているメッセージを参照しながら対応しましょう。

基本的には指示通りに不足ツールをインストールしていけば解決します。

バージョン確認

flutter doctorでもflutterのバージョン確認はできますが、flutter --versionコマンドを打つと、使用されているDartのバージョンなども確認できます。

$ flutter --version
Flutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cc949a8e8b (4 weeks ago) • 2019-09-27 15:04:59 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

これでflutter SDKの設定は完了です。

iOSのセットアップ

続いてiOSのセットアップを行なっていきます。

Xcodeをインストールする

Xcodeの最新安定版をインストールします。公式Webサイト、もしくはMac App Storeからダウンロードします。
スクリーンショット 2019-10-28 14.56.01.png

コマンドラインツールの設定

Xcode command-line toolsの設定をします。

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

一度もXcodeを起動していない場合の初期セットアップや、ライセンスの同意など、必要に応じて進めましょう。

iOSシミュレーターの実行

以下コマンドでiOSシミュレーターを起動します。

$ open -a Simulator

スクリーンショット 2019-10-28 15.08.42.png

Xcode上から [Xcode] > [Open Developer Tool] > [Simulator] で起動することもできます。
スクリーンショット 2019-10-28 15.07.20.png

サンプルアプリの作成

flutter createコマンドで新規プロジェクトを作成します。

$ flutter create my_app

シミュレーターを起動した状態でflutter doctorコマンドを打つと、Connected device項目が[✓]となっていることがわかります。

[✓] Connected device (1 available)

作成したプロジェクトフォルダに移動し、flutter runコマンドを実行しましょう。

$ cd my_app
$ flutter run

起動中のシミュレーター上でアプリが実行されます。

スクリーンショット 2019-10-28 15.11.24.png

右下の「+」ボタンをタップすると、画面中央の数字がカウントアップされるHello worldアプリらしい。

起動確認ができたらiOSのセットアップは完了です。

Androidのセットアップ

iOSの動作確認ができたので、Androidのセットアップも行なっていきます。

Android Studioのインストール

Android Studioをダウンロードしてインストールします。
スクリーンショット 2019-10-28 15.22.19.png

Android SDK等のインストール

Android Studio Setup Wizardに従って、最新のAndroid SDK、Android SDK Platform-Tools、Android SDK Build-Toolsをインストールします。

Android Emulatorを作成

Android Studioを起動し、Welcome画面右下にある [Configure] メニューから [AVD Manager]を開きます。
スクリーンショット 2019-10-28 15.24.05.png

適当にEmulatorを作成し、対象EmulatorのPlayボタンを押します。
スクリーンショット 2019-10-28 15.26.16.png

Emulatorが起動します。
スクリーンショット 2019-10-28 15.28.04.png

Emulatorが起動した状態でflutter runコマンドを実行すると、サンプルアプリが起動します。
スクリーンショット 2019-10-28 15.34.01.png

簡単ですね。

iOS、Androidで同時に動作確認する

おまけ。

iOS Simulator、およびAndroid Emulatorを同時に起動した状態で以下コマンドを打ってみましょう。

$ flutter run -d all

複数OSでアプリ挙動を同時確認することが可能です。
スクリーンショット 2019-10-28 15.32.34.png

すごい。

エディタはVSCodeがおすすめ

ちなみにエディタはVSCodeを使っています。
flutter_hot_reload.gif

とりあえずFlutterとDartのプラグイン入れとけば、必要最低限の環境は整います。

VSCode上から新規プロジェクトの作成、エミュレーターの起動、デバッグまでひと通りこなせます。
スクリーンショット 2019-10-28 15.43.06.png
FlutterにはHot reload機能もあるため、変更の確認が容易で高速開発が可能。
Hot reload - Flutter

すごい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away