個人開発者が勉強がてらまとめているだけのサイトです

ステッパー(手順表示) Stepper

「お届け先 → 支払い → 確認」のように手続きの段階を番号付きで並べ、今どこにいて残りいくつかを見せる。

別名
ステップ表示進行状況ウィザード手続きの段階Step IndicatorWizard
動き
1段ずつ進む済んだ段にチェック開いた段だけ中身が出る
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの?

購入手続きや会員登録など、順番に進める必要がある入力を分けて見せる形です。

Stepper に Step の一覧を渡し、currentStep で今の段を指定します。

各 Step の state を StepState.complete にするとチェックマーク、editing にすると鉛筆マークになります。

標準のボタン文言は controlsBuilder で「次へ」「戻る」などに変えられます。

横並びにしたいときは type: StepperType.horizontal を使います。

こんなときに

  • 入力が多く、段階に分けたほうが迷わない(購入・申し込み・初期設定)
  • 「あと何段で終わるか」を見せて、途中でやめられないようにしたい

避けたい場面

  • 段が1〜2個しかない(普通のフォームで十分)

最小コード

Stepper(
  currentStep: step,
  onStepContinue: () => setState(() => step++),
  onStepCancel: () => setState(() => step--),
  steps: [
    Step(
      title: const Text('お届け先'),
      content: const AddressForm(),
      state: step > 0 ? StepState.complete : StepState.editing,
      isActive: step >= 0,
    ),
    Step(
      title: const Text('支払い方法'),
      content: const PaymentForm(),
      isActive: step >= 1,
    ),
  ],
)

使うウィジェット

StepperStepStepState

似ているもの・一緒に見たいもの

触ってみる ↗
ナビゲーション オンボーディングOnboarding

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

横にスワイプ