[flutter] 플러터 ProgressIndicator를 사용하여 타이머 동작 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

플러터 앱에서 타이머 동작 중에 진행 상태를 시각적으로 표시하려면 ProgressIndicator를 사용할 수 있습니다. ProgressIndicator는 사용자에게 어떤 작업이 진행 중인지 시각적으로 표시해주는데 유용합니다. 이제 어떻게 ProgressIndicator를 사용하여 타이머 동작 진행 상태를 표시하는지 알아보겠습니다.

1. CircularProgressIndicator 사용하기

다음은 ProgressIndicator를 사용하여 타이머 동작 진행 상태를 표시하는 방법입니다.

import 'package:flutter/material.dart';

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

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

class MyTimerScreen extends StatefulWidget {
  @override
  _MyTimerScreenState createState() => _MyTimerScreenState();
}

class _MyTimerScreenState extends State<MyTimerScreen> {
  bool _isTimerRunning = false;

  void startTimer() {
    setState(() {
      _isTimerRunning = true;
    });
    // 타이머 동작 시작

    // 여기에 타이머 동작 코드 작성
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer App'),
      ),
      body: Center(
        child: _isTimerRunning ? CircularProgressIndicator() : RaisedButton(
          onPressed: () {
            startTimer();
          },
          child: Text('Start Timer'),
        ),
      ),
    );
  }
}

위 코드에서는 _isTimerRunning 변수를 사용하여 타이머가 동작 중인지 여부를 추적합니다. _isTimerRunning이 true인 경우 CircularProgressIndicator가 표시되고, 타이머가 동작하지 않는 경우에는 ‘Start Timer’ 버튼이 표시됩니다.

2. 결과 확인하기

위 코드를 실행하면 ‘Start Timer’ 버튼을 누르면 CircularProgressIndicator가 표시되어 타이머가 동작 중임을 나타냅니다.

이제 여러분도 플러터 앱에서 타이머 동작 진행 상태를 표시하기 위해 ProgressIndicator를 사용할 수 있습니다.

참고: Flutter 공식 문서 - CircularProgressIndicator 클래스