ステッパー(手順表示) Stepper
「お届け先 → 支払い → 確認」のように手続きの段階を番号付きで並べ、今どこにいて残りいくつかを見せる。
本物の 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