플러터(Flutter) 상태관리 GetX

Flutter앱 (또는 웹) 에서 state를 관리하는 방법은 몇가지가 있지만 내가 현재 하고 있는 프로젝트에서는 GetX를 사용하여 상태관리를 하기때문에 GetX에 관해서 다뤄 보려한다. 

flutter에서 기본으로 사용하는 Provider에 대해서도 알고있어야 사용하는데에 좀더 편리할 것 같다. 

모든 설명은 아래 링크에 있다.

GitHub - jonataslaw/getx: Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies eas

0. State 란?

우선 State란 개념을 알고있어야 한다. 

State는 간단하게 말하면 앱에서 사용되는 데이터들 이라고 보면된다.

app 전반적으로 사용되는 state(APP State)와 widget에서 사용되는 state(Ephermeral State)로 나눌 수 있다고 하지만 strict 하지 않고, 개발하기 나름!

 

State 에 대한 대략적인 의미를 봤으니 Flutter에서 꼭 알아야하는 StatelessWidget 과 StatefulWidget을 알아보자

1. StatelessWidget
   이름에서 알 수 있듯 state 에 대한 정보 없이 보여지는 Widget이라고 보면된다.
   앱에 대한 정보 화면, 단순 Text화면 등이 이에 해당 
   State의 변경 유무에 관계없이 같은 화면만 보여줄거면 해당 class를 상속하여 만들면된다. 
2. StatefulWidget
   State가 변경될 경우 해당 widget을 다시 그려서 반영하는 위젯이다. 
   게임에서 점수 화면과 같이 계속 업데이트 해줘야 하는 부분
   State의 변경에 따라 다시 그려주는 부분

하지만! GetX를 사용하기때문에 statefulWidget을 사용하지 않아도 된다. 그래서 혼용을 일으킬 수 있는 부분이 줄어든 기분?(기분만?)

1. GetX 개요

GetX는 Flutter를 위한 state 관리 라이브러리이다. 

• 성능 : 성능향상을 위해 최소한의 리소스 소비
• 생산성 : 쉽고 친숙한 구문사용
• 조직화 : 화면, 프레젠테이션 로직, 비즈니스 로직, 종속성 주입, 네비게이션을 분리 할 수 있다. 
               프레젠테이션(보여지는부분) 과 비즈니스(데이터 처리) 로직에 대한 분리

2.  GetX 사용

New Flutter project 로 생성된 기본 프로젝트 counting app을 변경해보겠다.

• pubspec.yaml 파일에 Get 추가
  

  dependencie:
  	get:

• 사용할 파일에 Import get
  

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

• main.dart 의 MatrerialApp을 GetMaterialApp으로 변경한다.
  

  void main() => runApp(GetMaterialApp(home: Home()));

• 비즈니스 로직 클래스를 만들고 컨트롤러를 포함시킴
  '.obs'를 포함 시킴으로서 obserbable 로 만들수있음
  

  class Controller extends GetxController{
    var count = 0.obs;
    increment() => count++;
  }​

• StatelessWidget으로 view를 만들고, Get을 이용하여 route 관리, state 관리 가능하다. 

• class Home extends StatelessWidget {
  
    @override
    Widget build(context) {
  
      // Get.put()을 사용하여 클래스를 인스턴스화하여 모든 "child'에서 사용가능하게 합니다.
      final Controller c = Get.put(Controller());
      
      return Scaffold(
        // count가 변경 될 때마다 Obx(()=> 를 사용하여 Text()에 업데이트합니다.
        appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),
  
        // 8줄의 Navigator.push를 간단한 Get.to()로 변경합니다. context는 필요없습니다.
        body: Center(child: ElevatedButton(
                child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
        floatingActionButton:
            FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
    }
  }
  
  class Other extends StatelessWidget {
    // 다른 페이지에서 사용되는 컨트롤러를 Get으로 찾아서 redirect 할 수 있습니다.
    final Controller c = Get.find();
  
    @override
    Widget build(context){
       // 업데이트된 count 변수에 연결
       return Scaffold(body: Center(child: Text("${c.count}")));
    }
  }

   

간단하게만 알아보았고 실제 개발을 하며 사용한 Get의 용법을 다음에 다루도록 하겠다.