Flutter & Dart 플러터에서 API 호출하기: 자세한 가이드

API 호출은 플러터 앱에서 서버와 통신하고 데이터를 주고받는 중요한 부분입니다. 이 블로그 포스트에서는 플러터에서 API를 호출하는 방법을 자세하게 설명하겠습니다.

1. 필요한 패키지 추가

API 호출을 위해 http 패키지를 사용합니다. 프로젝트의 pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^latest_version

2. API 호출 함수 작성

API 호출을 위한 함수를 작성합니다. http 패키지를 사용하여 원격 서버에 HTTP 요청을 보내고 응답을 처리합니다.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'API Call Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _data = "";

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse("https://api.example.com/data"));
    
    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      setState(() {
        _data = jsonData["key"]; // API 응답에서 원하는 데이터 추출
      });
    } else {
      throw Exception("Failed to fetch data");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('API Call Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Data from API:',
            ),
            Text(
              _data,
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchData,
        tooltip: 'Fetch Data',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

3. API 호출과 응답 처리

fetchData 함수 내에서 http.get 메서드를 사용하여 API를 호출하고, 응답을 처리합니다. API 응답은 JSON 형식으로 받아오며, json.decode 함수를 사용하여 데이터를 추출합니다.

4. 에러 처리

API 호출 시 에러가 발생할 수 있으므로, 에러 처리를 반드시 포함해야 합니다. 예를 들어, response.statusCode가 200이 아닐 경우 에러가 발생한 것으로 처리하고 적절한 예외를 던집니다.