Flutter Http - 온더테크

Contents

http 패키지 사용법

Flutter에서 http 패키지를 사용하면 간단하고 효율적으로 HTTP 요청을 보낼 수 있습니다. 이 패키지는 GET, POST, PUT, DELETE 등의 요청을 지원하며, JSON 데이터를 주고받는 데 유용합니다. 다음은 http 패키지를 사용하여 HTTP 요청을 보내는 방법을 설명합니다.

1. `http` 패키지 설치

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

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Fetching 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 {
      setState(() {
        data = "Failed to load data";
      });
    }
  }

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Waiting for response...";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HTTP POST Example')),
      body: Center(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(data),
          ElevatedButton(
            onPressed: sendData,
            child: Text('Send 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 = "Success: ${response.body}";
      });
    } else {
      setState(() {
        data = "Failed to post data";
      });
    }
  }
}

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

4. JSON 데이터 파싱

Flutter에서 HTTP 요청의 응답으로 JSON 데이터를 받는 경우, dart:convert 패키지를 사용하여 JSON 데이터를 파싱할 수 있습니다.

import 'dart:convert';

void parseJson(String responseBody) {
  final parsed = json.decode(responseBody);
  // parsed 데이터를 사용하여 필요한 작업 수행
}

5. HTTP 패키지의 주요 기능

헤더 설정: 요청에 필요한 헤더를 설정할 수 있습니다.
쿼리 매개변수 추가: URL에 쿼리 매개변수를 추가할 수 있습니다.
타임아웃 설정: 요청의 타임아웃을 설정할 수 있습니다.

6. 전체 예제

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Fetching 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 {
      setState(() {
        data = "Failed to load data";
      });
    }
  }

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

이와 같은 방법으로 Flutter의 http 패키지를 사용하여 HTTP 요청을 보내고 데이터를 처리할 수 있습니다. 다양한 HTTP 요청과 에러 처리, JSON 데이터 파싱 등을 연습하여 더 복잡한 애플리케이션을 개발할 수 있습니다.

Post Views: 302

1. http 패키지 설치