Flutter アプリ開発の道 〜その② サンプルプロジェクト〜

前回は開発環境構築の記事を書きました。

今回はFlutterサンプルプロジェクトを作成してブラウザとエミュレータで起動してみたいと思います。
AndroidとiOSとWebアプリを同時に作っていけるようにします。

エミュレータとは？

エミュレータとはソフトウェア等を異なるハードウェア・OSで動作させるために、擬似的な環境を構築するツールのことを指します。
エミュレータがあれば実機を持っていなくても開発が可能です。

サンプルプロジェクト作成

まずは任意のフォルダに新規プロジェクトを作成します。
↓のコマンドで新規サンプルプロジェクトを作成します。

$ cd '任意のフォルダ'
​$ flutter create my_app

しばらくするするとプロジェクトが作成されます。

ブラウザで起動する

サンプルプロジェクトを実行します。

$ cd my_app
$ flutter run

しばらくするとブラウザの localhost が立ち上がります。
プラスボタンをクリックするとカウントアップするサンプルアプリです。

Android のエミュレータで起動する

Android Studio をインストールします。
↓の公式サイトからダウンロードしてアプリをインストールします。

Android Studio とアプリツールをダウンロードする - Android デベロッパー  |  Android Developers

インストールしたら Android Studio を起動します。
↓のような画面が立ち上がります。

Flutter のプラグインをダウンロードします。
Configure → Plugins をクリックします。

MarketPlaceタブにてFlutterで検索して install をクリックしインストールします。

インストールが完了したら Android Studio を再起動します。
「Restart IDE」をクリックしたら、Android Studioを再起動されます。
再起動すると
Create New Flutter Project
の項目が増えているのが確認できます。

次にエミュレータを作成します。
AVD Manager をクリックします。

今回は「Nexus_5X_API_28」というエミュレータを作成しました。
(エミュレータの細かい設定は省略します)

↓コマンドで利用可能なエミュレータが確認できます。
「Nexus_5X_API_28」が表示されればOKです。

$ flutter emulators

エミュレータを起動します。
↓コマンドで起動します。

$ flutter emulators --launch Nexus_5X_API_28

エミュレータが起動したら先ほどのサンプルプロジェクト「my_app」を実行します。
↓コマンドで実行です。

$ flutter run

エミュレータにインストールされアプリが起動できました！
コマンドラインは↓のような表示になりました。

キーボードの r を押すとホットリロードができ、q を押すと終了できます。

Xcode のエミュレータで起動する

App StoreからXcodeをインストールします。

Xcodeがインストールできたら
CocoaPods というプラグインも必要なのでインストールします。

$ sudo gem install cocoapods

Android Studio のように起動できるエミュレータを確認します。
コマンドは↓です。

$ flutter emulators

私の場合は↓のようになりました。

エミュレータを起動します。

$ flutter emulators --launch apple_ios_simulator

しばらく待つと起動します。

起動したら先ほどのサンプルプロジェクト「my_app」を実行します。
↓コマンドで実行です。

$ flutter run

エミュレータにインストールされアプリが起動できました！
コマンドラインは↓のような表示になりました。

Android と同様に
キーボードの r を押すとホットリロードができ、q を押すと終了できます。

次回の予定

様々なOS上でFlutterのサンプルプロジェクトを実行できたので、次回は基本的なモジュールの実装を勉強していこうと思います。