[flutter] 플러터 LinearLoader의 로딩 진행 상태에 따른 UI 갱신 방법

11 Dec 2023

flutter

플러터 앱을 개발할 때, 사용자에게 작업의 진행 상태를 보여주는 LinearLoader가 많이 사용됩니다. 이 블로그에서는 LinearLoader의 로딩 진행 상태에 따라 UI를 갱신하는 방법에 대해 설명하겠습니다.

LinearLoader란?

LinearLoader는 앱 내에서 어떤 작업이 진행 중인지를 보여주는 UI 요소입니다. 이 요소는 진행 바(progress bar) 형태로 사용자에게 현재 작업의 진척 상황을 시각적으로 보여줍니다.

로딩 진행 상태에 따른 UI 갱신 방법

로딩 진행 상태에 따라 LinearLoader의 UI를 갱신하는 방법은 간단합니다. 플러터에서는 setState 메서드를 활용하여 UI를 다시 그릴 수 있습니다. 아래는 예시 코드입니다.

import 'package:flutter/material.dart';

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  bool _isLoading = false;

  // 예시: 가상의 비동기 작업을 수행하는 메서드
  void fetchData() async {
    setState(() {
      _isLoading = true; // 로딩 시작
    });

    // 비동기 작업 수행
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _isLoading = false; // 로딩 종료
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isLoading
            ? CircularProgressIndicator() // 로딩 중이면 CircularLoader 표시
            : Text('로딩 완료'), // 로딩 완료 시 UI
      ),
    );
  }
}

위 예시 코드에서는 _isLoading이라는 상태를 활용하여 로딩 진행 상태를 관리하고, setState를 통해 상태가 변경될 때마다 UI를 갱신하고 있습니다.

결론

플러터에서의 LinearLoader를 효과적으로 활용하기 위해서는 상태 관리와 setState 메서드 활용이 중요합니다. 이를 통해 로딩 진행 상태에 따라 UI를 갱신할 수 있습니다.