[flutter] 플러터 Stepper를 사용하여 사용자가 원하는 시간 간격을 선택하는 타이머 애플리케이션을 만들어보자.

07 Dec 2023

flutter

개요

이번에는 플러터(Flutter)를 사용하여 사용자가 원하는 시간 간격을 선택할 수 있는 타이머 애플리케이션을 만들어보겠습니다. 이 애플리케이션에서는 Stepper 위젯을 활용하여 사용자가 원하는 시간 단위를 선택하고, 선택한 시간만큼 주기적으로 타이머가 동작합니다.

프로젝트 설정

먼저, 새로운 플러터 프로젝트를 생성하고, pubspec.yaml 파일에 flutter/material.dart 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  material:

이후, main.dart 파일을 열어서 기본적인 앱 구조를 설정합니다.

import 'package:flutter/material.dart';

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

class TimerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timer App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimerScreen(),
    );
  }
}

class TimerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 타이머 애플리케이션 UI 구현
  }
}

Stepper 위젯 이해하기

Stepper 위젯은 여러 단계를 가진 인터페이스를 구성하는 데 사용됩니다. 각 단계는 하위 위젯으로 구성되며, 사용자는 Stepper 위젯을 통해 이전 단계 또는 다음 단계로 이동할 수 있습니다. 우리의 타이머 애플리케이션에서는 사용자가 원하는 시간 단위를 선택하는 단계를 Stepper 위젯으로 구현할 것입니다.

Stepper 위젯은 다음과 같은 속성을 가지고 있습니다:

currentStep: 현재 선택된 단계의 인덱스를 정의합니다.
onStepContinue: “다음” 단추가 눌렸을 때 호출되는 콜백 함수를 정의합니다.
onStepCancel: “이전” 단추가 눌렸을 때 호출되는 콜백 함수를 정의합니다.
steps: Step 위젯으로 구성된 리스트를 정의합니다. 각 Step 위젯은 단계의 제목과 내용을 가지고 있습니다.

타이머 애플리케이션 구현하기

우리의 타이머 애플리케이션에서는 Stepper 위젯을 사용하여 사용자가 타이머 간격을 선택할 수 있는 단계를 구성할 것입니다. 선택한 간격에 따라 타이머가 동작하고, 선택한 시간만큼 간격을 두고 똑같은 동작을 반복하게 됩니다.

class TimerScreen extends StatefulWidget {
  @override
  _TimerScreenState createState() => _TimerScreenState();
}

class _TimerScreenState extends State<TimerScreen> {
  int _currentStep = 0;
  int _selectedInterval = 1; // 기본 값: 1초

  List<Step> _timerSteps = [
    Step(
      title: Text('타이머 간격 선택'),
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('타이머 간격을 선택하세요.'),
          SizedBox(height: 16),
          DropdownButton<int>(
            value: _selectedInterval,
            onChanged: (int newValue) {
              setState(() {
                _selectedInterval = newValue;
              });
            },
            items: [
              DropdownMenuItem(
                value: 1,
                child: Text('1초'),
              ),
              DropdownMenuItem(
                value: 5,
                child: Text('5초'),
              ),
              DropdownMenuItem(
                value: 10,
                child: Text('10초'),
              ),
            ],
          ),
        ],
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer App'),
      ),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep < _timerSteps.length - 1) {
            setState(() {
              _currentStep++;
            });
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep--;
            });
          }
        },
        steps: _timerSteps,
      ),
    );
  }
}

결론

이제 위 코드를 실행하면 사용자는 타이머 간격을 선택할 수 있는 단계로 이동할 수 있습니다. 선택한 간격에 따라 타이머를 동작시키는 로직을 추가하면 타이머 애플리케이션을 완성할 수 있습니다. Stepper를 사용하여 복잡한 단계를 가진 애플리케이션을 구현할 때 생산성을 높일 수 있습니다.

목차

개요

프로젝트 설정

Stepper 위젯 이해하기

타이머 애플리케이션 구현하기

결론