[Flutter] Stepper(세로,둥근,숫자,다음 단계)

 

설명 페이지를 개발하는 도중 AI에게 만들어달랬더니

 

이걸 만들어줬다. 

 

생각보다 이뻐서 쓸까말까 고민하다가... 머릿속에 있는 것을 적용하기 어렵다고 판단했다

 

그렇다고 코드를 그냥 버리기엔 너무 아까워서 블로그에 적어논다 

 

코드 예시

class _HelperPageState extends State<HelperPage> {
  int currentStep = 0; // 초기 단계를 0으로 설정

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Align(
          alignment: Alignment.centerLeft,
          child: CustomTextJalnanGothic(
            text: "설명서",
            size: 16,
          ),
        ),
      ),
      body: Container(
        child: Stepper(
          currentStep: currentStep,
          onStepTapped: (step) {
            setState(() {
              currentStep = step;
            });
          },
          controlsBuilder: (BuildContext context, ControlsDetails details) {
            return Row(
              children: <Widget>[
                if (details.currentStep > 0)
                  ElevatedButton(
                    onPressed: details.onStepCancel,
                    child: const Text('이전'),
                  ),
                const SizedBox(width: 12.0),
                if (details.currentStep < 3)
                  ElevatedButton(
                    onPressed: details.onStepContinue,
                    child: const Text('다음'),
                  ),
              ],
            );
          },
          steps: [
            Step(
              title: const Text('단계 1'),
              content: stepsContent(0, setState),
            ),
            Step(
              title: const Text('단계 2'),
              content: stepsContent(1, setState),
            ),
            Step(
              title: const Text('단계 3'),
              content: stepsContent(2, setState),
            ),
            Step(
              title: const Text('단계 4'),
              content: stepsContent(3, setState),
            ),
          ],
        ),
      ),
    );
  }

  // 각 단계의 내용을 반환하는 함수
  Widget stepsContent(int step, StateSetter bottosetState) {
    List<Widget> indicators = List.generate(4, (index) {
      return Container(
        width: currentStep == index ? 10 : 6, // 현재 단계에 맞는 점은 더 크게
        height: currentStep == index ? 10 : 6, // 현재 단계에 맞는 점은 더 크게
        margin: const EdgeInsets.symmetric(horizontal: 2), // 점들 사이의 간격
        decoration: BoxDecoration(
          color: currentStep == index ? Colors.blue : Colors.cyan, // 현재 단계에 맞는 점은 다른 색상으로
          shape: BoxShape.circle, // 점을 원형으로
        ),
      );
    });

    switch (step) {
      case 0:
        return Container(
          // 단계 1의 내용
        );
      case 1:
        return Container(
          // 단계 2의 내용
        );
      case 2:
        return Container(
          // 단계 3의 내용
        );
      case 3:
        return Container(
          // 단계 4의 내용
        );
      default:
        return Container();
    }
  }
}