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

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

このような感じで作ってみました↓↓
![スクリーンショット 2020-12-31 17.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188304/0d21be24-8db0-81ac-1177-9eb80c61462a.png)


[公式サイト](https://pub.dev/packages/introduction_screen)のデモ画像↓

![スクリーンショット 2020-12-31 17.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188304/4e7826d1-aa6e-5659-7da5-de6bf6dcbc76.png)

# introduction_screen を使う

https://pub.dev/packages/introduction_screen

こんな感じで使う

```dart

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`はローディングスクリーンです。


```dart
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)),
              );
            }
          },
        );
    }
}
```