[flutter][Getx] GetX pattern 겟✊-하기 (구조)

플러터 프로젝트에 GetX를 도입하기 전, GetX에 대해 알아봅시다!

GetX 패턴에 대해 공식 레포에서 다음의 형태로 문서화 되어 있습니다. 이 내용을 바탕으로 블로그 글을 작성하였습니다.

- GetX github.io
- medium

- medium2

---

GetX Pattern

- 
- 상태관리, 종속성 주입 및 route 관리 제공
- validation, media query, theme, languatge 등 기본 제공

구조

** 공통

[data]

1. model
: API를 통해 객체 또는 Json을 생성 할 때 쓰이는 class

2. repository (또는 service)
: entity에 해당, 단일 데이터에 접근하는 레이어 

3. provider (obs)
: http 요청 또는 데이터베이스의 persistence를 만드는데 사용

 

1. 패키지 방식
- 간단하게, Routes / UI / Controller / Data 로 패키지를 구성하여 상태 관리

2. 모듈 방식 (큰 규모인 경우 추천)
- 각 화면을 기준으로 모듈로 분리
- 모듈은, bindings / controller / view으로 구성

1) bindings 
 - 종속성 주입을 분리하는 클래스
 - 상태관리자와 함께 라우팅됨 

class Binding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<Controller>(
      () => Controller(),
    );
  }
}

2) controller
 - 모든 비즈니스 로직이 들어가는 부분 
 - obs 변수 생성하는 곳
 - 모든 컨트롤러는 하나의 저장소가 있어야 함

class Controller extends GetxController {
	
  @override
  void onInit() { // called immediately after the widget is allocated memory
    fetchApi();
    super.onInit();
  }

  @override
  void onReady() { // called after the widget is rendered on screen
    showIntroDialog();
    super.onReady();
  }

  @override
  void onClose() { // called just before the Controller is deleted from memory
    closeStream();
    super.onClose();
  }

}

 

 

3) view 
 - widget 등 UI 부분

class View extends GetView<Controller> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HomeView'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          'HomeView is working',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}