[flutter] 플러터 ProgressIndicator의 진행 상태와 관련된 이벤트 처리 방법은?

20 Dec 2023

flutter

플러터에서 ProgressIndicator는 작업 진행 상황을 시각적으로 나타내는 데 사용됩니다. ProgressIndicator가 표시되는 동안에는 일반적으로 작업이 실행 중인 상태를 의미하며, 작업이 완료되면 ProgressIndicator는 사라집니다. ProgressIndicator의 진행 상태와 관련된 이벤트 처리는 일반적으로 비동기 작업이 포함된 상황에서 사용됩니다.

ProgressIndicator 이벤트 처리 방법

ProgressIndicator의 진행 상태와 관련된 이벤트 처리 방법을 살펴보겠습니다. 아래 예시에서는 RaisedButton을 터치할 때 ProgressIndicator가 나타나고, 3초 후에 ProgressIndicator가 사라지도록 구현된 코드를 보여드리겠습니다.

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  void _startLoading() {
    setState(() {
      _isLoading = true;
    });
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ProgressIndicator 예제'),
      ),
      body: Center(
        child: _isLoading
            ? CircularProgressIndicator()
            : RaisedButton(
                onPressed: _startLoading,
                child: Text('로딩 시작'),
              ),
      ),
    );
  }
}

위 코드에서 _isLoading 변수를 사용하여 ProgressIndicator의 표시 여부를 제어하며, _startLoading 메서드를 통해 ProgressIndicator가 표시된 후 3초 후에 사라지도록 구현하였습니다.

이와 같은 방식으로 ProgressIndicator의 상태를 제어하고 원하는 이벤트를 처리할 수 있습니다.

결론

플러터에서 ProgressIndicator의 진행 상태와 관련된 이벤트 처리는 주로 비동기 작업 중에 사용됩니다. ProgressIndicator를 표시하는 동안에는 작업이 진행 중임을 나타내며, 작업이 완료되면 ProgressIndicator를 숨깁니다. 필요에 따라 ProgressIndicator의 상태를 제어하고 사용자에게 진행 상황을 시각적으로 표시할 수 있도록 이벤트 처리를 구현할 수 있습니다.

참고: Flutter 공식 문서 - ProgressIndicator