Flutter Dio로 API 통신하는 방법 – JSON 데이터 받아와서 화면에 출력하기

Flutter로 앱을 만들다 보면 외부 서버와 데이터를 주고받는 API 통신이 필수예요.

사용자 정보를 받아오거나 게시글 목록을 불러오는 등 대부분의 앱은 외부 API와 소통하죠.

이 글에서는 Flutter에서 Dio 라이브러리를 사용해 API 통신을 구현하는 방법을 알려드릴게요.
특히 Dio를 처음 써보는 Flutter 초보자도 쉽게 따라올 수 있도록 천천히 설명할게요 😊

---

이 글에서 배울 내용

• Dio란 무엇인가?
• Flutter에 Dio 설치하는 방법
• GET 요청으로 JSON 데이터 받아오기
• 에러 핸들링 처리하기
• 받아온 데이터를 화면에 표시하기 (FutureBuilder 활용)
• 실전 예제로 Flutter Dio 통신 완벽 이해하기

---

1. Dio란 무엇인가?

Dio는 Flutter에서 가장 많이 사용되는 HTTP 통신 라이브러리예요.
공식 http 패키지보다 기능이 훨씬 많고, 다음과 같은 장점이 있어요.

• 요청(Request)과 응답(Response) 로그 쉽게 보기
• 에러 핸들링 체계적
• 요청 중 인터셉터(Interceptor) 설정 가능
• FormData, 파일 업로드 등 지원

즉, Flutter로 JSON 데이터를 주고받거나 REST API를 사용할 때 딱 좋은 도구입니다.

---

2. Dio 설치하는 방법

먼저 Flutter 프로젝트에 Dio 패키지를 설치해야 해요. pubspec.yaml 파일에 dio를 추가해주세요.

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.8.0  # 작성일 기준 최신 버전

설치 후에는 터미널에서 아래 명령어를 실행하세요:

flutter pub get

dio를 pubspec.yaml에 추가한 모습

이제 Dio를 사용할 준비 완료! 👏

---

3. Flutter Dio로 API GET 요청 보내기

이제 실전 예제로 넘어가 볼게요. JSONPlaceholder라는 무료 API 서버에서 사용자 정보를 받아와 보겠습니다.

1. Dio 인스턴스 생성 & API 요청

import 'package:dio/dio.dart';

class ApiService {
  final Dio _dio = Dio(BaseOptions(headers: {'Accept': 'application/json'}));

  Future<List<dynamic>> fetchUsers() async {
    try {
      final response = await _dio.get(
        'https://jsonplaceholder.typicode.com/users',
      );
      return response.data;
    } catch (e) {
      throw Exception('API 요청 중 오류 발생: $e');
    }
  }
}

 

코드 설명

• Dio()를 통해 인스턴스를 만들고
• .get() 메서드로 HTTP GET 요청을 보냅니다.
• 응답 결과는 response.data에 들어 있어요.

 

---

4. Flutter 화면에 데이터 출력하기 – FutureBuilder 사용

이제 받아온 데이터를 화면에 보여줘야겠죠?
Flutter에서는 비동기 데이터를 처리할 때 FutureBuilder 위젯을 자주 사용해요.

사용자 리스트 UI 만들기

import 'package:flutter/material.dart';
import 'api_service.dart'; // 위에 만든 ApiService import

class UserListPage extends StatelessWidget {
  final ApiService apiService = ApiService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Dio API 예제')),
      body: FutureBuilder<List<dynamic>>(
        future: apiService.fetchUsers(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('에러 발생: ${snapshot.error}'));
          }

          final users = snapshot.data!;
          return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              final user = users[index];
              return ListTile(
                title: Text(user['name']),
                subtitle: Text(user['email']),
              );
            },
          );
        },
      ),
    );
  }
}

 

코드 설명

• FutureBuilder로 비동기 데이터를 기다린 후 화면에 출력해요.
• 사용자 이름과 이메일을 리스트로 보여주는 간단한 UI입니다.

실제로 코드를 실행 완료한 모습

 

---

5. Dio 에러 핸들링 기본

Dio는 에러를 세분화해서 잡을 수 있어요. 예를 들어:

try {
  final response = await dio.get(url);
} on DioException catch (e) {
  if (e.type == DioExceptionType.connectionTimeout) {
    print('연결 시간 초과');
  } else if (e.type == DioExceptionType.badResponse) {
    print('잘못된 응답: ${e.response?.statusCode}');
  } else {
    print('기타 오류: $e');
  }
}

실제 앱에서는 사용자에게 적절한 메시지를 보여주는 UX도 중요하답니다!

전체 api_service.dart 코드로 보면 다음과 같아요.

DioException을 처리해준 모습

---

6.  요약 정리

• Dio는 Flutter에서 가장 인기 있는 HTTP 통신 라이브러리입니다.
• 설치 후 .get(), .post() 메서드로 쉽게 요청을 보낼 수 있습니다.
• 에러 처리가 체계적이고 로그도 보기 쉽습니다.
• FutureBuilder와 함께 쓰면 데이터를 화면에 자연스럽게 표시할 수 있어요.

---

마무리하며 – Dio, 생각보다 쉬웠죠?

처음엔 Flutter에서 API 통신이라고 하면 어렵고 복잡하게 느껴질 수 있어요.
하지만 오늘 같이 Dio를 활용해서 하나하나 따라해보면, 생각보다 쉽게 외부 데이터를 불러오고

앱 화면에 보여줄 수 있다는 걸 알 수 있죠 😊

 

Dio는 단순히 데이터를 불러오는 것뿐만 아니라, 에러 처리, 인증, 파일 업로드, 요청 로그 출력 등

다양한 기능도 함께 제공해서 실제 서비스 앱 개발에서도 정말 유용해요.

 

앞으로 앱에 사용자 로그인 기능을 넣거나, 게시글 업로드 기능을 만들 때도 꼭 Dio가 필요할 거예요.
이번 글을 통해 Dio의 기본기를 탄탄히 익혔다면, 이제 다음 단계로도 얼마든지 나아갈 수 있답니다!

궁금한 점이나 더 다뤄줬으면 하는 주제가 있다면 언제든지 댓글로 남겨주세요. 함께 성장하는 Flutter 개발자가 되어봐요 🚀