【Flutter】ステップ(Stepper)入力の基本実装から実践的なアンケート画面の作成までの完全ガイド！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StepperDemo(),
    );
  }
}

class StepperDemo extends StatefulWidget {
  @override
  _StepperDemoState createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ステップ入力デモ'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep < 2) {
            setState(() {
              _currentStep += 1;
            });
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep -= 1;
            });
          }
        },
        steps: [
          Step(
            title: Text('ステップ 1'),
            content: Text('ここにステップ 1 の内容が入ります。'),
          ),
          Step(
            title: Text('ステップ 2'),
            content: Text('ここにステップ 2 の内容が入ります。'),
          ),
          Step(
            title: Text('ステップ 3'),
            content: Text('ここにステップ 3 の内容が入ります。'),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(SurveyApp());

class SurveyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SurveyStepper(),
    );
  }
}

class SurveyStepper extends StatefulWidget {
  @override
  _SurveyStepperState createState() => _SurveyStepperState();
}

class _SurveyStepperState extends State<SurveyStepper> {
  int _currentStep = 0;
  List<String> _answers = ['', '', ''];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('アンケート'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep < _answers.length - 1) {
            setState(() {
              _currentStep += 1;
            });
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep -= 1;
            });
          }
        },
        steps: [
          Step(
            title: Text('質問 1'),
            content: TextFormField(
              initialValue: _answers[0],
              onChanged: (value) {
                _answers[0] = value;
              },
              decoration: InputDecoration(labelText: 'あなたの趣味は何ですか？'),
            ),
          ),
          Step(
            title: Text('質問 2'),
            content: TextFormField(
              initialValue: _answers[1],
              onChanged: (value) {
                _answers[1] = value;
              },
              decoration: InputDecoration(labelText: '好きな食べ物は何ですか？'),
            ),
          ),
          Step(
            title: Text('質問 3'),
            content: TextFormField(
              initialValue: _answers[2],
              onChanged: (value) {
                _answers[2] = value;
              },
              decoration: InputDecoration(labelText: '旅行で行きたい場所はどこですか？'),
            ),
          ),
        ],
      ),
    );
  }
}