반응형
dio
- Dart/Flutter용 HTTP 클라이언트 패키지
- 헤더 설정, 인터셉터, 파일 업로드 및 다운로드, 쿠키 관리 등 지원
- 비동기 작업을 위해 async/await 문법과 함께 사용 가능
- 간단하고 직관적인 API 제공, 손쉽게 HTTP 요청, 생성, 응답 처리 할 수 있도록 함
구문
import 'package:dio/dio.dart';
final dio = Dio();
void getHttp() async {
final response = await dio.get('https://dart.dev');
print(response);
}프로젝트 의존성 추가
- 터미널에서 아래의 명령어 입력
- dio 패키지 설치
flutter pub add dio프로젝트 기본 UI 설계
- UI
- 버튼을 누르면 버튼 아래의 텍스트가 API 요청 결과로 변경
- 코드
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: MyWidget(),
),
);
}
// API 요청 결과를 반영할 상태 변경 위젯
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
// dio 패키지를 통해 API 통신 결과를 저장할 변수
dynamic dioResultJson = '';
String dioResultValue = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Divider(),
// dio 패키지를 통해 API 통신 수행 버튼
ElevatedButton(
onPressed: () async {
// API 요청
// API 응답 결과 반영을 위한 상태 변경
setState(() {
});
},
child: const Text('dio'),
),
const Divider(),
Text('응답 결과 : Json 타입\n $dioResultJson'),
const Divider(),
Text('특정 키의 값 호출 \n$dioResultValue'),
const Divider(),
],
),
),
),
);
}
}API 테스트를 위한 간단한 Flask 서버 구축
이 포스팅은 Flutter Dio 패키지의 사용 방법을 다루는 포스팅입니다.
Flask API 서버 구축은 아래의 포스팅을 확인해주세요.
2022.06.17 - [Programming/Rest API (Python flask)] - RESTful flask API - Hello World 출력하기 (Flask)
요청을 하면 'Hello World!'가 반환되는 API 서버 구축
- app.py
from flask import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
@app.route('/', methods=['GET'])
def hello_world() :
return { 'result' : 'Hello World!' }
if __name__ == '__main__' :
app.run()
- 실행
python app.py
- 포스트맨으로 API 작동 확인
Dio를 사용한 API 통신
- API 리퀘스트(요청) 후 리스폰스(결과)를 테스트하는 샘플 코드
- ElevatedButton 위젯의 버튼을 누르면 API 서버에서 요청 결과를 받아오도록 코드 작성
- API, DB를 이용한 작업은 비동기 프로그래밍으로 작성되어야 함 (async, await)
- 응답받은 데이터는 상태 관리를 통해 위젯을 업데이트 하여야 함 (setState)
// dio 패키지를 통해 API 통신 수행 버튼
ElevatedButton(
onPressed: () async {
// API 요청
final response = await Dio().get('http://127.0.0.1:5000/');
// API 응답 결과 반영을 위한 상태 변경
setState(() {
// 전체 값 호출
dioResultJson = response.data;
// 특정 키 값 호출 : 'result' 키의 값 호출
dioResultValue = response.data['result'];
});
},
child: const Text('dio'),
),
const Divider(),
// 응답 결과
Text('응답 결과 : Json 타입\n$dioResultJson'),
const Divider(),
// 특정 키 출력
Text('특정 키의 값 호출\n$dioResultValue'),API 요청 및 결과 확인
- 'dio' 버튼을 눌러 API 요청 진행
- API 응답 결과를 화면에 출력
전체 소스 코드
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: MyWidget(),
),
);
}
// API 요청 결과를 반영할 상태 변경 위젯
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
// dio 패키지를 통해 API 통신 결과를 저장할 변수
dynamic dioResultJson = '';
String dioResultValue = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Divider(),
// dio 패키지를 통해 API 통신 수행 버튼
ElevatedButton(
onPressed: () async {
// API 요청
final response = await Dio().get('http://127.0.0.1:5000/');
// API 응답 결과 반영을 위한 상태 변경
setState(() {
// 전체 값 호출
dioResultJson = response.data;
// 특정 키 값 호출 : 'result' 키의 값 호출
dioResultValue = response.data['result'];
});
},
child: const Text('dio'),
),
const Divider(),
Text('응답 결과 : Json 타입\n$dioResultJson'),
const Divider(),
Text('특정 키의 값 호출\n$dioResultValue'),
const Divider(),
],
),
),
),
);
}
}참고
반응형