[flutter] 플러터 LinearLoader의 로딩 상태 기반 UI 변경 방법

11 Dec 2023

flutter

앱을 개발하다보면 사용자에게 로딩 상태를 시각적으로 알리는 것이 중요합니다. 플러터에서는 LinearLoader를 사용하여 이를 수행할 수 있으며, 로딩 상태에 따라 UI를 변경하는 방법을 알아보겠습니다.

LinearLoader란?

LinearLoader는 플러터에서 로딩 중일 때 화면 상단이나 하단에 나타나는 진행률을 표시하는 위젯입니다. 사용자에게 로딩 진행 상태를 시각적으로 알려줄 때 유용하게 활용할 수 있습니다.

로딩 상태 기반 UI 변경 방법

로딩 상태에 따라 UI를 변경하려면 LinearLoader를 통해 로딩 상태를 감지하고, 상태에 맞게 UI를 업데이트해야 합니다. 이를 위해 상태 관리 패키지를 사용하여 로딩 상태를 관리하는 것이 일반적입니다.

아래는 예시로, Provider 패키지를 사용하여 로딩 상태를 관리하고, 상태에 따라 UI를 변경하는 코드입니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider<LoadingNotifier>(
      create: (context) => LoadingNotifier(),
      child: MyApp(),
    ),
  );
}

class LoadingNotifier with ChangeNotifier {
  bool _isLoading = false;

  bool get isLoading => _isLoading;

  void setLoading(bool loading) {
    _isLoading = loading;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('LinearLoader Example'),
        ),
        body: Consumer<LoadingNotifier>(
          builder: (context, loadingNotifier, child) {
            return Stack(
              children: <Widget>[
                // Your main content here
                child,
                if (loadingNotifier.isLoading) // Show LinearLoader if loading
                  LinearProgressIndicator(),
              ],
            );
          },
          child: YourMainContentWidget(),
        ),
      ),
    );
  }
}

class YourMainContentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Your main content widget
  }
}

위 코드에서는 Provider 패키지로 LoadingNotifier를 만들어 로딩 상태를 관리하고, LinearLoader를 표시하는 방법을 보여줍니다. 이렇게 상태 관리 패키지를 사용하면 더 많은 기능과 로딩 상태 변화에 대한 처리를 쉽게 할 수 있습니다.

위 예시는 Provider 패키지를 사용한 방법이므로, 또 다른 상태 관리 패키지를 사용하는 경우에는 해당 패키지의 문서를 참고하여 적절한 방법으로 구현할 수 있습니다.

로딩 상태에 따라 UI를 변경하는 것은 사용자 경험에 중요한 부분이므로, 적절한 방법으로 이를 구현하여 앱의 품질을 향상시킬 수 있습니다.

이상으로, 플러터에서 LinearLoader의 로딩 상태를 기반으로 UI를 변경하는 방법에 대해 알아보았습니다. 만약 추가적인 내용이 필요하다면, 관련 문서를 참고하시기 바랍니다.

LinearLoader란?

로딩 상태 기반 UI 변경 방법

참고 자료