[flutter] 플러터 LinearLoader의 프로그래스 표시 방법

11 Dec 2023

flutter

프로그래스 바 또는 로딩 인디케이터는 사용자에게 어떤 작업이 진행 중임을 시각적으로 보여주는 중요한 UI 요소입니다. 플러터에서는 LinearProgressIndicator 위젯을 사용하여 프로그래스 바를 만들 수 있습니다.

선형 프로그래스 바 생성

LinearProgressIndicator(
  value: 0.5, // 현재 진행률 (0.0 ~ 1.0)
  backgroundColor: Colors.grey, // 배경색
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), // 진행률 색상
)

LinearProgressIndicator 위젯을 사용하여 선형 프로그래스 바를 만들었습니다. value 속성을 사용하여 현재 진행률을 지정할 수 있으며, backgroundColor와 valueColor를 사용하여 색상을 지정할 수 있습니다.

프로그래스 바 사용 예제

다음은 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('프로그래스 바 예제'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('데이터를 불러오는 중...'),
              SizedBox(height: 20),
              LinearProgressIndicator(
                value: 0.5,
                backgroundColor: Colors.grey,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서는 LinearProgressIndicator를 사용하여 데이터를 불러오는 동안 프로그래스 바를 화면에 표시하고 있습니다.

이렇게하여, LinearProgressIndicator를 사용하여 플러터 앱에서 프로그래스 바를 만들고 활용하는 방법에 대해 알아보았습니다.

플러터 공식 문서 - LinearProgressIndicator