Android Studioを使ってFlutterでHello Worldまでの手順

はじめに

この記事ではAndroid Studioを使ってFlutterのプロジェクトを新規作成し、実機でデモアプリを動かすまでの手順をまとめます。なお、Visual Studio CodeもFlutter開発に使用できます。Visual Studio Codeでの進め方は以下にまとめましたので必要な方は見てみてください。

前提と環境

以下の通りです。この記事の内容は、Ubuntu18.04にインストールしたAndroid Studioで実施した流れになりますが、基本的に他のOSのAndroid Studioでも同様の手順になると思います。

• OS：Ubuntu18.04
• Flutter : ver1.2.1
• Dart : ver2.1.2
• Android Studioはインストール済とする
• Android StudioにFlutterのプラグインをインストール済とする
• デバッグにAndroid端末実機を使用する場合は、USBデバッグ機能を有効化済とする

基本的な手順は公式ドキュメントに従います。

Android Studioのインストール手順については、以下にまとめていますので必要な方は見てみてください。

Android StudioでFlutterの新規プロジェクトを作成する

Android Studioを起動後、メニューの「File」→「New Flutter Project...」をクリックします。

ここで「New Flutter Project...」が見つからない場合は、まずFlutterのプラグインをAndroid Studioにインストールする必要があります。（インストール手順はこちら。）

以下のように「New Flutter Project」というウィンドウが表示され、何を作成するかを聞かれます。ここでは、アプリを作成するため「Flutter Application」を選択した状態で「Next」 をクリックします。

次に作成するアプリの情報を入力して「Next」をクリックします。

項目	内容
Project name	適当のプロジェクト名（作成するアプリの名前）を入力します。
Flutter SDK path	Flutter SDKのパスです。これはFlutterインストール時に設定した場所になります。
Project Location	新規作成するFlutterのプロジェクトの保存場所です。
Description	新規作成するFlutterのプロジェクトの説明です。

続いて作成するアプリのCompany domain（パッケージ名）を入力します。

項目	内容
Company domain	Company domainは、もしGoogle Playで公開する場合はユニークである必要があります。例えば、通常ですと自身が所有しているドメインを逆から指定したものを使うことが多いです。もし公開の予定はとりあえずなく、まずはテストならばデフォルトのままで問題ありません。ただし、Firebaseなどの外部サービスをアプリで使用したい場合には、このCompany domainを外部サービスで登録する場合がありますのでメモが必要です。
Package name	通常はCompany domainに連動して自動で決まります。もし別途編集したい場合は、「Edit」ボタンをクリックして編集します。
Sample Application	サンプルプログラムを雛形としてプロジェクトを新規作成します。ただ、２０１９年５月４日時点では、現在の安定版であるFlutter1.2.1ではこの機能は準備できていないようです。（参照：generate sample content menu is empty）
Platform channel launguage	Android用にKotlin、iOS用にSwiftをサポートするかの確認です。基本的にはこれら２つが今後メインで使用される可能性が高いため、特に理由がなければチェックを入れておいてOKです。

「Finish」 をクリックすると、以下のように「Creating Flutter Project」と表示されプロジェクトの作成が開始されます。

完了すると、以下のように新規プロジェクトを新しいウィンドウで開くか、すでに開いているウィンドウを置き換えるか聞かれます。いま開いているウィンドウを閉じてもよければ、そのまま「This Window」をクリックし、新規ウィンドウがよければ「New Window」をクリックします。

以下のように作成したプロジェクトが表示されれば完了です。作成したプロジェクト直下のlib/main.dartがベースとなるコードになります。

Android StudioでFlutterアプリのデバッグを行う

以下のように、接続しているAndroid端末もしくはiOS端末が認識されていることを確認し、緑色の三角ボタンをクリックしてデバッグを開始します。なお、もしAndroid用のエミュレータを作成済の場合は、ここに実機以外にもエミュレータも表示され選択できます。 [](https://virment.com/images/2019/05/7-2-debug-start.png)

デバッグを開始すると、接続している実機上で以下のようなアプリが起動します。ただし、冒頭の前提でも書きましたが、Android端末の場合はUSBデバッグ機能が有効化されている必要があります。

デバッグを停止したい場合は、赤い四角ボタンをクリックします。

なお、コードに修正を加えると、その修正が実機上で動作しているアプリに即座に反映されます。これで実際に実機上でアプリを確認しながら開発する環境が整いました。 もしデバッグ用に使用できる実機がない場合は、Android Studioでエミュレータも作成することができます。Ubuntu18.04での手順になりますが、Android Studioでエミュレータを新規作成したい場合は以下の記事にまとめましたので見てみてください。

USBデバッグ機能を有効化について

USBデバッグ機能を有効化する手順については以下のサイト様が参考になります。

まとめ

Ubuntu上でもAndroid Studioを使うことでFlutterのデモアプリを実際に動作させるまでの作業も楽でした。公式ドキュメントも充実しており助かりました。