플러터 GetX에서 HTTP 요청 설정 완벽 가이드

플러터 GetX에서 HTTP 요청 설정 완벽 가이드

2024. 6. 7. 21:00ㆍFlutter/Flutter Programming

플러터(Flutter)에서 GetX를 사용하여 HTTP 요청을 설정하고 데이터를 처리하는 방법을 알아보겠습니다. 이 가이드는 GetX의 상태 관리, 의존성 주입, 그리고 http 패키지를 활용하여 HTTP 요청을 효율적으로 처리하는 방법을 다룹니다.

1. 프로젝트 설정

1.1. 새로운 플러터 프로젝트 생성

먼저 새로운 플러터 프로젝트를 생성합니다

flutter create http_app
cd http_app

1.2. pubspec.yaml 파일 업데이트

프로젝트의 pubspec.yaml 파일에 GetX와 http 패키지를 추가합니다

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  http: ^0.13.4

그런 다음 패키지를 설치합니다

flutter pub get

2. HTTP 클라이언트 설정

2.1. 서비스 클래스 생성

HTTP 요청을 처리할 서비스를 생성합니다. lib/services/api_service.dart 파일을 생성하고 다음과 같이 작성합니다

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

class ApiService {
  final String baseUrl;

  ApiService({required this.baseUrl});

  Future<Map<String, dynamic>> getRequest(String endpoint) async {
    final response = await http.get(Uri.parse('$baseUrl$endpoint'));

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }

  Future<Map<String, dynamic>> postRequest(String endpoint, Map<String, dynamic> data) async {
    final response = await http.post(
      Uri.parse('$baseUrl$endpoint'),
      headers: {"Content-Type": "application/json"},
      body: json.encode(data),
    );

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to post data');
    }
  }
}

3. GetX 컨트롤러 설정

3.1. 컨트롤러 생성

API 요청을 처리할 GetX 컨트롤러를 생성합니다. lib/controllers/data_controller.dart 파일을 생성하고 다음과 같이 작성합니다

import 'package:get/get.dart';
import '../services/api_service.dart';

class DataController extends GetxController {
  final ApiService apiService;

  var data = {}.obs;
  var isLoading = false.obs;

  DataController({required this.apiService});

  void fetchData(String endpoint) async {
    isLoading.value = true;
    try {
      final result = await apiService.getRequest(endpoint);
      data.value = result;
    } catch (e) {
      Get.snackbar('Error', e.toString());
    } finally {
      isLoading.value = false;
    }
  }
}

4. UI와 컨트롤러 연결

4.1. HomeScreen 작성

이제 HomeScreen에서 DataController를 사용하여 API 요청을 처리하고 데이터를 표시합니다. lib/main.dart 파일을 다음과 같이 작성합니다

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controllers/data_controller.dart';
import 'services/api_service.dart';

void main() {
  final ApiService apiService = ApiService(baseUrl: 'https://jsonplaceholder.typicode.com/');
  Get.put(DataController(apiService: apiService));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'HTTP App',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final DataController dataController = Get.find<DataController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                dataController.fetchData('/posts/1');
              },
              child: Text('Fetch Data'),
            ),
            Obx(() {
              if (dataController.isLoading.value) {
                return CircularProgressIndicator();
              } else if (dataController.data.isNotEmpty) {
                return Text('Title: ${dataController.data['title']}');
              } else {
                return Text('No data');
              }
            }),
          ],
        ),
      ),
    );
  }
}

5. HTTP POST 요청 추가

5.1. 데이터 전송 메서드 추가

DataController에 POST 요청을 보내는 메서드를 추가합니다

import 'package:get/get.dart';
import '../services/api_service.dart';

class DataController extends GetxController {
  final ApiService apiService;

  var data = {}.obs;
  var isLoading = false.obs;

  DataController({required this.apiService});

  void fetchData(String endpoint) async {
    isLoading.value = true;
    try {
      final result = await apiService.getRequest(endpoint);
      data.value = result;
    } catch (e) {
      Get.snackbar('Error', e.toString());
    } finally {
      isLoading.value = false;
    }
  }

  void postData(String endpoint, Map<String, dynamic> data) async {
    isLoading.value = true;
    try {
      final result = await apiService.postRequest(endpoint, data);
      this.data.value = result;
    } catch (e) {
      Get.snackbar('Error', e.toString());
    } finally {
      isLoading.value = false;
    }
  }
}

5.2. UI 업데이트

POST 요청을 전송하는 버튼과 텍스트 필드를 추가하여 HomeScreen을 업데이트합니다

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controllers/data_controller.dart';
import 'services/api_service.dart';

void main() {
  final ApiService apiService = ApiService(baseUrl: 'https://jsonplaceholder.typicode.com/');
  Get.put(DataController(apiService: apiService));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'HTTP App',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final DataController dataController = Get.find<DataController>();
  final TextEditingController titleController = TextEditingController();
  final TextEditingController bodyController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP App'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  dataController.fetchData('/posts/1');
                },
                child: Text('Fetch Data'),
              ),
              Obx(() {
                if (dataController.isLoading.value) {
                  return CircularProgressIndicator();
                } else if (dataController.data.isNotEmpty) {
                  return Text('Title: ${dataController.data['title']}');
                } else {
                  return Text('No data');
                }
              }),
              SizedBox(height: 20),
              TextField(
                controller: titleController,
                decoration: InputDecoration(labelText: 'Title'),
              ),
              TextField(
                controller: bodyController,
                decoration: InputDecoration(labelText: 'Body'),
              ),
              ElevatedButton(
                onPressed: () {
                  final data = {
                    'title': titleController.text,
                    'body': bodyController.text,
                    'userId': 1,
                  };
                  dataController.postData('/posts', data);
                },
                child: Text('Post Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. 결론

이 가이드에서는 플러터와 GetX를 사용하여 HTTP 요청을 처리하는 방법을 다루었습니다.

GetX의 상태 관리와 의존성 주입을 통해 효율적으로 데이터를 관리하고 UI를 업데이트하는 방법을 소개했습니다.

이를 통해 플러터 앱에서 RESTful API와 상호작용하는 기본적인 방법을 이해할 수 있습니다.

수발가족을 위한 일기장 “나비일기장”

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

나비일기장 [수발일기장] - Google Play 앱

수형자 수발가족및 수발인을 위한 일기장으로 수형생활시기에 따른 정보를 얻을 수 있습니다.

play.google.com

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

Tester Share로 Google Play 앱 등록을 단순화하세요.