【Flutter】簡単にかっこいいチュートリアル画面を作る

はじめに
パッケージの導入
ページを表示する
複数のチュートリアル画面を表示する
- 他のパッケージ
おわりに

はじめに

Flutterアプリケーションにチュートリアル画面を実装する方法を解説します。

チュートリアル画面やイントロ画面とも呼ばれる、
アプリの初回起動時に出る画面のことです。

使い方や、初期設定のステップを画面ごとに説明するのに使います。

Flutterパッケージにはチュートリアル画面を作るパッケージはいくつかありますが、
今回はintro_views_flutterを使う方法をご紹介します。

今回作るサンプルはこちらです。

チュートリアルというより、キャラクターの紹介画面になりますが、
表示させるものはご自身の好きなものに変更してみてください。

サンプルと同じものを作りたい方は、素材下記のサイトから画像をダウンロードしてください。
dota2というゲームのキャラクターらしいです。

Dota2 Boost - Juggernaut Dota 2 Fanart, HD Png Download - kindpng

Dota2 Boost - Juggernaut Dota 2 Fanart, HD Png Download is free transparent png image. Download and use it for your personal or non-commercial projects.

パッケージの導入

今回使用する intro_views_flutterのバージョンは下記です。
pubspec.yamlに追記してください。

なお、最新版はこちらからご確認ください。

dependencies:
  intro_views_flutter: '^3.2.0'

ページを表示する

まずは１ページだけ表示するプログラムを作成しましょう。
サンプルプログラムをdartファイルとして追加し、main.dartから呼び出しましょう。

import 'package:flutter/material.dart';
import 'package:intro_views_flutter/intro_views_flutter.dart';

class introViewSample extends StatelessWidget {
  // PageViewModel型のリストを作成
  static final pages = [
    PageViewModel(
      pageColor: const Color(0xFFFF7A00),
      iconImageAssetPath: 'images/Daco_4792678.png',
      body: Text(
          'In a flurry of slashes, Juggernaut cuts down his foes. Sprinting and spinning into battle with reckless abandon, and nearly invincible once he is able to begin his assault, stopping Juggernaut can often be just as difficult as surviving him.'),
      title: Text('Juggernaut'),
      mainImage: Image.asset(
        'images/Daco_4792678.png',
        height: 400.0,
        width: 400.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(color: Colors.white),
      bodyTextStyle: TextStyle(color: Colors.white),
    ),
  ];

  Widget build(BuildContext context) {
    return IntroViewsFlutter(pages); // PageViewModelのリストを渡す
  }
}

PageViewModel()ウィジェット
チュートリアル画面で表示される１画面を表すウィジェットです。
後述のIntroViewsFlutter()ウィジェットにこれのリストとして渡す必要がありますので、
pages定数として定義しています。
iconImageAssetPathプロパティが画面下に表示される丸いアイコン部分。
mainImageプロパティが真ん中に表示されている画像です。
※事前に画像ファイルはpubspec.yamlに追加しておいてください。

このパッケージの特徴として、pageColorプロパティで指定した色にアニメーションで切り替わるようになります。
IntroViewsFlutter()ウィジェット
チュートリアル画面を表示するウィジェットです。
PageViewModel()ウィジェットのリストを引数としてとります。

複数のチュートリアル画面を表示する

複数のチュートリアル画面を表示させたいときはPageViewModel()のリストに、
表示したい順番で追加してあげるだけです。

pages定数を下記の通り修正しましょう。
画像とキャプション以外は１ページ目のコピペです。

     static final pages = [
    PageViewModel(
      pageColor: const Color(0xFFFF7A00),
      iconImageAssetPath: 'images/Daco_4792678.png',
      body: Text(
          'In a flurry of slashes, Juggernaut cuts down his foes. Sprinting and spinning into battle with reckless abandon, and nearly invincible once he is able to begin his assault, stopping Juggernaut can often be just as difficult as surviving him.'),
      title: Text('Juggernaut'),
      mainImage: Image.asset(
        'images/Daco_4792678.png',
        height: 400.0,
        width: 400.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(color: Colors.white),
      bodyTextStyle: TextStyle(color: Colors.white),
    ),
    PageViewModel(
      pageColor: const Color(0xD2FF0000),
      iconImageAssetPath: 'images/Daco_194866.png',
      body: Text(
        'One after another, Axe cuts down his foes.',
      ),
      title: Text('Axe'),
      mainImage: Image.asset(
        'images/Daco_194866.png',
        height: 320.0,
        width: 320.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
    PageViewModel(
      pageColor: const Color(0xFF7A008B),
      iconImageAssetPath: 'images/Daco_4505724.png',
      body: Text(
        'He speeds time to dash between locations, manipulates it to dodge attacks, stops it in a large area to devastate his foes, and given enough of it to gather resources, he can make himself unbelievably powerful.',
      ),
      title: Text('Faceless Void'),
      mainImage: Image.asset(
        'images/Daco_4505724.png',
        height: 400.0,
        width: 400.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),
    PageViewModel(
      pageColor: const Color(0xBC0044FF),
      iconImageAssetPath: 'images/Daco_5480788.png',
      body: Text(
        'Disruptor excels at shattering the plans of his enemies. Summoning impassable fences to trap targets as he calls down a silencing storm, should a foe attempt something unexpected he simply teleports them back to their earlier location.',
      ),
      title: Text('Disruptor'),
      mainImage: Image.asset(
        'images/Daco_5480788.png',
        height: 400.0,
        width: 400.0,
        alignment: Alignment.center,
      ),
      titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
      bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
    ),