[flutter] 플러터 LinearLoader와 네트워크 요청 처리의 관계

11 Dec 2023

flutter

플러터 앱을 개발하다 보면 네트워크 요청을 보내고 응답을 받을 때 화면에 로딩 인디케이터(로딩 바)를 표시해야 하는 경우가 많습니다. 이때 플러터의 LinearLoader 위젯을 사용하면 네트워크 요청 처리 중에 로딩 상태를 시각적으로 표시할 수 있습니다.

LinearLoader란?

LinearLoader는 플러터에서 제공하는 로딩 인디케이터 위젯으로, 화면 상단이나 하단에 가로로 표시되는 바로 이해할 수 있습니다. 이를 통해 사용자는 현재 어떤 작업이 진행 중인지 파악할 수 있습니다.

LinearLoader 사용 예시

다음은 LinearLoader를 사용하여 네트워크 요청 처리 시 로딩 상태를 표시하는 예시 코드입니다.

import 'package:flutter/material.dart';

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  bool _isLoading = false;

  Future<void> _fetchData() async {
    // 네트워크 요청을 보내기 전에 로딩 상태를 true로 변경
    setState(() {
      _isLoading = true;
    });

    // 네트워크 요청 처리
    // ...

    // 응답을 받은 후에 로딩 상태를 false로 변경
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Screen'),
      ),
      body: Stack(
        children: [
          // 여기에 내용을 표시하는 위젯 추가
          // ...

          // LinearLoader 위젯을 조건부로 표시
          if (_isLoading)
            LinearProgressIndicator(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _fetchData,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위의 예시 코드에서는 네트워크 요청을 보내기 전에 _isLoading 값을 true로 변경하여 LinearLoader를 화면에 표시하고, 응답을 받은 후에 다시 false로 변경하여 로딩 상태를 해제하고 있습니다.

이처럼 LinearLoader를 활용하여 네트워크 요청 처리 중에 사용자에게 로딩 상태를 시각적으로 제공할 수 있습니다.

결론

LinearLoader와 네트워크 요청 처리는 플러터 앱에서 자주 사용되는 기능 중 하나입니다. LinearLoader를 적절히 활용하여 사용자에게 진행 중인 작업을 시각적으로 표시함으로써 앱의 사용자 경험을 향상시킬 수 있습니다.

참고 문헌: https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html