[flutter] 플러터 ProgressIndicator를 사용하여 주문 처리 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

주문 처리나 데이터 로딩과 같은 작업을 수행할 때, 사용자에게 작업이 진행 중임을 시각적으로 전달하는 것은 매우 중요합니다. Flutter에서는 ProgressIndicator 위젯을 사용하여 이를 구현할 수 있습니다.

다음은 LinearProgressIndicator와 CircularProgressIndicator를 사용하여 진행 상태를 표시하는 방법입니다.

LinearProgressIndicator

import 'package:flutter/material.dart';

class MyLinearProgressIndicator extends StatefulWidget {
  @override
  _MyLinearProgressIndicatorState createState() => _MyLinearProgressIndicatorState();
}

class _MyLinearProgressIndicatorState extends State<MyLinearProgressIndicator> {
  @override
  Widget build(BuildContext context) {
    return LinearProgressIndicator(
      // value: 진행 상태 퍼센트 (0.0부터 1.0까지)
      value: 0.5,
      // backgroundColor: 배경색
      backgroundColor: Colors.grey,
      // valueColor: 진행 표시색
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    );
  }
}

CircularProgressIndicator

import 'package:flutter/material.dart';

class MyCircularProgressIndicator extends StatefulWidget {
  @override
  _MyCircularProgressIndicatorState createState() => _MyCircularProgressIndicatorState();
}

class _MyCircularProgressIndicatorState extends State<MyCircularProgressIndicator> {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      // backgroundColor: 배경색
      backgroundColor: Colors.grey,
      // valueColor: 진행 표시색
      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    );
  }
}

위와 같이 코드를 작성하면, LinearProgressIndicator나 CircularProgressIndicator를 플러터 앱에 구현할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요: Flutter 공식 문서 - ProgressIndicator

이제 주문 처리나 데이터 로딩 상태를 사용자에게 명확히 시각적으로 표현할 수 있을 것입니다.