Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう

モバイル向けアプリケーションのフレームワーク・Flutterを使って簡単なアプリケーションを作成する基本的な開発について、FlutterのGoogle Developers Expertである上田哲広さんに解説していただきました。

Flutter入門 - 簡単なアプリを作ってUI宣言やホットリロードなど便利機能の使い方を理解しよう

こんにちは。上田哲広@najeiraです。FlutterのGoogle Developers Expertとして活動しています。

Flutterは、Googleが中心となってGitHub上でオープンソースなプロジェクトとして開発されている、モバイル向けアプリケーションのフレームワークです。AndroidとiOSのアプリを単一のコードベースで開発できます。

1GitHub - flutter/flutter: Flutter makes it easy and fast to build beautiful mobile apps.
※Webやデスクトップへのサポートも今後のロードマップに含まれています。

FlutterのアプリはDart言語を使って記述します。モダンでReactiveなUIフレームワークで、美しいUI群が豊富に含まれています。FlutterではUIの各部品のことをWidgetと呼びます。

特長として、宣言的なUI定義やホットリロード(ファイルの変更・保存をするとリロードすることなくリアルタイムでファイルを読み込み直す機能)による高い開発効率、リリース時のネイティブコードへの事前コンパイル・GPUを活用したレンダリングエンジンによる高い実行パフォーマンスなどがあります。

本記事ではFlutterを使った簡単なアプリケーションを作成し、Flutterの基本的な開発を体験・学習することを目的とします。

インストール
Macに必要なツール/Flutterのインストール/flutter doctor/Android Studio/AVDのセットアップ
サンプル・アプリ
サンプル・アプリの起動/サンプル・アプリのソースコード
ホットリロード
自動ホットリロードの設定/ロジックのホットリロード/解説: setStateについて
新たなアプリを作る
アプリを作る準備/HTTP通信/AndroidManifest.xml/JSONのパース/画像を表示する
リリースビルド
インストール/リリース

インストール

まずはFlutterをインストールしましょう。Windows、Mac、Linux、ChromeOSで使用できます。

Flutterの公式サイト右上にある「Get started」のボタンから、公式ガイドでのインストールの手順を参照できます。公式ガイドが詳細かつ最新情報ではありますが、本記事でもMac環境でAndroid Studioを使う場合のインストール・セットアップの手順について解説します。他のOSやIDE/エディタについては公式ガイドを参照してください。

2

Macに必要なツール

Flutterは以下のコマンドラインツールを利用します。

  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which
    ※これらはMacの環境に標準で入っています。足りないものがあれば別途インストールしてください。

Flutterのインストール

macOS用ダウンロードページ の「flutter_macos_v1.7.8+hotfix.3-stable.zip」のボタンから、zipファイルをダウンロードしてください(バージョンの表記は本記事の執筆時点のものです)

3MacOS install - Flutter

ダウンロードしたzipファイルを、インストールしたい場所に展開します。以降、操作はターミナルで行うものとして、コマンド例を示します。 ~/development にインストールしたい場合は以下のようになります。

mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.3-stable.zip

~/development/flutter というディレクトリが作成され、その下にFlutterのファイルが展開されます。

Flutterのコマンドを簡単に利用できるようにするために、環境変数 PATH にFlutterインストール先を設定しておきましょう。

~/.bash_profile に以下の行を追加します。 [YOUR_NAME] はご自身のユーザー名に置き換えてください。また、インストール先を別の場所にした場合も、適宜パスを置き換えてください。

export PATH="$PATH:/Users/[YOUR_NAME]/development/flutter/bin"

sourceコマンドで、現在のセッションにも反映させます。

source ~/.bash_profile

flutter doctor

Flutterには環境をチェックする doctor というコマンドがあります。このコマンドを実行することで、Flutterが必要とするDart SDKなどがダウンロード・セットアップされます。以下のように実行してください。

flutter doctor

※flutterコマンドが見つからない場合は、前章での flutter/bin にパスを通す設定を見直してください。

以下のように関連するツールの状況が表示され、環境が整っている項目は「 」で表示されます。ない箇所については「 ! 」と表示されます。ここでは少なくとも先頭のFlutterの欄が「 」となっていればOKです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.4 18E226, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 10.2)
[✓] iOS tools - develop for iOS devices
[✓] Android Studio (version 3.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.1)
[✓] VS Code (version 1.35.1)
[✓] Connected device (2 available)

この後のAndroid Studioをセットアップ後には、上記の欄のうちAndroid toolchain、Android Studioの欄が「 」となり、開発が進められるようになります。なお、iOSでFlutterアプリを開発したい場合は、別途Xcodeのインストールが必要です。

Android Studio

FlutterにはAndroid Studio、IntelliJ IDEA、Visual Studio Code向けの公式な開発プラグインがあります。また、プラグインを利用せずとも、Flutterのコマンドラインツールも使えるため、お好きなエディタでFlutterでアプリ開発ができます。

本記事ではAndroid Studioを使う場合の手順を紹介します。

Android Studioのインストール

まず、Android Studioの公式サイトから、Android Studioをダウンロードします。

4Download Android Studio and SDK tools

Android Studioを起動し、Android Studio Setup Wizardを進めます。これによりAndroid SDK、Android SDK Platform-Tools、Android SDK Build-Toolsといった、Flutterに必要な各ツールがインストールされます。

本記事ではエミュレータを使って開発していきますが、実機デバイスを使った開発においても基本的な手順に違いはありません。

※Android Studioをすでにインストール済みの場合は、バージョンが3.1以上であることを確認してください。
※本記事の執筆時点でのAndroid Studioの最新バージョンは3.4.2ですが、画面のスクリーンショットなどは3.3で撮影しています。

Flutterプラグインのインストール

Android Studio向けのFlutterプラグインをインストールして使います。Android StudioのPreferencesからPluginsを選択し、画面下部のBrowse repositoriesを選んでください。

「flutter」で画面内を検索して表示される「Flutter」を選び、Installボタンでインストールします。

5

インストール後、Android Studioを再起動してください。再起動後、Android Studioの開始画面に「Start a new Flutter project」のメニューが表示されるようになるので、それを選択します。

6

New Flutter Projectの画面では「Flutter Application」を選び「Next」へ進みます。

7

Project nameにはお好きな名前を入れてください。Flutter SDK pathには、インストールしたFlutterのパスが入っています。Project locationには、このアプリを作成する場所を入力します。

8

Company domainは、アプリのリリース時にAndroidアプリのパッケージ名(iOSの場合はバンドルID)として使われます。本記事はチュートリアルのため、 example.com のまま進めていきます。

9

さて、アプリの雛形が作成されると、Android Studioのエディタが起動して以下のような状態となります。

10

AVDのセットアップ

アプリをAndroidエミュレータで実行するためには、AVD(Android Virtual Device)の設定が必要です。

11Create and manage virtual devices  |  Android Developers

Android StudioのToolsから「AVD Manager」を選択し、AVDの一覧画面が表示されたら、左下の「+Create Virtual Device」を選びます。次の画面では任意のHardwareを選んで「Next」へ進みます。

12

次に、System imageを選びます。Recommendedのタブに表示されている中から選べばOKです。現行のMacのCPUはIntelを採用しており、ABI(Application Binary Interface)がx86かx86_64のものでも問題なく高速に動作するでしょう。本稿でも、x86かx86_64を推奨します。ダウンロードが必要なものには「Download」のリンクが表示されているので、必要に応じてダウンロードしてください。

13

Emulated Performanceの項目で「Hardware - GLES 2.0」を選択してください。

14

作成が完了したら、画面右の再生ボタンでエミュレータを起動します。

15

ここまで来たら、FlutterアプリをAndroidエミュレータで実行する準備は完了です。

サンプル・アプリ

サンプル・アプリの起動

Android Studioの「Start a new Flutter project」によってFlutterのサンプル・アプリが雛形として作成されているため、まずはそのアプリを起動してみましょう。

Android Studioの上部にFlutterプラグインのツールバーがあります。「Android SDK build for x86」と表示されているのが、Androidエミュレータです。他に実機デバイスの接続があれば、プルダウンから選択できます。アプリを実行したい環境を選んでください。

「main.dart」とあるのがアプリのエントリポイントです。この時点では他にファイルがないため、そのままでOKです。その右にある再生ボタンを押してアプリを起動しましょう。

16

※Androidの実機デバイスで開発したい場合は、端末の開発者オプションの「USBデバッグ」を有効にしてください。また、WindowsでAndroidデバイスを使う場合は、USBドライバが必要です。詳しくはユーザーガイドの「Google USB ドライバを入手する」を参照してください。

起動すると以下のようになります。なお、サンプル・アプリの初回起動時はAndroidアプリの通常のコンパイルが行われるため、数十秒から数分、時間がかかることがあります。

17

画面左に配置されているサンプル・アプリ画面の右下の「+」ボタンを押すと、アプリ画面中央に表示されている数字がカウントアップします。

サンプル・アプリのソースコード

サンプルとして作成されたこのアプリは、以下のコードになっています(コメント部分を除く)。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

わずか60行ほどのコードで、アプリケーションとして動作するものが出来上がっています。

本記事ではFlutterフレームワークの詳細については触れませんが、このコードに登場する要素について、簡単に述べておきます:

  • main 関数から処理が開始され、 runApp にWidgetを渡すことでアプリが表示される
  • MyAppStatelessWidget を継承しており、 Widget である
  • MyHomePageStatefulWidget を継承しており、状態があることを意味する( _MyHomePageState がその状態)
  • WidgetStatebuild メソッドの戻り値が、画面に表示されるUIとなる
  • MaterialApp はマテリアルデザインのアプリを作るために便利なWidget
  • Scaffold は典型的な画面レイアウトを構築する便利なWidget

ホットリロード

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く