Flutterを使ってiOS、Androidアプリを動かしてみた

大阪オフィスの山田です。SNSでちょくちょくFlutterに関する話題を見かけるので、やってみようと思います。当方、iOSアプリの開発は経験がありますが、Androidアプリの開発はほぼ皆無ですがチャレンジしてみます。今回は、プロジェクトを作ってiOS,Android共にシミュレータで走らせるところまでを行います。参考にするページは公式のGet Startedのページ(2018/08/01時点)です。

Flutterってなに？

Googleが開発しているモバイルアプリ用SDKでiOS、Android両方のアプリが開発できるクロスプラットフォームなSDKです。プログラムはDartで書きます。

開発環境

• Flutter: v0.5.1-beta
• macOS: 10.13.5
• Visual Studio Code(VSCode): 1.25.1
• Xcode: 9.3
• Android Studio: Version 3.1.3

Flutterのセットアップ

VSCode, Xcode、Android Studioはインストールが済んでいるものとします。Flutterの公式ページからGet Startedを選んで、順番に環境を作っていきます。

Flutterのダウンロード

こちらのページにSDKが置いてあるので、ダウンロードして解凍します。ターミナルを開いて以下のコマンドを打ちます。

cd [任意のディレクトリ]
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

Flutterへパスを通す

公式ページではexportコマンドを打っていますが、毎回コマンドを打つのは面倒なので .bash_profile に以下の記述を追加しました。

export PATH=[任意のディレクトリ]/flutter/bin:$PATH

.bash_profileに記述を追加したらsource ~/.bash_profileと打ってリロードします。

依存関係をチェックする

パスが通ったら、以下のコマンドを実行します。このコマンドで必要なツールがインストールされているかチェックしてくれます。

flutter doctor

私の場合、下の画像のように表示されました。

いくつか足りていないツールがあるので1つずつインストールします。ターミナルに表示されているコマンドを1つずつ実行していきます。　　

全てインストールが終わったら、以下のようになりました。 　　

はて...VSCodeでもまだ問題が出ている...？ flutter doctor -v　で詳細に見てみると、Flutterのextensionがインストールされていない、という警告が出ていました。後ほどインストールするので、この時点では一旦無視します。

プロジェクトを作って動かす

プロジェクトを作りたいディレクトリに移動して、flutter create [プロジェクト名]を実行することで、Flutterのプロジェクトが出来上がります。今回はmyappという名前で作りました。

シミュレータの準備

Xcodeを起動して、iOSシミュレータを起動します。コマンドであれば、open -a Simulatorで起動することが可能です。
AndroidはAndroid StudioのAVD Managerでシミュレータを作成し、起動します。
起動したら、flutter doctor -vコマンドを実行し、Connected devices (2 available)となっていることを確認します。

エディタの準備

エディタはVSCodeを使用します。VSCodeで作成したプロジェクトのディレクトリを開きます。開いたらExtensionとして、Flutterをインストールします。インストールが終わったらVSCodeを再起動します。

走らせてみる！

VSCodeのメニューからデバッグ -> デバッグの開始を選ぶと、動き始めます。動かすシミュレータを変更する時はコマンドパレットからFlutter: Select Deviceを選んでEnter、シミュレータを選択します。 実際に動かした画面がこちらです。

• iOS
  

• Android
  

おおー。うごいたーん。

Hot Reloadを試してみる

FlutterにはHot Reload機能があります。変更して保存するとその変更が即時に反映されます。それでは、lib/main.dartをVSCode上で編集してみます。You have pushed the button this many times:の記載を、You have clicked the button this many times:に変更します。シミュレータ上で即反映されることが確認できます。

最後に

いかがだったでしょうか。まだ動かし始めたばかりで、できることできないことについてはちっとも分かっていませんが、これから少しずつ調べていきます。がんばろー。