Zenn
😎

NFCタグのタッチでFlutterアプリ内にある秘密のページを開く

2023/03/04に公開
Flutter
NFC
idea

はじめに

Flutterなどのスマホアプリには、カスタムURLスキーマ・Deep Linkというものがあります。
また、NFCタグをタッチすることでスマホアプリの起動などができます。
この2つを組み合わせたら、「NFCタグのタッチでFlutterアプリ内にある秘密のページを開く」みたいなことができるなと思ったので、やってみました。

環境

手元では、Pixel 6(Android 13)で確認しました。

Flutterアプリ

  • Flutter: 3.7.3
  • auto_route: 5.0.4
    • Deep Linkは、auto_routeで行う
  • flutter_hooks: 0.18.6
  • auto_route_generator: 5.0.3
  • build_runner: 2.3.3

NFCタグ

  • SwitchBot タグ
    • NFCタグは書き込みできるものが必要なため
  • NFC Tool
    • NFCタグへ書き込みを行うAndroidアプリ

Flutterアプリ サンプルコード

Flutterアプリのサンプルコードはこちらです。
https://github.com/greendrop/flutter_secret_page_sample

Flutterアプリ サンプルコードの内容

メインページを追加

起動時に表示するページ

lib/features/main/widgets/main_page.dart

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appBar = AppBar(title: const Text('Main Page'));
    const body = Center(child: Text('Main Page'));

    return Scaffold(appBar: appBar, body: body);
  }
}

秘密のページを追加

秘密のページで、アプリ内にこのページを表示する導線はない

lib/features/secret/widgets/secret_page.dart

import 'package:flutter/material.dart';

class SecretPage extends StatelessWidget {
  const SecretPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appBar = AppBar(title: const Text('Secret Page'));
    const body = Center(child: Text('Secret Page'));

    return Scaffold(appBar: appBar, body: body);
  }
}

ルーティングの設定

lib/config/routes/app_router.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_secret_page_sample/features/main/widgets/main_page.dart';
import 'package:flutter_secret_page_sample/features/secret/widgets/secret_page.dart';

part 'app_router.gr.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(
      path: '/',
      page: MainPage,
    ),
    AutoRoute(
      path: '/secret',
      page: SecretPage,
    ),
  ],
)
class AppRouter extends _$AppRouter {
  AppRouter();
}

上記ファイル作成した後に自動生成が必要なため、以下のコマンドを実行します。

flutter packages pub run build_runner build

Android カスタムURLスキーマの設定

activityタグ内にintent-filterタグを追加し、カスタムURLスキーマを設定します。

android/app/src/main/AndroidManifest.xml

    <activity
        android:name=".MainActivity"
        ... />
    ...
    <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="fluttersecretpagesample" />
    </intent-filter>
    ...
    </activity>

NFCタグの書き込み

カスタムURLを入力

「書くタブ」を選択し、「レコードを追加」をタップ

「カスタムURL/URI」をタップ

fluttersecretpagesample:///secretを入力し、「OK」をタップ

NFCタグへ書き込み

「書く/〇〇バイト」をタップし、NFCタグへ書き込み

動作確認

  1. 書き込んだNFCタグを読み込み
  2. 「収集された新しいタグ」の「fluttersecretpagesample:///secret」をタップ
  3. FlutterアプリのFlutterアプリの秘密ページが開く

まとめ

NFCタグのタッチでFlutterアプリ内にある秘密のページを開くことができました。
カスタムURL自体は見えるため、完全な秘密のページにはできませんでしたが、 NFCタグを使うことでちょっと違った使い方もできそうです。

Discussion