Flutter에서 HTTP 요청 보내기

Flutter에서 HTTP 요청을 보내는 것은 외부 API와 통신하거나 서버로부터 데이터를 가져오는 중요한 작업입니다. Flutter는 이러한 작업을 쉽게 수행할 수 있도록 다양한 패키지를 제공합니다. 이번 글에서는 Flutter에서 http 패키지를 사용하여 HTTP 요청을 보내고, 응답을 처리하는 방법에 대해 자세히 살펴보겠습니다.

1. HTTP 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

 

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

2. HTTP 요청 보내기

HTTP 요청을 보내기 위해 http 패키지를 사용합니다. 주요 HTTP 메서드로는 GET, POST, PUT, DELETE 등이 있으며, 각각의 메서드를 사용하여 다양한 요청을 보낼 수 있습니다.

 

GET 요청 보내기

GET 요청은 서버로부터 데이터를 가져오는 데 사용됩니다. 예를 들어, 특정 API에서 데이터를 가져오는 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: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> {
  String data = "Loading...";

  @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 {
      setState(() {
        data = "Failed to load data";
      });
    }
  }

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

 

위 코드는 http.get 메서드를 사용하여 GET 요청을 보내고, 응답을 처리하여 화면에 데이터를 표시하는 예제입니다. json.decode를 사용하여 JSON 응답을 디코딩하고, 상태를 업데이트합니다.

 

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: PostScreen(),
    );
  }
}

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

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

  Future<void> sendData(String data) 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': data,
      }),
    );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HTTP 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),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

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

 

 

반응형

 

 

3. 에러 처리

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 {
      setState(() {
        data = "Failed to load data";
      });
    }
  } catch (e) {
    setState(() {
      data = "An error occurred: $e";
    });
  }
}

 

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

결론

Flutter에서 HTTP 요청을 보내는 것은 외부 API와 통신하거나 서버로부터 데이터를 가져오는 중요한 작업입니다. http 패키지를 사용하면 GET, POST, PUT, DELETE 등의 다양한 HTTP 요청을 쉽게 보낼 수 있으며, 이를 통해 데이터를 주고받을 수 있습니다. HTTP 요청 시 발생할 수 있는 에러를 적절히 처리하여 사용자에게 알리는 것도 중요합니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 효율적으로 HTTP 요청을 처리해보세요.