[flutter] 플러터 GET 요청에 대한 프로그레스 바를 표시하는 방법은 무엇인가요?

30 Nov 2023

flutter

플러터에서 GET 요청에 대한 프로그래스 바를 표시하려면 http 패키지와 flutter_bloc 패키지를 사용하여 상태 관리를 할 수 있습니다. 다음은 해당 방법을 보여주는 예제 코드입니다.

먼저, http 패키지를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  http: ^0.12.2
  flutter_bloc: ^6.1.1

다음으로, 해당 패키지를 import하고 GET 요청을 보내는 함수를 만듭니다.

import 'package:http/http.dart' as http;
import 'package:flutter_bloc/flutter_bloc.dart';

class MyBloc extends Bloc<Event, State> {
  MyBloc() : super(InitialState());

  Stream<State> mapEventToState(Event event) async* {
    if (event is GetDataEvent) {
      yield LoadingState();
      try {
        var response = await http.get('https://api.example.com/data');
        if (response.statusCode == 200) {
          // 데이터 처리 로직
          yield DataLoadedState();
        }
      } catch (e) {
        yield ErrorState();
      }
    }
  }
}

이제 GET 요청 전후의 상태를 표시하기 위해 프로그래스 바를 추가할 수 있습니다.

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyBloc, State>(
      builder: (context, state) {
        if (state is LoadingState) {
          return CircularProgressIndicator();
        } else if (state is DataLoadedState) {
          return Text('Data Loaded');
        } else if (state is ErrorState) {
          return Text('Error');
        } else {
          return RaisedButton(
            onPressed: () {
              context.bloc<MyBloc>().add(GetDataEvent());
            },
            child: Text('Load Data'),
          );
        }
      },
    );
  }
}

위의 코드에서 LoadingState는 GET 요청이 진행 중임을 나타내며, DataLoadedState는 GET 요청이 성공적으로 완료되었음을 나타냅니다. ErrorState는 GET 요청 중에 오류가 발생했음을 나타내며, 초기 상태일 때는 GET 요청을 시작하는 버튼이 표시됩니다.

이제 GET 요청을 수행할 때마다 프로그래스 바가 표시되고, 요청이 완료되면 해당 상태에 따라 프로그래스 바 대신 적절한 UI가 표시됩니다.

이 예제는 http 패키지와 flutter_bloc 패키지를 사용한 프로그래스 바 표시 방법을 보여주는 간단한 예시입니다. 실제 앱에서는 요구 사항에 따라 더 복잡한 상태 관리를 구현해야 할 수도 있습니다.

참고자료:

http 패키지 예제: https://pub.dev/packages/http
flutter_bloc 패키지 예제: https://pub.dev/packages/flutter_bloc