Zenn
📱

アプリでよくみるチュートリアル画面をflutterで実装する

2024/05/10に公開
Flutter
iOS
チュートリアル
パッケージ
tech

はじめに

アプリの使い方を、視覚的に伝えるなら、使い方のチュートリアルを追加しましょう。
アプリのチュートリアルページを作成する際には、ユーザーがアプリの基本機能を理解しやすいように、分かりやすく、かつ魅力的なデザインを考えることが重要です。

ユーザーが使い方がわからないとアプリがどんなに良い機能であっても使ってもらえないかもしれません。

使用パッケージ

https://pub.dev/packages/flutter_overboard

import

flutter pub add flutter_overboard
main
import 'package:flutter_overboard/flutter_overboard.dart';

完成イメージ(例:英語版のログイン説明ページ)

さらっとコード説明

StatelessWidgetとStatefulWidgetどちらでもOK

main
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

initStateは必須

main
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();
  @override
  void initState() {
    super.initState();
  }

skipCallbackとfinishCallback

チュートリアルを１ページスキップとチュートリアル終了のメッセージを追加していきます。

main
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      body: OverBoard(
        allowScroll: true,
        pages: pages,
        showBullets: true,
        inactiveBulletColor: Colors.blue,
        skipCallback: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text("Skip clicked"),
          ));
        },
        finishCallback: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text("Finish clicked"),
          ));
        },
      ),
    );
  }

背景の色の指定、画像のパス、タイトルと説明文を追加

main
  final pages = [
PageModel(
color: const Color(0xFFF29D52),//背景の色
imageAssetPath: 'assets/images/tutorial/en1.png',//画像指定
title: 'Sign up',//タイトル
body: 'Register your account first',//説明文
doAnimateImage: true),//アニメーションの有無
  ];
}

チュートリアルページにどんなページを入れたらいいの？

ページ1: アプリの紹介

見出し: アプリ名とその一行紹介
本文: アプリの主な機能とその利点を簡潔に説明
画像: アプリのロゴまたはキャッチーなイントロ画像

ページ2: アプリの主要機能の紹介

見出し: 「主要機能」
各機能の説明: 短い文で機能を紹介し、その機能がユーザーのどのような問題を解決するかを説明
画像: 各機能を示すスクリーンショットまたはイラスト

ページ3: ステップバイステップガイド

見出し: 「はじめてのステップ」
本文: アプリを使い始めるための基本ステップをリストアップ
画像: 各ステップを実行する際の画面のスクリーンショット

ページ4: アプリの設定

見出し: 「設定のカスタマイズ」
本文: アプリの設定方法と、設定をカスタマイズすることでどのようにアプリ体験を向上させるか
画像: 設定画面のスクリーンショット

ページ5: よくある質問(FAQ)

見出し: 「よくある質問」
リスト: 利用者から寄せられることが多い質問とその回答

ページ6: サポートとフィードバック

見出し: 「サポートが必要ですか？」
本文: サポートチームへの連絡方法、フィードバックの提出方法
画像: コンタクトフォームやフィードバックボタンのスクリーンショット
この雛形は、一般的なアプリのチュートリアルページの構成例です。アプリの種類やターゲットユーザーに応じて、内容やデザインは適宜調整してください。

チュートリアルのパッケージはどれを選ぶ？

2020年の記事ですが、以下のnoteが参考になりました。
ユーザー目線から考えると、前衛的すぎるUIもなかなか考えものですね..
いかにわかりやすくユーザーに伝えるかもう少し考えてみます。

参考

https://note.com/fmkpro1984/n/nbfcf7c63ba93

Discussion