Flutter 원형 프로그레스(circular progress bar)

안녕하세요.

이번 포스팅에서는 flutter app 내에서 로딩 중인 상태를 보여줄 수 있는 방법 중 하나인 원형 프로그레스 바를 구현해 보겠습니다.

 

언어: dart

IDE: Android Studio

Framework: Flutter

Test device: Android

 

이전에 진행했던 코드를 사용해 예제를 구현해 보겠습니다. 아래 링크를 참고해 주세요.

https://it-of-fortune.tistory.com/46

Flutter 앱에서 delay 구현하기

 

우선 기본 상태의 소스입니다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: LoadingExample(),
  ));
}

class LoadingExample extends StatefulWidget {
  @override
  _LoadingExampleState createState() => _LoadingExampleState();
}

class _LoadingExampleState extends State<LoadingExample> {
  bool _showMessage = false;

  void _setMessageVisibility() async {
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _showMessage = !_showMessage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Delay Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _setMessageVisibility,
              child: Text('Show message'),
            ),
            SizedBox(height: 20),
            if (_showMessage)
              Text(
                'Hello World',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

 

delay 시간 동안 circular progress bar가 나타나도록 구현하려 합니다.

 

여기에 변수 하나를 추가해 주겠습니다.

main.dart/_LoadingExampleState

bool _isLoading = false;

 

_setMessageVisibility 내에 setState 코드를 아래와 같이 추가해 줍니다.

main.dart

void _setMessageVisibility() async {
  setState(() {
    _isLoading = true;
  });
  await Future.delayed(Duration(seconds: 3));
  setState(() {
    _isLoading = false;
    _showMessage = !_showMessage;
  });
}

 

처음 _setMessageVisibility가 호출되면 _isLoading에 true 값을 주고, 이후 delay가 끝나면 다시 false를 넣어줍니다.

이 _isLoading값을 사용하여 circular progress bar의 visibility를 제어해 보겠습니다.

 

Text widget 위에 CircularProgressIndicator widget을 아래와 같이 추가합니다.

main.dart

if (_isLoading)
  CircularProgressIndicator(),
if (_showMessage)
  Text(
    'Hello World',
    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),

_isLoading의 값에 따라 circular progress bar가 나타났다가 사라지게 됩니다.

 

가상 기기에서 테스트해 보겠습니다.

first result

정상적으로 동작하는 것을 확인할 수 있습니다.

 

아래와 같이 여러 속성을 사용해 CircularProgressIndicator의 커스텀도 가능합니다.

const CircularProgressIndicator({
  super.key,
  super.value,
  super.backgroundColor,
  super.color,
  super.valueColor,
  this.strokeWidth = 4.0,
  this.strokeAlign = strokeAlignCenter,
  super.semanticsLabel,
  super.semanticsValue,
  this.strokeCap,
}) : _indicatorType = _ActivityIndicatorType.material;

이 중, backgroundColor, color, strokeWidth를 사용하여 UI를 수정해 보겠습니다.

 

CircularProgressIndicator내에 아래와 같이 속성을 추가해 줍니다.

CircularProgressIndicator(
  backgroundColor: Colors.blue,
  color: Colors.black,
  strokeWidth: 2.0,
),

 

아래는 전체 소스입니다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: LoadingExample(),
  ));
}

class LoadingExample extends StatefulWidget {
  @override
  _LoadingExampleState createState() => _LoadingExampleState();
}

class _LoadingExampleState extends State<LoadingExample> {
  bool _showMessage = false;
  bool _isLoading = false;

  void _setMessageVisibility() async {
    setState(() {
      _isLoading = true;
    });
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _isLoading = false;
      _showMessage = !_showMessage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Delay Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _setMessageVisibility,
              child: Text('Show message'),
            ),
            SizedBox(height: 20),
            if (_isLoading)
              CircularProgressIndicator(
                backgroundColor: Colors.blue,
                color: Colors.black,
                strokeWidth: 2.0,
              ),
            if (_showMessage)
              Text(
                'Hello World',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

 

결과를 확인해 보겠습니다.

result2

속성에 맞게 UI가 수정되었습니다.

 

이상 포스팅을 마치겠습니다.

 

감사합니다.