【Flutter】チュートリアル画面の作成の完全ガイド！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TutorialScreen(),
    );
  }
}

class TutorialScreen extends StatefulWidget {
  @override
  _TutorialScreenState createState() => _TutorialScreenState();
}

class _TutorialScreenState extends State<TutorialScreen> {
  int _currentPage = 0;
  final PageController _pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (int page) {
          setState(() {
            _currentPage = page;
          });
        },
        children: <Widget>[
          buildPage("商品を紹介", "ここではアプリで扱っている商品の魅力について説明します。"),
          buildPage("特典を紹介", "アプリを利用することのメリット、特典について紹介します。"),
          buildPage("会員登録を促す", "アプリの全機能を利用するためには会員登録が必要です。"),
        ],
      ),
      bottomSheet: _currentPage == 2
          ? ElevatedButton(
              child: Text("始める"),
              onPressed: () {},
            )
          : Container(
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  TextButton(
                    onPressed: () {
                      _pageController.animateToPage(0,
                          duration: Duration(milliseconds: 400),
                          curve: Curves.easeInOut);
                    },
                    child: Text("スキップ"),
                  ),
                  Row(
                    children: List.generate(3, (index) => buildDot(index, _currentPage)),
                  ),
                  TextButton(
                    onPressed: () {
                      _pageController.nextPage(
                          duration: Duration(milliseconds: 400), curve: Curves.easeInOut);
                    },
                    child: Text("次へ"),
                  ),
                ],
              ),
            ),
    );
  }

  Widget buildPage(String title, String description) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
          SizedBox(height: 20),
          Text(description, textAlign: TextAlign.center, style: TextStyle(fontSize: 18)),
        ],
      ),
    );
  }

  Widget buildDot(int index, int currentPage) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      height: 10,
      width: 10,
      decoration: BoxDecoration(
        color: currentPage == index ? Colors.blue : Colors.grey,
        shape: BoxShape.circle,
      ),
    );
  }
}