[Flutter] CircularProgressIndicator 란?

Flutter의 CircularProgressIndicator

CircularProgressIndicator는 Flutter에서 비동기 작업이 진행 중임을 사용자에게 시각적으로 알려주는 동그란 로딩 스피너입니다. 이 위젯은 주로 데이터를 로드하거나 시간이 걸리는 작업이 진행되는 동안 화면에 표시되어 사용자가 기다려야 함을 알 수 있게 해줍니다.

 

 

 

 

 

CircularProgressIndicator 사용 방법

아래는 CircularProgressIndicator를 사용하는 기본적인 예제입니다:

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('CircularProgressIndicator 예제'),
        ),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

CircularProgressIndicator의 주요 속성

• value: value 속성은 프로그레스의 진행 상태를 나타냅니다. 값은 0.0에서 1.0 사이이며, 이 값이 지정되지 않으면 무한 루프로 돌아가는 'indeterminate' 상태가 됩니다.
• strokeWidth: 프로그레스의 원형 경계의 두께를 설정합니다. 기본값은 4.0입니다.
• color: 프로그레스 원형의 색상을 지정합니다. Flutter의 최신 버전에서는 color 속성이 추가되어 손쉽게 색상을 설정할 수 있습니다.
• backgroundColor: 프로그레스의 배경색을 설정할 수 있습니다.

 

 

 

 

 

 

indeterminate 상태

CircularProgressIndicator는 기본적으로 indeterminate 상태로 작동하며, 이는 진행률을 알 수 없을 때 사용됩니다. 예를 들어, 서버로부터 데이터를 로드하는 동안 정확한 완료 시점을 알 수 없는 경우에 유용합니다.

indeterminate 상태 예시

Center(
  child: CircularProgressIndicator(),
),
    

 

 

 

 

 

 

 

 

determinate 상태

만약 작업의 진행 상태를 알 수 있을 때는 value 속성을 사용하여 진행률을 명시적으로 표시할 수 있습니다.

determinate 상태 예시

Center(
  child: CircularProgressIndicator(
    value: 0.7,  // 70% 진행
  ),
),
    

 

 

 

 

 

 

 

 

CircularProgressIndicator 커스터마이징

다양한 속성을 사용하여 CircularProgressIndicator를 커스터마이징할 수 있습니다:

CircularProgressIndicator(
  value: 0.5,  // 50% 진행
  strokeWidth: 6.0,  // 원형 경계의 두께
  backgroundColor: Colors.grey,  // 배경색
  color: Colors.blue,  // 프로그레스 색상
)
    

 

 

 

 

 

 

 

 

결론

CircularProgressIndicator는 비동기 작업의 진행 상태를 시각적으로 보여주는 간단하고 효과적인 Flutter 위젯입니다. 사용자가 작업이 진행 중임을 인지할 수 있게 해주며, indeterminate와 determinate 두 가지 상태로 사용할 수 있어 다양한 상황에 유용합니다.