[flutter] 플러터 get과 MVVM 패턴

26 Dec 2023

flutter

1. get 패키지 소개

get은 플러터 앱을 개발할 때 필요한 다양한 서비스들을 제공하는 패키지입니다. 상태 관리, 라우팅, 의존성 주입 등을 편리하게 제공하여 플러터 앱의 개발 생산성을 높여줍니다.

2. MVVM 패턴이란?

MVVM(MVVM)은 Model-View-ViewModel의 약자로, 어플리케이션의 코드를 각각의 역할에 맞게 분리하여 가독성과 유지보수성을 높이기 위한 디자인 패턴입니다. 모델(Model)은 데이터와 데이터 조작을 처리하고, 뷰(View)는 사용자 인터페이스를 나타내며, 뷰모델(ViewModel)은 뷰와 모델 사이의 상호작용을 관리합니다.

3. get을 이용한 MVVM 구현 방법

이제 get 패키지를 이용하여 MVVM 패턴을 구현해보겠습니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class UserController extends GetxController {
  // 사용자 데이터 모델 정의
  var user = UserModel().obs;

  // 사용자 데이터를 불러오는 함수
  void fetchUserData() async {
    var data = await fetchDataFromAPI();
    user.value = data;
  }
}

class UserView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final UserController userController = Get.put(UserController()); // Get을 이용한 의존성 주입
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Center(
        child: Obx(() => Text(userController.user.value.name)), // 상태 관찰자 옵저버
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          userController.fetchUserData(); // 사용자 데이터 불러오기
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위 예시 코드에서는 get 패키지의 GetxController를 사용하여 ViewModel을 정의하고, 사용자 프로필을 보여주는 UserView 위젯에서 Get.put을 이용한 의존성 주입과 Obx를 통한 상태 관찰을 구현하였습니다.

get 패키지를 이용하면 MVVM 패턴을 구현하는 것이 간단하고 효율적이며, 코드를 더욱 깔끔하게 관리할 수 있습니다.

마무리

이번 글에서는 플러터 앱에서 get 패키지를 이용하여 MVVM 패턴을 구현하는 방법에 대해 알아보았습니다. get 패키지를 이용하면 플러터 앱의 코드를 보다 효율적으로 관리할 수 있으며, MVVM 패턴을 간단히 적용할 수 있습니다. get 패키지를 활용하여 개발 생산성을 향상시켜보세요!

목차

1. get 패키지 소개

2. MVVM 패턴이란?

3. get을 이용한 MVVM 구현 방법

마무리