[flutter] 플러터 Stepper를 사용하여 카운트다운 타이머 기능이 있는 스탑워치 애플리케이션을 만들어보자.

07 Dec 2023

flutter

개요

이번에는 Flutter의 Stepper 위젯을 사용하여 카운트다운 타이머 기능이 있는 스탑워치 애플리케이션을 만들어보려고 합니다. Stepper 위젯은 순차적인 단계를 가지며, 사용자가 이를 네비게이션하고 선택할 수 있는 기능을 제공하는 위젯입니다.

Stepper 위젯 구성 요소

Stepper 위젯은 크게 다음과 같은 구성 요소로 이루어져 있습니다.

steps: 각 스텝을 정의하고 있는 리스트입니다. 각 스텝은 본문, 제목, 상태(완료, 진행 중, 비활성화), 컨텐츠 등을 가지고 있습니다.
currentStep: 현재 선택된 스텝의 인덱스를 가지고 있습니다.
onStepTapped: 사용자가 스텝을 탭할 때 실행할 함수를 정의합니다.

애플리케이션 개발

이제 스탑워치 애플리케이션을 개발해보겠습니다. 우선, 필요한 패키지를 import 해줍니다.

import 'package:flutter/material.dart';
import 'dart:async';

애플리케이션의 메인 위젯을 생성합니다.

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

class StopwatchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stopwatch App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: StopwatchScreen(),
    );
  }
}

이제 StopwatchScreen 클래스를 정의하여 스탑워치 애플리케이션을 구현합니다. StopwatchScreen은 StatefulWidget을 상속받고, 인터페이스를 구성할 State 클래스인 _StopwatchScreenState를 만들어줍니다.

class StopwatchScreen extends StatefulWidget {
  @override
  _StopwatchScreenState createState() => _StopwatchScreenState();
}

class _StopwatchScreenState extends State<StopwatchScreen> {
  int _currentStep = 0;
  bool _isRunning = false;
  int _seconds = 0;

  Timer _timer;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stopwatch'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stepper(
            currentStep: _currentStep,
            onStepTapped: (step) {
              setState(() {
                _currentStep = step;
              });
            },
            steps: [
              Step(
                title: Text('Start'),
                content: ButtonBar(
                  children: [
                    RaisedButton(
                      onPressed: () {
                        _startTimer();
                      },
                      child: Text('Start'),
                    ),
                  ],
                ),
                isActive: _currentStep == 0,
              ),
              Step(
                title: Text('Stop'),
                content: ButtonBar(
                  children: [
                    RaisedButton(
                      onPressed: () {
                        _stopTimer();
                      },
                      child: Text('Stop'),
                    ),
                  ],
                ),
                isActive: _currentStep == 1,
              ),
              Step(
                title: Text('Reset'),
                content: ButtonBar(
                  children: [
                    RaisedButton(
                      onPressed: () {
                        _resetTimer();
                      },
                      child: Text('Reset'),
                    ),
                  ],
                ),
                isActive: _currentStep == 2,
              ),
            ],
          ),
          SizedBox(height: 30),
          Text('Elapsed Time: $_seconds seconds'),
        ],
      ),
    );
  }

  void _startTimer() {
    if (!_isRunning) {
      _timer = Timer.periodic(Duration(seconds: 1), (timer) {
        setState(() {
          _seconds++;
        });
      });
      _isRunning = true;
    }
  }

  void _stopTimer() {
    if (_isRunning) {
      _timer.cancel();
      _isRunning = false;
    }
  }

  void _resetTimer() {
    _stopTimer();
    setState(() {
      _seconds = 0;
      _currentStep = 0;
    });
  }

  @override
  void dispose() {
    _stopTimer();
    super.dispose();
  }
}

위 코드는 다음과 같은 동작을 구현합니다.

Stepper를 사용하여 세 개의 스텝을 생성합니다.
각 스텝에는 해당하는 기능과 상태가 포함된 버튼이 있습니다.
Start 버튼을 누르면 타이머가 시작되고, Stop 버튼으로 중지할 수 있습니다.
Reset 버튼을 누르면 타이머가 중지되고 초기화됩니다.

이제 애플리케이션을 실행해보면 Stepper를 사용한 카운트다운 타이머 기능이 있는 스탑워치 애플리케이션이 동작하는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 Flutter의 Stepper 위젯을 사용하여 카운트다운 타이머 기능이 있는 스탑워치 애플리케이션을 만들어보았습니다. Stepper 위젯을 사용하여 각 단계를 표시하고, 버튼을 통해 동작을 제어할 수 있습니다. 이를 응용하여 다양한 기능을 가진 애플리케이션을 개발할 수 있습니다.