플러터에서 http 패키지 사용하기[API]

안녕하세요! 오늘은 플러터(Flutter)에서 http 패키지를 사용하여 HTTP 요청을 보내는 방법과 몇 가지 유용한 옵션에 대해 알아보겠습니다.

http 패키지는 HTTP 요청을 쉽게 할 수 있게 도와줍니다.

1. http 패키지 설치하기

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

dependencies:
  http: ^0.14.0

파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행해 패키지를 설치합니다.

2. 기본 사용법

http 패키지를 사용하여 간단한 GET 요청을 보내는 예제를 보겠습니다.

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _data = '';

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

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      setState(() {
        _data = json.decode(response.body)['title'];
      });
    } else {
      throw Exception('Failed to load data');
    }
  }

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

이 코드는 http.get 메서드를 사용하여 HTTP GET 요청을 보내고, 응답 데이터에서 title을 추출하여 화면에 표시합니다.

3. POST 요청 보내기

POST 요청도 매우 간단합니다. 다음은 POST 요청을 보내는 예제입니다.

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _data = '';

  Future<void> sendData() async {
    final response = await http.post(
      Uri.parse('https://jsonplaceholder.typicode.com/posts'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'title': 'foo',
        'body': 'bar',
        'userId': '1',
      }),
    );

    if (response.statusCode == 201) {
      setState(() {
        _data = json.decode(response.body)['id'].toString();
      });
    } else {
      throw Exception('Failed to send data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP POST Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: sendData,
              child: Text('Send Data'),
            ),
            Text(_data),
          ],
        ),
      ),
    );
  }
}

이 코드는 http.post 메서드를 사용하여 데이터를 서버로 보내고, 서버가 생성한 id를 화면에 표시합니다.

4. 옵션 설정하기

HTTP 요청을 보낼 때 다양한 옵션을 설정할 수 있습니다.

예를 들어, 헤더와 쿼리 매개변수를 설정할 수 있습니다.

헤더 설정

final response = await http.get(
  Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
  headers: <String, String>{
    'Authorization': 'Bearer YOUR_TOKEN_HERE',
  },
);

쿼리 매개변수 설정

final response = await http.get(
  Uri.parse('https://jsonplaceholder.typicode.com/posts').replace(queryParameters: {'userId': '1'}),
);

5. 에러 처리

HTTP 요청 시 발생할 수 있는 에러를 처리하는 방법을 알아보겠습니다.

Future<void> fetchData() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      setState(() {
        _data = json.decode(response.body)['title'];
      });
    } else {
      throw Exception('Failed to load data');
    }
  } catch (e) {
    print('Error: $e');
  }
}

이 코드는 try-catch 블록을 사용하여 에러를 처리하고, 에러가 발생하면 콘솔에 에러 메시지를 출력합니다.

마무리

이렇게 해서 플러터에서 http 패키지를 사용하는 방법과 몇 가지 유용한 옵션에 대해 알아보았습니다.

http 패키지를 사용하면 네트워크 요청을 매우 간편하게 처리할 수 있습니다.

더 많은 기능과 옵션은 http 공식 문서를 참고하세요.

행복한 코딩 되세요!