[flutter] Dio를 사용하여 서버로 요청을 보내고 응답을 받아 화면에 표시하는 방법을 알려주세요.

11 Dec 2023

flutter

Dio는 Dart의 강력한 HTTP 클라이언트 라이브러리로, Flutter 앱에서 서버로의 요청과 응답을 처리하는 데 사용됩니다. 이 블로그에서는 Dio를 사용하여 서버로 요청을 보내고, 받은 응답을 Flutter 앱의 화면에 표시하는 방법을 알아보겠습니다.

1. Dio 라이브러리 추가하기

먼저, pubspec.yaml 파일에 Dio 라이브러리를 추가해야 합니다.

dependencies:
  dio: ^4.0.0

이후 터미널에서 flutter pub get을 실행하여 라이브러리를 다운로드합니다.

2. Dio를 사용하여 GET 요청 보내기

다음으로, Dio를 사용하여 서버로 GET 요청을 보내는 방법을 알아보겠습니다.

import 'package:dio/dio.dart';

void getFromServer() async {
  try {
    var response = await Dio().get('http://example.com/api/data');
    print(response.data);
  } catch (e) {
    print(e);
  }
}

위 코드에서는 Dio 인스턴스를 생성하고, 해당 인스턴스를 사용하여 get 메서드를 호출하여 서버로 GET 요청을 보냅니다. 성공적으로 응답을 받으면 응답 데이터를 출력합니다.

3. 받은 응답을 화면에 표시하기

마지막으로, 받은 응답을 Flutter 앱의 화면에 표시하는 방법을 살펴보겠습니다. 받은 데이터를 Stateful Widget의 build 메서드에서 화면에 표시할 수 있습니다.

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

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String responseData = '';

  @override
  void initState() {
    super.initState();
    getFromServer();
  }

  void getFromServer() async {
    try {
      var response = await Dio().get('http://example.com/api/data');
      setState(() {
        responseData = response.data.toString();
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dio 테스트')),
      body: Center(
        child: Text(responseData),
      ),
    );
  }
}

위 코드에서는 Stateful Widget을 사용하여 Dio를 통해 받은 응답 데이터를 화면에 표시하였습니다.

이제 Dio를 사용하여 서버로 요청을 보내고, 받은 응답을 Flutter 앱의 화면에 표시할 수 있는 방법을 알아보았습니다. Dio는 다양한 HTTP 요청을 보내고, 응답을 처리할 수 있는 강력한 도구이므로, Flutter 개발에서 유용하게 활용될 수 있습니다.

목차

1. Dio 라이브러리 추가하기

2. Dio를 사용하여 GET 요청 보내기

3. 받은 응답을 화면에 표시하기

참고 자료