728x90
반응형
안녕하세요! 오늘은 플러터(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 공식 문서를 참고하세요.
행복한 코딩 되세요!
728x90
반응형
'Flutter > Package' 카테고리의 다른 글
[GetX] 플러터 상태관리: GetX 패키지 심층 가이드 (2) | 2024.07.14 |
---|---|
Flutter에서 이메일 보내기: flutter_email_sender 패키지 가이드 (0) | 2024.07.14 |
플러터에서 graphql_flutter 패키지 사용하기[API] (0) | 2024.07.13 |
플러터에서 Retrofit 패키지 사용하기 [AIP] (0) | 2024.07.13 |
플러터에서 Dio 패키지 사용하기[API] (0) | 2024.07.13 |