実際にFlutterを触ってみよう～初めてのアプリ開発

Flutterで始めるモバイルアプリ開発 第2回

初めてのFlutterアプリ

　では、Flutterアプリの開発を進めていきましょう。

アプリケーションの雛形サンプルプロジェクトを作成する

　最初に、Android Studioでプロジェクトを作成しようとすると、図12のような画面が表示されます。そこで、「Start Flutter New Project」を選択します。既に、他のプロジェクトが作成されていて、このようなダイアログが表示されない場合には、メニューの「File＞New＞New Flutter Project..」を選択してください。

図12：Android Studioで最初のプロジェクトを作成する時に表示されるダイアログ

　続いて、作成するプロジェクトタイプの選択画面が図13のように表示されます。

図13：指定できるプロジェクトタイプの選択ダイアログ

　表1のようなプロジェクトタイプが選択できますが、ここではFlutterアプリを作成するために、「Flutter Application」を選択します。

表1：選択できるプロジェクトタイプ

プロジェクトタイプ	概要
Flutter Application	Flutterでアプリケーションを作成する時のプロジェクトタイプ
Flutter Plugin Android	ネイティブAPIやiOS ネイティブAPIをFlutter側から使う場合のライブラリを作る場合のプロジェクトタイプ
Flutter Package	他のFlutter Applicationで再利用できるような画面部品を作る場合のプロジェクトタイプ
Flutter Module	既存のAndroidネイティブアプリやiOSネイティブアプリから呼べるFlutterでの部品を作る場合のプロジェクトタイプ

　他のプロジェクトタイプを見ると、Flutterだけでは目的を満たせない場合にも、さまざまな回避方法が用意されていることがわかると思います。続いて、図14のように作成するアプリケーションの基本項目を入力するためのダイアログが表示されるので、表2の説明を参考に適切な値を入力してください。

図14：アプリケーションの基本項目を設定するダイアログ

表2：基本設定項目

プロジェクトタイプ	概要
Project Name	プロジェクト名であり、プロジェクトに必要なファイルが作成される親フォルダにもなる。また、英数字小文字と「_（アンダースコア）」のみ入力が可能である。
Flutter SDK path Project location	Flutter SDKをインストールしたフォルダを指定。今回の例では、「C:¥data¥flutter」を指定する。また、Flutter SDKをインストールしていない場合にはここでもインスト−ルが可能である。
Description	プロジェクト、もしくはアプリの説明など。

　続いて、図15のようにプロジェクトのパッケージ名を入力するダイアログが表示されます。パッケージ名は通常、ドメインを反対にした値を入力します。

図15：パッケージ名を設定するダイアログ

　パッケージ名は、Flutterアプリ特有のものではなく、Androidアプリでも、iOSアプリでも必要となる情報で、主に組織と結びつける情報がある場合には、このパッケージ名がさまざまなところで利用されます。

　今回は公開する前提ではないため、好きなパッケージ名を指定して問題ありません。また、他にチェック項目がありますが、こちらはいずれもネイティブアプリ側で何かする場合に影響がある項目なので、どちらのの選択でも問題ありません。そして、「Finish」ボタンを押せば、簡単なFlutterアプリとしての雛形アプリが作成できます。

サンプルアプリを実行する

　アプリをAndroid Studioから実行する場合には、図16のように（1）で実行するデバイスを選択し、（2）の緑の三角、もしくは、虫のマークのボタンを押すと実行できます。どちらのボタンでもデバッグモードでの実行になるので、どちらのボタンでも問題ありません。ただし通常、最初に実行する場合には（1）のところで指定できるデバイスが表示されていません。その場合には、実機でのUSBデバッグ機能を使って接続するか、エミュレータを登録する必要があります。

図16：サンプルアプリケーションを実行する時のAndroid Studioの画面

　エミュレータを作成するには、メニューから「Tools＞AVD Manager」から作成が可能です。メニューを選択すると、図17のような画面が表示されます。

図17：エミュレータ作成ウィザード画面（ステップ1）

　続いて、「Create Virtual Device ..」をクリックします。続いて、図18の画面のようにハードウェアを選択します。図の例では、Pixel 3aを選択しています。選択したら、「Next」ボタンを押します。

図18：エミュレータ作成ウィザード画面（ステップ2）

　続いて、図19のようにAPI Levelを選択します。今回は表示されている最も新しいバージョンであるバージョン30を選択しています。選択したら、「Next」ボタンを押します。

図19：エミュレータ作成ウィザード画面（ステップ3）

　作成が終了したら、図20のようにエミュレータ用のデバイスが登録できたので、一覧から起動するエミュレータを指定し、「Actions」から「▶」ボタンを押して、エミュレータを起動してください。

図20：エミュレータ作成ウィザード画面（ステップ4）

　エミュレータ用のデバイスが起動するには、少々時間がかかる場合があります。そのため、筆者はできるだけ実機にて確認をするようにしています。USBデバッグの方法がわからない場合や、実際にデバイスを接続しても認識されない場合には、Android StudioのWebサイトにある実機でのアプリの実行を参照してください。

　実際にエミュレータ上でサンプルアプリケーションを実行したものが図21です。右下の「＋」ボタンを押すと、画面中央にある数字がカウントアップしていきます。以上で、アプリケーションのプロジェクトの作成から、実行までの一連の流れを確認することができました。

図21：サンプルアプリケーションの実行画面