[flutter] 플러터 ProgressIndicator를 사용하여 다운로드 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

플러터 애플리케이션에서 파일이나 데이터를 다운로드할 때 진행 상태를 표시하는 것은 사용자 경험을 향상시키는 데 중요합니다. 이를 위해 ProgressIndicator 위젯을 사용할 수 있습니다. 이 포스트에서는 플러터에서 ProgressIndicator를 사용하여 다운로드 진행 상태를 표시하는 방법에 대해 알아보겠습니다.

ProgressIndicator란?

ProgressIndicator는 진행 상태를 나타내기 위해 사용되는 플러터 위젯 중 하나입니다. 이 위젯은 원형으로 표시되는 진행률 표시기나 직선으로 표시되는 진행 막대로 사용될 수 있습니다.

다운로드 진행 상태 표시하기

아래는 ProgressIndicator를 사용하여 다운로드 진행 상태를 표시하는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('다운로드 진행 상태 표시하기'),
        ),
        body: Center(
          child: DownloadButton(),
        ),
      ),
    );
  }
}

class DownloadButton extends StatefulWidget {
  @override
  _DownloadButtonState createState() => _DownloadButtonState();
}

class _DownloadButtonState extends State<DownloadButton> {
  bool _downloading = false;

  void _startDownload() {
    setState(() {
      _downloading = true;
      // TODO: 파일 다운로드 로직 추가
    });
    // 파일 다운로드 완료 후
    setState(() {
      _downloading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _startDownload();
      },
      child: _downloading ? CircularProgressIndicator() : Text('다운로드 시작'),
    );
  }
}

위 예제에서는 ElevatedButton을 터치할 때 _startDownload 메서드가 호출되고, 그 결과로 _downloading 상태가 변경됩니다. 이때 _downloading이 true라면 ProgressIndicator가 표시되고, false라면 “다운로드 시작”이라는 텍스트가 표시됩니다.

결론

ProgressIndicator를 사용하여 플러터 애플리케이션에서 다운로드 진행 상태를 표시하는 방법에 대해 알아보았습니다. 이를 통해 사용자는 다운로드 작업이 진행 중임을 시각적으로 확인할 수 있게 됩니다. 위 예제를 참고하여 다양한 상황에 맞게 다운로드 진행 상태를 표시할 수 있도록 코드를 작성해 보세요.

참고 자료

플러터 공식 문서 - ProgressIndicator