オンボーディング Onboarding

初回起動時に、アプリの特徴を数枚の画面で横スワイプしながら紹介する。下のドットで今何枚目かが分かる。

別名: ウォークスルーチュートリアル画面初回説明ページインジケータードットインジケーターPageViewWalkthrough
動き: 横にスワイプドットが伸びる最後にはじめる
作り方: パッケージあり標準でも作れますが、pub.dev のパッケージを使うと早いです

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

横スワイプで1枚ずつめくる部分は PageView、ボタンでめくるときは PageController.nextPage を使います。

下のドット（ページインジケーター）は、今のページのドットだけ AnimatedContainer で横長にすると自作できます。

凝った動きのドットが欲しければ smooth_page_indicator、画面一式をまとめて作るなら introduction_screen が便利です。

「スキップ」を必ず付けて、読まずに始めたい人を待たせないのがお作法です。

こんなときに

初めて使う人に、アプリの使いどころを2〜4枚で伝えたい
横スワイプでめくる画面全般（写真のスライドなど）

避けたい場面

5枚以上の長い説明（読まれない。使いながら出す「コーチマーク」のほうが伝わる）

最小コード

final controller = PageController();

PageView(
  controller: controller,
  onPageChanged: (i) => setState(() => page = i),
  children: const [IntroPage1(), IntroPage2(), IntroPage3()],
),
// ドット: 今のページだけ横長にする
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
  for (var i = 0; i < 3; i++)
    AnimatedContainer(
      duration: const Duration(milliseconds: 250),
      width: i == page ? 24 : 8,
      height: 8,
      margin: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: i == page ? Colors.indigo : Colors.grey.shade300,
        borderRadius: BorderRadius.circular(4),
      ),
    ),
]),