Flutterでアプリにインタラクティブなチュートリアルを実装する方法

Flutterのアプリ開発で、インストール後の初回起動時に操作方法を親切に教えることは、ユーザーエクスペリエンスを向上させる上で重要です。アプリの操作説明を実装するライブラリはいくつかりますが、この記事では「tutorial_coach_mark」の使い方を紹介します。

スポンサーリンク

「tutorial_coach_mark」とは

tutorial_coach_markは、Flutterアプリケーションでインタラクティブなチュートリアルを簡単に実装できるライブラリです。特定のUI要素にフォーカスを当て、その機能についての説明をポップアップで表示することができます。

こんな感じのチュートリアルが実装できます。

画面の作成

まず、、操作説明を表示するアプリのUIを作成します。
今回は3つのボタンが配置された画面を作成します。
これらのボタンに対して、チュートリアルの説明を追加することにします。

import 'package:flutter/material.dart';

class TutorialPage extends StatefulWidget {
  @override
  _TutorialPageState createState() => _TutorialPageState();
}

class _TutorialPageState extends State<TutorialPage> {
  final GlobalKey btn1Key = GlobalKey();
  final GlobalKey btn2Key = GlobalKey();
  final GlobalKey btn3Key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Tutorial Coach Mark")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        
          children: <Widget>[
            ElevatedButton(
              key: btn1Key,
              onPressed: () {},
              child: Text("Button 1"),
            ),
            ElevatedButton(
              key: btn2Key,
              onPressed: () {},
              child: Text("Button 2"),
            ),
            ElevatedButton(
              key: btn3Key,
              onPressed: () {},
              child: Text("Button 3"),
            ),
          ],
        ),
      ),
    );
  }
}

スポンサーリンク

チュートリアルの設定

次に、tutorial_coach_markライブラリを使用して、各ボタンにチュートリアルのマークを設定します。これには、各ボタンのGlobalKeyを使用してTargetFocusオブジェクトを作成し、チュートリアルを表示します。

@override
void initState() {
  super.initState();
  //初回のビルド完了後、チュートリアルを表示
  WidgetsBinding.instance.addPostFrameCallback(_showTutorial);
}

//チュートリアルの表示
void _showTutorial(_) {
  if (context.mounted) {
    TutorialCoachMark(
      targets: _createTargets(),
      textSkip: "SKIP",
      paddingFocus: 10,
      opacityShadow: 0.8,
    ).show(context: context);
  }
}

//表示するフォーカスの設定
List<TargetFocus> _createTargets() {
  List<TargetFocus> targets = [];
  targets.add(
    TargetFocus(
      identify: "Target 1",
      keyTarget: btn1Key,
      contents: [
        TargetContent(
          align: ContentAlign.bottom,
          child: Text(
            "This is Button 1. Tap here to do something.",
            style: TextStyle(color: Colors.white),
          ),
        )
      ]
    ),
  );
  targets.add(
    TargetFocus(
      identify: "Target 2",
      keyTarget: btn2Key,
      contents: [
        TargetContent(
          align: ContentAlign.bottom,
          child: Text(
            "This is Button 2. Tap here to do something else.",
            style: TextStyle(color: Colors.white),
          ),
        )
      ]
    ),
  );
  targets.add(
    TargetFocus(
      identify: "Target 3",
      keyTarget: btn3Key,
      contents: [
        TargetContent(
          align: ContentAlign.bottom,
          child: Text(
            "This is Button 3. Tap here for more options.",
            style: TextStyle(color: Colors.white),
          ),
        )
      ]
    ),
  );
  return targets;
}

初回起動時のみチュートリアルを表示する

アプリが初めて起動された際にチュートリアルを表示するには、shared_preferencesパッケージを利用します。このパッケージは、端末のローカルストレージにデータを保存する機能を提供し、チュートリアルの表示状態を記録するのに役立ちます。具体的には、チュートリアルが表示されたかどうかのフラグを保存して、次回の起動時にチェックします。

shared_preferencesのインストール

まず、以下のコマンドでshared_preferencesパッケージをプロジェクトに追加します。

flutter pub add shared_preferences

初回起動時のチュートリアル表示判定

初回のみチュートリアルを表示するため、端末にisFirstLaunchというキー名でフラグを保存します。このキーをチェックして、まだチュートリアルが表示されていない場合にのみチュートリアルを表示する処理を行います。

Future<void> _showTutorial(_) async {
  final pref = await SharedPreferences.getInstance();

  // チュートリアルが未表示の場合、チュートリアルを表示
  if (pref.getBool('isFirstLaunch') != true) {
    if (context.mounted) { // コンテキストがまだアクティブか確認
      TutorialCoachMark(
        targets: _createTargets(), 
        textSkip: "SKIP", 
        paddingFocus: 10, 
        opacityShadow: 0.8, 
      ).show(context: context);
    }
    // チュートリアル表示フラグをtrueに設定
    pref.setBool('isFirstLaunch', true);
  }
}

Flutterにおけるチュートリアル表示ライブラリである「tutorial_coach_mark」には、特定のウィジェットにフォーカスを当て、フォーカス後に表示される内容を設定するためのTargetFocusクラスが用意されています。ここでは、TargetFocusクラスの主要なプロパティについて紹介します。

TargetFocusのカスタマイズ

TargetFocusは、フォーカスを当てるウィジェットを表します。TargetFocusには次のプロパティがあり、これらのプロパティを設定することで、フォーカス時の動作や表示をカスタマイズ可能です。

主要なプロパティ

1. identify (dynamic): 識別用の自由な値を設定できます。この属性は特に、複数のターゲットを区別する際に有用です。
2. keyTarget (GlobalKey): フォーカスを当てたいウィジェットのGlobalKeyを指定します。このキーを使って、特定のウィジェットにフォーカスを集中させることができます。
3. targetPosition (TargetPosition): GlobalKeyを使用しない場合、TargetPositionを作成してフォーカスする位置を指定することができます。
4. contents (ContentTarget[]): フォーカス後に表示される内容のリスト。各要素がウィジェットに関する説明や指示を含むことができます。
5. shape (ShapeLightFocus): フォーカス時の形状をShapeLightFocus.CircleまたはShapeLightFocus.RRectから選択できます。
6. radius (double): shapeがShapeLightFocus.RRectの場合に使用します。角の丸みを指定することができます。
7. borderSide (BorderSide): フォーカスするウィジェットの枠線のスタイルを定義します。
8. color (Color): フォーカスするウィジェットの枠線の色をカスタマイズできます。
9. enableOverlayTab (bool): 画面全体をタップして次のステップに進むかどうかを設定します。
10. enableTargetTab (bool): フォーカス対象をタップして次のステップに進むかどうかを設定します。
11. alignSkip (Alignment): 「スキップ」ボタンの位置を調整します。
12. paddingFocus (Alignment): フォーカスの際のパディング設定です。
13. focusAnimationDuration (Duration): フォーカス時のアニメーションの長さをカスタマイズします。
14. unFocusAnimationDuration (Duration): フォーカス解除時のアニメーションの長さをカスタマイズします。
15. pulseVariation (Tween): パルスアニメーションの間隔をカスタマイズします。

まとめ

tutorial_coach_markを使えば、Flutterアプリに直感的で効果的なチュートリアル機能を追加できます。ユーザーはこのガイダンスを通じてアプリの操作方法を素早く学ぶことができ、結果としてユーザー体験が向上します。