Flutter의 Dio 라이브러리 사용법

Flutter에서 HTTP 요청을 보내는 것은 외부 API와 통신하거나 서버로부터 데이터를 가져오는 중요한 작업입니다. 다양한 HTTP 클라이언트 라이브러리 중 Dio는 강력하고 유연한 HTTP 클라이언트로, 간단한 요청부터 복잡한 요청까지 쉽게 처리할 수 있습니다. 이번 글에서는 Flutter에서 Dio 라이브러리를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Dio 라이브러리 설치

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

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Dio 기본 사용법

Dio를 사용하여 GET 및 POST 요청을 보내는 방법을 살펴보겠습니다.

GET 요청 보내기

GET 요청은 서버로부터 데이터를 가져오는 데 사용됩니다. 예를 들어, 특정 API에서 데이터를 가져오는 GET 요청을 구현해보겠습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String data = "Loading...";
  final Dio _dio = Dio();

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

  Future<void> fetchData() async {
    try {
      final response = await _dio.get('https://jsonplaceholder.typicode.com/posts/1');
      setState(() {
        data = response.data['title'];
      });
    } catch (e) {
      setState(() {
        data = "Failed to load data: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dio GET Request')),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

 

위 코드는 Dio의 get 메서드를 사용하여 GET 요청을 보내고, 응답을 처리하여 화면에 데이터를 표시하는 예제입니다. response.data를 사용하여 JSON 응답을 쉽게 다룰 수 있습니다.

 

 

반응형

 

 

POST 요청 보내기

POST 요청은 서버에 데이터를 보내는 데 사용됩니다. 예를 들어, 폼 데이터를 서버에 보내는 POST 요청을 구현해보겠습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PostScreen(),
    );
  }
}

class PostScreen extends StatefulWidget {
  @override
  _PostScreenState createState() => _PostScreenState();
}

class _PostScreenState extends State<PostScreen> {
  final TextEditingController _controller = TextEditingController();
  String responseMessage = "";
  final Dio _dio = Dio();

  Future<void> sendData(String data) async {
    try {
      final response = await _dio.post(
        'https://jsonplaceholder.typicode.com/posts',
        data: {'title': data},
      );

      if (response.statusCode == 201) {
        setState(() {
          responseMessage = "Data sent successfully!";
        });
      } else {
        setState(() {
          responseMessage = "Failed to send data";
        });
      }
    } catch (e) {
      setState(() {
        responseMessage = "Failed to send data: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dio POST Request')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Enter data'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  sendData(_controller.text);
                },
                child: Text('Send Data'),
              ),
              SizedBox(height: 20),
              Text(responseMessage),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

위 코드는 Dio의 post 메서드를 사용하여 POST 요청을 보내고, 응답을 처리하여 화면에 결과를 표시하는 예제입니다. data 속성을 사용하여 데이터를 JSON 형식으로 인코딩하여 서버로 전송합니다.

3. 헤더와 쿼리 파라미터 사용하기

Dio를 사용하면 요청에 헤더와 쿼리 파라미터를 쉽게 추가할 수 있습니다.

Future<void> fetchData() async {
  try {
    final response = await _dio.get(
      'https://jsonplaceholder.typicode.com/posts',
      queryParameters: {'userId': 1},
      options: Options(
        headers: {'Authorization': 'Bearer YOUR_TOKEN'},
      ),
    );
    setState(() {
      data = response.data[0]['title'];
    });
  } catch (e) {
    setState(() {
      data = "Failed to load data: $e";
    });
  }
}

 

위 코드는 queryParameters와 options.headers를 사용하여 GET 요청에 쿼리 파라미터와 헤더를 추가하는 예제입니다.

4. 에러 처리

HTTP 요청을 보낼 때 발생할 수 있는 다양한 에러를 처리하는 것이 중요합니다. Dio에서는 DioError를 통해 에러를 처리할 수 있습니다.

Future<void> fetchData() async {
  try {
    final response = await _dio.get('https://jsonplaceholder.typicode.com/posts/1');
    setState(() {
      data = response.data['title'];
    });
  } on DioError catch (e) {
    if (e.response != null) {
      setState(() {
        data = "Failed to load data: ${e.response?.statusCode}";
      });
    } else {
      setState(() {
        data = "Failed to load data: ${e.message}";
      });
    }
  }
}

 

위 코드는 DioError를 사용하여 네트워크 요청 시 발생할 수 있는 에러를 처리하는 예제입니다. 에러가 발생하면 적절한 메시지를 사용자에게 표시합니다.

결론

Flutter에서 HTTP 요청을 보내는 것은 외부 API와 통신하거나 서버로부터 데이터를 가져오는 중요한 작업입니다. Dio 라이브러리를 사용하면 GET, POST, PUT, DELETE 등의 다양한 HTTP 요청을 쉽게 보낼 수 있으며, 이를 통해 데이터를 주고받을 수 있습니다. 헤더와 쿼리 파라미터 추가, 에러 처리 등 다양한 기능을 제공하여 효율적으로 HTTP 요청을 처리할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 효율적으로 HTTP 요청을 처리해보세요.