[flutter] 플러터 Stepper를 사용하여 사운드 볼륨 조절 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 글에서는 Flutter의 Stepper 위젯을 사용하여 사운드 볼륨 조절 애플리케이션을 만들어보겠습니다.

Stepper란?

Stepper는 사용자가 단계적으로 작업을 수행할 수 있는 위젯입니다. 주로 숫자나 아이콘으로 표시되며, 각 단계별로 일련의 작업이 진행됩니다.

프로젝트 설정하기

먼저 Flutter 프로젝트를 생성하고 pubspec.yaml 파일에 flutter/material.dart를 import 해줍니다.

import 'package:flutter/material.dart';

Stepper 위젯 생성하기

Stepper를 생성하기 위해 StatefulWidget을 상속하는 새로운 위젯을 정의합니다.

class VolumeControl extends StatefulWidget {
  @override
  _VolumeControlState createState() => _VolumeControlState();
}

위젯의 상태를 관리하기 위해 _VolumeControlState 클래스를 생성합니다.

class _VolumeControlState extends State<VolumeControl> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Stepper(
      currentStep: _currentStep,
      onStepContinue: () {
        setState(() {
          if (_currentStep < 2) {
            _currentStep += 1;
          }
        });
      },
      onStepCancel: () {
        setState(() {
          if (_currentStep > 0) {
            _currentStep -= 1;
          }
        });
      },
      steps: [
        Step(
          title: Text('Step 1'),
          content: Text('사운드 볼륨 조절 단계 1'),
        ),
        Step(
          title: Text('Step 2'),
          content: Text('사운드 볼륨 조절 단계 2'),
        ),
        Step(
          title: Text('Step 3'),
          content: Text('사운드 볼륨 조절 단계 3'),
        ),
      ],
    );
  }
}

이제 위에서 정의한 VolumeControl 위젯을 사용하여 애플리케이션의 화면을 구성합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Volume Control',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Volume Control'),
        ),
        body: Center(
          child: VolumeControl(),
        ),
      ),
    );
  }
}

마지막으로 main.dart 파일에서 애플리케이션을 실행합니다.

void main() {
  runApp(MyApp());
}

이제 애플리케이션을 실행하면 Stepper로 이루어진 사운드 볼륨 조절 애플리케이션이 나타납니다.

이것으로 플러터 Stepper를 사용하여 사운드 볼륨 조절 애플리케이션을 만들었습니다. Stepper를 사용하면 단계적인 작업을 구현하는데 유용하게 사용할 수 있습니다.

참고 자료: