Flutterで簡単に最初に一回だけ出てくる紹介画面を作る

flutterで紹介画面（イントロダクションスクリーン）を作る！

このような感じで作ってみました↓↓

公式サイトのデモ画像↓

introduction_screen を使う

こんな感じで使う

return IntroductionScreen(
                pages: [
                  PageViewModel(
                    title: "宿題管理アプリSKIMERへようこそ",
                    body:
                        "宿題をみんなで管理\n宿題を終わらせてランクを上げよう！",
                    image: Center(
                      child: Image.asset("assets/skimer-07.png"),
                    ),
                  )
                ],
                onDone: () async {
                  SharedPreferences prefs =
                      await SharedPreferences.getInstance();
                  await prefs.setBool('haveSeenIntro', true);
                  Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                    return HomePage();
                  }));
                },
                showSkipButton: true,
                skip: const Text("スキップ"),
                done: const Text("ホームへ",
                    style: TextStyle(fontWeight: FontWeight.w600)),
              );

一回だけ表示させる

SharedPreferencesの'haveSeenIntro'をtrueにすることで、初めてみたときだけ表示させることができます。
FutureBuilderを使って、非同期のhaveSeenIntro()関数で見たかどうかをチェックして処理を分けました。
SplashScreenはローディングスクリーンです。

class HogeScreen extends StatelessWidget {
  Future<bool> haveSeenIntro() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getBool('haveSeenIntro') ?? false;
  }
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
          future: haveSeenIntro(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return SplashScreen();
            }

            if (snapshot.error != null) {
              return SplashScreen();
            }
            if (snapshot.data) {
              return HomePage();
            } else {
              return IntroductionScreen(
                pages: [
                  PageViewModel(
                    title: "宿題管理アプリSKIMERへようこそ",
                    body:
                        "宿題をみんなで管理\n宿題を終わらせてランクを上げよう！",
                    image: Center(
                      child: Image.asset("assets/skimer-07.png"),
                    ),
                  )
                ],
                onDone: () async {
                  SharedPreferences prefs =
                      await SharedPreferences.getInstance();
                  await prefs.setBool('haveSeenIntro', true);
                  Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                    return HomePage();
                  }));
                },
                showSkipButton: true,
                skip: const Text("スキップ"),
                done: const Text("ホームへ",
                    style: TextStyle(fontWeight: FontWeight.w600)),
              );
            }
          },
        );
    }
}