[flutter] 플러터 ProgressIndicator의 사용 방법은?

20 Dec 2023

flutter

프로그램을 실행하는 동안에 사용자에게 진행 상황을 시각적으로 보여주는 데 프로그래스 인디케이터를 사용할 수 있습니다. 여기서는 플러터(Flutter)에서 ProgressIndicator를 사용하는 방법에 대해 알아보겠습니다.

1. 선형(Linear) 프로그래스 인디케이터

플러터에서 선형 프로그래스 인디케이터를 사용하려면, 다음과 같이 코드를 작성하세요.

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: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

2. 원형(Circular) 프로그래스 인디케이터

플러터에서 원형 프로그래스 인디케이터를 사용하려면, 다음과 같이 코드를 작성하세요.

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: CircularProgressIndicator(
            valueColor: new AlwaysStoppedAnimation<Color>(Colors.orange),
          ),
        ),
      ),
    );
  }
}

위 코드에서 CircularProgressIndicator 위젯을 사용하여 프로그래스 인디케이터를 표시합니다. valueColor 속성을 사용하여 색상을 변경할 수도 있습니다. 여기서는 주황색으로 변경했습니다.

플러터를 사용하여 프로그래스 인디케이터를 표시하는 간단한 방법에 대해 알아보았습니다. 앱이 비교적 오랜 시간 동안 작업을 수행할 때 사용자 경험을 향상시키기 위해 프로그래스 인디케이터를 적절히 활용해보세요.