[flutter] 플러터 ProgressIndicator를 사용하여 네트워크 요청 상태를 표시하는 방법은?

20 Dec 2023

flutter

네트워크 요청을 처리할 때 사용자에게 진행 상황을 시각적으로 표시하는 것은 중요합니다. 플러터에서는 ProgressIndicator 위젯을 사용하여 이를 간단하게 구현할 수 있습니다.

1. ProgressIndicator 추가

먼저, 네트워크 요청이 시작될 때에 ProgressIndicator를 표시하기 위해 해당 위젯을 화면에 추가합니다.

import 'package:flutter/material.dart';

class YourScreen extends StatefulWidget {
  @override
  _YourScreenState createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Screen'),
      ),
      body: Center(
        child: _isLoading ? CircularProgressIndicator() : YourContentWidget(),
      ),
    );
  }
}

2. 네트워크 요청 처리

네트워크 요청을 시작하고 완료했을 때 _isLoading 상태를 바꾸어 ProgressIndicator의 표시 여부를 제어합니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class YourScreen extends StatefulWidget {
  @override
  _YourScreenState createState() => _YourScreenState();
}

class _YourScreenState extends State<YourScreen> {
  bool _isLoading = false;

  void _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final response = await http.get('https://api.example.com/data');
      // 네트워크 요청 완료 후 작업
    } catch (e) {
      // 에러 처리
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Screen'),
      ),
      body: Center(
        child: _isLoading ? CircularProgressIndicator() : YourContentWidget(),
      ),
    );
  }
}

결론

ProgressIndicator를 사용하여 네트워크 요청 상태를 표시하는 것은 플러터 앱의 사용자 경험을 향상시키는 데 도움이 됩니다. 네트워크 요청이 시작되었음을 사용자에게 시각적으로 알리고, 요청이 완료되면 제거하여 사용자에게 진행 상황을 분명하게 전달할 수 있습니다.

참고: 플러터 공식 문서 - ProgressIndicator