【Flutter】iOS・Android両対応のスマホアプリを手軽に作成！【NFCサンプル紹介】

こんにちは！Buildサービスのソフトウェアエンジニア、佐々木です。
今回は、Flutterという、iOS・Androidの両方に対応したアプリを作成できるフレームワークをご紹介します。

Flutterとは

Flutterは、Googleが制作したクロスプラットフォームのアプリ開発用のオープンソースフレームワークです。
高速に動作すること、開発しやすいことを念頭に制作されており、また公式や有志が多くの機能をプラグインとして公開しているため、プロトタイプから本番のアプリケーションまで幅広く利用することができます。

Buildサービスチームでも、一部の案件でスマホアプリ作成のためにFlutterを利用しています。

Flutterの使い方紹介

今回の記事では、スマホのネイティブ機能を用いた簡単なアプリをFlutterを用いて作成するサンプルをご紹介します。
具体的には、NFCでICカードを読み取って情報を表示するプログラムを作成します。APIサーバと組み合わせることで、イベント会場への社員証や交通系ICカードでのチェックインシステムなどに応用することができます。

環境セットアップ

今回は、IntelliJ IDEA を使って環境をセットアップします。
Buildサービスチームでは、VSCode が標準のエディタ（他のエンジニアからサポートしてもらいやすい）ですが、各エンジニアが有料のものを含めて自由にエディタやIDEを選ぶことができます。

まず、IDEAをFlutterでのアプリ開発に対応させるために、Preferences > Plugins から以下のプラグインをインストールします。

• Android

• Flutter

• Dart

次に、Android SDK と JDK を この辺り を参考にインストールします。
IDEAのUIからインストールできるので、便利です。

最後に、Flutter SDK をインストールします。
このページ から、それぞれのOSの手順に従ってください。
Android SDK の規約に同意してくださいとか、何か足りないとか言われるかもしれません。その際は、頑張ってググりましょう。

プロジェクト作成・セットアップ

プロジェクトを作成し、依存パッケージを導入していきましょう。

File > New Project で新規プロジェクト作成ダイアログを開くと、左に「Flutter」という項目が選べるようになっているのでそれを選択します。
Flutter SDK のパスが未設定な場合は、自分がインストールした場所を指定しましょう。
Next ボタンを押すと、プロジェクト設定画面になります。
Project name や Description 、Organization をお好みで設定してください。
それ以外は大体デフォルトで良いと思います。

プロジェクトを作成できたら、必要な Flutterパッケージ を導入します。
今回はNFCを使ったアプリを作るので、「flutter nfc」とかでググって見つけた「nfc_manager」パッケージを利用します。
iOS、Androidに両方対応しており、便利そうです。

flutter pub add nfc_manager

を実行すると、導入できます。

実装

lib/main.dart を編集することで、実装できます。
nfc_managerのReadme を見ると、NfcManager.instance.startSession() を実行すると読み取り待機を開始するようです。
今回はアプリ起動時に読み取りを開始するとよさそうなので、
自動生成された main.dart の _MyHomePageState の initState メソッドで実行するようにしましょう。

こんな感じで NfcManager を初期化して、

  @override
  void initState() {
    super.initState();
    NfcManager.instance.startSession(
      onDiscovered: (NfcTag tag) async {
        _incrementCounter();
      },
    );
  }

表示部分（build メソッド）からボタンを消してこんな感じにしてやって、

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have touched the IC card this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

AndroidManifest.xml ファイルで権限を追加すると、

<uses-permission android:name="android.permission.NFC" />

こんな感じで、ICカードをタッチすると反応するようになります！

今回はサンプルなので ICカードを検出してタッチされた回数を表示するのみのシンプルな実装にしましたが、onDiscovered の NfcTag からはいろいろな情報（カード種別やIDなど）を取ることができます。
取得した情報をAPI側で処理することで、出欠登録などを実装するなど、色々応用できるかと思います。

あとがき

説明してきたように、Flutterではプラグインを用いることで、ネイティブ機能を用いたクロスプラットフォームアプリケーションを非常に手軽に作成することができます。Dart言語はJavaScriptと似た構文で親しみやすく、すぐに慣れることができるでしょう。
みなさんもぜひ試してみてください！