CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/11/13 11:00

目次

初めてのFlutterアプリ

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

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

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

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

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

図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:アプリケーションの基本項目を設定するダイアログ
図14:アプリケーションの基本項目を設定するダイアログ
表2:基本設定項目
プロジェクトタイプ 概要
Project Name プロジェクト名であり、プロジェクトに必要なファイルが作成される親フォルダにもなる。また、英数字小文字と「_(アンダースコア)」のみ入力が可能である。
Flutter SDK path Project location Flutter SDKをインストールしたフォルダを指定。今回の例では、「C:¥data¥flutter」を指定する。また、Flutter SDKをインストールしていない場合にはここでもインスト−ルが可能である。
Description プロジェクト、もしくはアプリの説明など。

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

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

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

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

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

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

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

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

図17:エミュレータ作成ウィザード画面(ステップ1)
図17:エミュレータ作成ウィザード画面(ステップ1)

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

図18:エミュレータ作成ウィザード画面(ステップ2)
図18:エミュレータ作成ウィザード画面(ステップ2)

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

図19:エミュレータ作成ウィザード画面(ステップ3)
図19:エミュレータ作成ウィザード画面(ステップ3)

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

図20:エミュレータ作成ウィザード画面(ステップ4)
図20:エミュレータ作成ウィザード画面(ステップ4)

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

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5