[Flutter] Design Pattern - MVC, MVVM with GetX, Provider

이번에는 Getx 와 Provider 를 이용하여 MVVM 을 구현해보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

 

 

 

GetX 로 구현한 샘플입니다.

 

// mvvm_getx_controller.dart
import 'package:get/get.dart';

import '../model/model.dart';

class MVVMGetXController extends GetxController {
  late Model model;
  RxInt count = 0.obs;

  @override
  void onInit() {
    super.onInit();
    model = Model();
  }

  void incrementCounter() {
    model.incrementCounter();
// model 변수 counter 가 변경되면, 여기를 수정하면 됨 *********************************
    count(model.counter); 
  }

  void decrementCounter() {
    model.decrementCounter();
// model 변수 counter 가 변경되면, 여기를 수정하면 됨 *********************************
    count(model.counter);
  }
}


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

import 'mvvm_getx_controller.dart';

class MVVMGetXView extends GetView<MVVMGetXController> {
  const MVVMGetXView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MVVM GetX 패턴')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(
              () => Text(controller.count.toString(), style: const TextStyle(fontSize: 150)),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                      onPressed: () {
                        controller.incrementCounter();
                      },
                      child: const Text('+', style: TextStyle(fontSize: 30))),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                      onPressed: () {
                        controller.decrementCounter();
                      },
                      child: const Text('-', style: TextStyle(fontSize: 30))),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

 

 

Provider 로 구현한 샘플

 

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

import '../model/model.dart';

class MVVMProviderController extends ChangeNotifier {
  late Model _model;
  MVVMProviderController() {
    _model = Model();
  }
// model 변수 counter 가 변경되면, 여기를 수정하면 됨 *********************************
  int get count => _model.counter;

  void update() {
    notifyListeners();
  }

  void incrementCounter() {
    _model.incrementCounter();
    update();
  }

  void decrementCounter() {
    _model.decrementCounter();
    update();
  }
}


// mvvm_provider_view.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'mvvm_provider_controller.dart';

class MVVMProviderView extends StatelessWidget {
  const MVVMProviderView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MVVM Provider 패턴')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              context.watch<MVVMProviderController>().count.toString(),
              style: const TextStyle(fontSize: 150),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                      onPressed: () {
                        context.read<MVVMProviderController>().incrementCounter();
                      },
                      child: const Text('+', style: TextStyle(fontSize: 30))),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ElevatedButton(
                      onPressed: () {
                        context.read<MVVMProviderController>().decrementCounter();
                      },
                      child: const Text('-', style: TextStyle(fontSize: 30))),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

 

 

 

 

참고자료: 개발하는 남자

https://www.youtube.com/watch?v=UJQRiypV6UA&t=27s