[flutter] 플러터 get과 API 연동

26 Dec 2023

flutter

소개

플러터 앱을 개발하다 보면 서버에서 데이터를 가져와야 하는 경우가 많습니다. 이를 위해 Get 패키지를 사용하여 간단하게 API와 연동하는 방법을 알아보겠습니다.

Get 패키지란?

Get은 간편하게 상태 관리를 할 수 있는 상태 관리 라이브러리입니다. 이 라이브러리를 사용하여 API와 연동할 때 HTTP 요청 및 JSON 데이터 처리 등을 편리하게 처리할 수 있습니다.

Get 패키지 설치

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

dependencies:
  get: ^4.3.8

그리고 다음 명령어를 사용하여 패키지를 설치합니다.

flutter pub get

API와의 연동

예를 들어, 특정 API에서 데이터를 가져와야 하는 경우, Get 패키지의 http 모듈을 사용하여 HTTP 요청을 보냅니다. 예제 코드는 아래와 같습니다.

import 'package:get/get.dart';
import 'package:http/http.dart' as http;

class ApiController extends GetxController {
  var data = {}.obs;

  void fetchData() async {
    var url = Uri.parse('https://api.example.com/data');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      data.value = response.body;
    } else {
      data.value = {};
    }
  }
}

위 코드에서 fetchData 메서드는 API에서 데이터를 가져오는 역할을 합니다. 가져온 데이터는 data 변수에 저장됩니다.

데이터 화면에 표시

가져온 데이터를 화면에 표시하기 위해서는 GetX나 Obx와 같은 Get 패키지의 상태 관리 기능을 이용하여 화면을 업데이트할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:your_app/controller/api_controller.dart';

class DataScreen extends StatelessWidget {
  final ApiController apiController = Get.put(ApiController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Screen'),
      ),
      body: Center(
        child: Obx(
          () => apiController.data.isEmpty
              ? CircularProgressIndicator()
              : Text(apiController.data.toString()),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          apiController.fetchData();
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위 코드에서 Obx 위젯을 사용하여 apiController의 상태가 변경될 때마다 화면이 자동으로 업데이트됩니다.

이렇게 Get 패키지를 사용하여 API와의 연동을 간편하게 처리할 수 있습니다.

더 많은 정보는 Get 패키지 공식 문서를 참고하시기 바랍니다.