Flutter で背景色がきれいに切り替わるチュートリアル画面を作る

モチベーション

Flutter でよくあるチュートリアル画面を作成するために flutter_sliding_tutorial を使って、、という記事はよくあるのですが、背景色がきれいに切り替わるようにするには？という記事は見かけなかったので書いてみました。

こんな感じのチュートリアル画面を作成します。

環境

• Flutter 3.0.5
• Tools Dart 2.17.6
• DevTools 2.12.2
• flutter_sliding_tutorial: ^1.1.3+3

flutter_sliding_tutorial を使ったチュートリアル画面

ポイントは AnimatedBackgroundColor で背景色を指定してあげることです。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';

void main() => runApp(const TutorialPage());

class TutorialPage extends StatefulWidget {
  const TutorialPage({Key? key}) : super(key: key);

  @override
  State<TutorialPage> createState() => _TutorialPageState();
}

class _TutorialPageState extends State<TutorialPage> {
  static const int _maxPage = 5;

  static const _colors = [
    Colors.greenAccent,
    Colors.amberAccent,
    Colors.blueAccent,
    Colors.deepOrangeAccent,
    Colors.deepPurpleAccent,
  ];

  static const _icons = [
    Icon(Icons.home, size: 160),
    Icon(Icons.light_mode, size: 160),
    Icon(Icons.star, size: 160),
    Icon(Icons.favorite, size: 160),
    Icon(Icons.thumb_up, size: 160),
  ];

  final _ctrl = PageController();
  final _notifier = ValueNotifier(0.0);

  @override
  void initState() {
    // 全画面 - 開始
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [],
    );

    // ページ番号を通知
    _ctrl.addListener(() => _notifier.value = _ctrl.page!);

    super.initState();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    _notifier.dispose();

    // 全画面 - 終了
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: SystemUiOverlay.values,
    );

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AnimatedBackgroundColor(
          pageController: _ctrl,
          pageCount: _maxPage,
          colors: _colors,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: PageView(
                  controller: _ctrl,
                  children: List<Widget>.generate(
                    _maxPage,
                    (index) => Center(child: _icons[index]),
                  ),
                ),
              ),
              SlidingIndicator(
                indicatorCount: _maxPage,
                notifier: _notifier,
                inactiveIndicatorSize: 24,
                inActiveIndicator: const Icon(
                  Icons.radio_button_unchecked,
                  color: Colors.white,
                  size: 24,
                ),
                activeIndicatorSize: 24,
                activeIndicator: const Icon(
                  Icons.check_circle,
                  color: Colors.white,
                  size: 24,
                ),
              ),
              const SizedBox(height: 32),
            ],
          ),
        ),
      ),
    );
  }
}

さいごに

上の例では説明のためにアイコンを切り替えているだけですが、この部分を透過の PNG にするなどすれば、きれいなチュートリアル画面の完成です。

参考

• 【Flutter】スマホアプリでよく見かけるチュートリアルページを作る方法（３つのパッケージを比較）