Androidアプリ開発をFlutterでやってみよう

はじめに

これはNISE (南山大学 青山研究室) Advent Calendar 2019の10日目の記事です。

モバイルアプリ開発に興味があったのでFlutterを触ってみることに。備忘録的な意味も込めて導入手順を記載しておきます。
また、自分がAndroidを使っているという理由から、今回はAndoridのアプリ開発を行うための環境を構築しました。

Flutterとは？

Googleが開発したオープンソースのモバイルアプリケーションフレームワークのこと。AndroidやiOS向けのアプリを開発することができます。

また、開発にはDart(ダート)と呼ばれる言語を使います。こちらもGoogleによって開発されているものになります。

導入するもの　+　導入環境

導入するもの

• Flutter SDK
• Android Studio
• Android SDK
• Visual Studio Code

導入環境

• Windows 10 (64bit)

Flutter SDK のインストール

以下のリンクから自分の環境に合ったFlutter SDKをダウンロードし解凍、出てきたflutterフォルダを任意のパスに置きます。(僕は分かりやすいようにC直下に置きました。)
Install - Flutter

次にflutterフォルダ内のflutter_comsole.batを実行します。
すると Flutter Console が起動し、以下のような内容が出力されます。これでFlutterのインストールは完了です。

また、flutter doctorコマンドをコンソール上で入力すると、開発環境に足らないものをチェックマークの有無で教えてくれます。

次は × 、! マークのついている Android SDK、Android Studio のインストールをしていきます。
（今回はエミュレータ上でアプリを動かすので一番下のNo devices availableは無視）

Android Studio + Android SDK

以下のリンクから自分の環境に合ったパッケージを選んでダウンロードしてください。
Download Android Studio and SDK tools | Android Developers

Android Studioはインストーラを起動するとインストール先を聞かれるのでとりあえずデフォルトのパスに置いときます。
Android SDKは多分どこでもいいので解凍後任意の場所に置いときましょう。

Android Studio を起動したら（おそらくデフォルトで「インストール後に起動する」になっているはず）SDK Manager を選択し、最新の Android の SDK と SDK Tools を追加します。

この段階でflutter doctorを起動するとこんな感じ。

ライセンスの同意云々で SDK が反映されていないので指示通りflutter doctor --android-licensesをコマンド上で入力。同意した後にflutter doctorを走らせるとちゃんとチェックが入っています。

Visual Studio Code

まず以下のリンクからVisual Studio Code(VSCode)のインストーラをダウンロードし実行します。
Visual Studio Code - Code Editing. Redefined

インストールが出来たら次に VScode 上で Flutter の拡張機能をインストールします。これによりVSCode上でのFlutterの開発環境が整えられます。

実際にプログラムをエミュレータで動かしてみる

エミュレータ作成

環境構築は済んだので試しにアプリを動かしてみます。
まず Andorid Studio 上で ADV Manager を選択し、Create Virtual Device よりエミュレータを作成します。
（Pixel系列のエミュレータが作成できます。）

エミュレータ作成後、デバイスのイメージをダウンロードする必要があるのでとりあえず適当に選択。(今回はAndroid 9.0 のドロイド君を選びました。) これによりVSCode上からエミュレータを起動できるようになります。

FlutterプラグインをVSCodeに入れていると画面の右下あたりにNo Deviceの表示がされ、作成したエミュレータを選択できるようになります。先ほど作成したエミュレータを起動しておきましょう。

プロジェクト作成・実行

プロジェクトの作成にはまず Flutter Console 上で任意のディレクトリにおいてflutter create プロジェクト名というコマンドを入力します。するとカレントディレクトリ内にアプリを動かすためのプロジェクトが作成されます。また、VSCode 上でこのプロジェクトフォルダを開きます。

libフォルダの中にあるmain.dartを選択し「デバッグして開始」 or 「デバッグなしで開始をする」とプログラムをエミュレータ上で動かせるようになります。
（デフォルトだと画面のアイコンを押した回数をカウントするプログラムが実行できます。）

今回はもう少し簡潔なものとして、「Hello Android」という文字を画面に出力するプログラムを書いてみます。

一度main.dartの中のコードを全て削除し新たに以下のコードを書きます。

main.dart

import 'package:flutter/material.dart';

void main() {
 runApp(App());
}

class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: Center(child: Text("Hello Android")), 
     ),
   );
 }
}

エミュレータとコードを一緒に表示してみるとこんな感じに。

実際プログラムを「デバッグなしで開始」して走らせてみると以下の様にエミュレータ上に表示がされます。コンソール上にも、ログが表示されていることが分かります。

ちなみに「デバッグして開始」をするとブレイクポイントが分かり、プログラムを一行ずつ実行できたりします。また「ホットリロード」という機能により、コード変更が即座にエミュレータ上に反映されるのもFlutterの特徴の一つです。

#おわりに
今回の記事ではWindowsへのFlutter環境の導入、及び簡単なプログラムの実行までを紹介しました。興味が湧いたらぜひ触ってみてください。そして僕に教えてください。

###参考文献
https://webbibouroku.com/Blog/Article/flutter-win
https://apps-gcp.com/introduction-of-flutter-about-header-and-footer/