モケラ

Tech Sheets

mokelab

FlutterのStepperを使ってみる

最終更新日:2023-10-13

公式ドキュメント:Stepper class

Stepper は、一連のステップの進行状況を表示するためのウィジェットです。フォームの各ステップを表すために使用したり、ユーザーがタスクを完了するために必要な手順を示すために使用したりできます。

int _currentStep = 0;

final List<Step> _steps = const [
  Step(
    title: Text('Step 1'),
    content: Text('"Continue"をタップで次のステップへ'),
  ),
  Step(
    title: Text('Step 2'),
    content: Text('"Cancel"をタップで前のステップへ'),
  ),
  Step(
    title: Text('Step 3'),
    content: Text('ステップ名をタップすることで、そのステップへ'),
  ),
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stepper(
      currentStep: _currentStep,
      // 次のステップへ
      onStepContinue: () {
        setState(() {
          if (_currentStep < _steps.length - 1) {
            _currentStep++;
          }
        });
      },
      // 前のステップへ
      onStepCancel: () {
        setState(() {
          if (_currentStep > 0) {
            _currentStep--;
            }
        });
      },
      // ステップ自体をタップ
      onStepTapped: (int index) {
        setState(() {
          _currentStep = index;
        });
      },
      steps: _steps,
    ),
  );
}

一覧に戻る