Flutter의 프로그래스 바(Progress Bar) 사용법

Flutter에서 ProgressIndicator 위젯은 작업의 진행 상태를 사용자에게 시각적으로 표시하는 데 사용됩니다. 프로그래스 바는 주로 작업이 얼마나 진행되었는지, 또는 작업이 진행 중임을 나타내는 데 유용합니다. Flutter에서는 LinearProgressIndicator와 CircularProgressIndicator 두 가지 종류의 프로그래스 바를 제공합니다. 이번 글에서는 이 두 가지 프로그래스 바의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. LinearProgressIndicator 사용법

LinearProgressIndicator 위젯은 수평 막대 형태의 진행 표시기를 제공합니다. 이 위젯은 작업의 진행 상태를 직선형 바 형태로 표시합니다.

기본 사용법

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('Linear Progress Indicator Demo')),
        body: Center(
          child: LinearProgressIndicator(),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 LinearProgressIndicator를 생성합니다. 이는 무한히 애니메이션되는 인디터미네이트(indeterminate) 프로그래스 바입니다.

 

진행률 표시

작업의 진행률을 나타내려면 value 속성을 사용합니다. value는 0.0에서 1.0 사이의 값을 가집니다.

LinearProgressIndicator(
  value: 0.5, // 50% 진행률
)

 

위 코드는 진행률이 50%인 프로그래스 바를 생성합니다.

 

색상 변경

LinearProgressIndicator의 색상을 변경하려면 color와 backgroundColor 속성을 사용합니다.

LinearProgressIndicator(
  value: 0.5,
  color: Colors.green,
  backgroundColor: Colors.grey[300],
)

 

위 코드는 진행률 바의 색상을 초록색으로, 배경색을 밝은 회색으로 설정합니다.

2. 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('Circular Progress Indicator Demo')),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 CircularProgressIndicator를 생성합니다. 이는 무한히 애니메이션되는 인디터미네이트 프로그래스 바입니다.

 

진행률 표시

작업의 진행률을 나타내려면 value 속성을 사용합니다. value는 0.0에서 1.0 사이의 값을 가집니다.

CircularProgressIndicator(
  value: 0.75, // 75% 진행률
)

 

위 코드는 진행률이 75%인 원형 프로그래스 바를 생성합니다.

 

색상 변경

CircularProgressIndicator의 색상을 변경하려면 color와 backgroundColor 속성을 사용합니다.

CircularProgressIndicator(
  value: 0.75,
  color: Colors.blue,
  backgroundColor: Colors.grey[300],
)

 

위 코드는 진행률 바의 색상을 파란색으로, 배경색을 밝은 회색으로 설정합니다.

 

반응형

 

 

3. 애니메이션을 통한 진행률 업데이트

프로그래스 바의 진행률을 애니메이션을 통해 업데이트하려면 StatefulWidget과 AnimationController를 사용합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..addListener(() {
        setState(() {});
      });
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Progress Indicator Demo')),
        body: Center(
          child: CircularProgressIndicator(
            value: _controller.value,
          ),
        ),
      ),
    );
  }
}

 

위 코드는 AnimationController를 사용하여 2초 동안 진행률을 애니메이션으로 반복해서 업데이트하는 원형 프로그래스 바를 생성합니다.

4. 사용자 정의 프로그래스 바

프로그래스 바를 사용자 정의하려면 다양한 Flutter 위젯을 조합하여 독특한 스타일의 진행 표시기를 만들 수 있습니다.

 

class CustomProgressIndicator extends StatelessWidget {
  final double progress;

  CustomProgressIndicator({required this.progress});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey[300],
          ),
        ),
        Center(
          child: Text('${(progress * 100).round()}%'),
        ),
        CircularProgressIndicator(
          value: progress,
          strokeWidth: 10,
          backgroundColor: Colors.grey[300],
        ),
      ],
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Progress Indicator Demo')),
        body: Center(
          child: CustomProgressIndicator(progress: 0.7),
        ),
      ),
    );
  }
}

 

위 코드는 사용자 정의 원형 프로그래스 바를 생성하여 진행률 텍스트를 중앙에 표시합니다.

결론

ProgressIndicator 위젯은 Flutter 애플리케이션에서 작업의 진행 상태를 시각적으로 표시하는 데 매우 유용한 도구입니다. LinearProgressIndicator와 CircularProgressIndicator를 사용하여 기본적인 프로그래스 바를 만들 수 있으며, 다양한 속성을 활용하여 스타일링하고 애니메이션을 추가할 수 있습니다. 또한, 사용자 정의 프로그래스 바를 만들어 독특한 스타일을 구현할 수도 있습니다. ProgressIndicator 위젯을 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.