Flutter Provider: 3. GetX - Simple State Manager

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

 

 

---

 

1. Getx 설치 및 기초 예제

 

getx는 state management를 제공하고 플러터의 문법을 훨씬 간결하게 표현해주어 인기가 많다. 설치는 getx가 아닌 get으로 명명하여 설치한다.

 

$ flutter pub add get

 

 

state management를 하는 방법을 실습해본다.

 

 

controller 클래스 생성

어떤 값을 변화시키고 그 값을 추적하기 위한 controller 클래스를 만든다. 이 controller의 변수 및 메서드를 사용하면 변화된 state 값을 계속해서 추적할 수 있게 된다.

 

GetxController를 상속한다. 그리고 _x로 변수를 선언하여 private 변수로 만들어서 변수에 대한 직접 접근은 안되도록 한다. get 이라는 메서드를 통해서만 _x에 접근이 가능하다.

 

increment 메서드에서는 _x에 1을 더한다. update()라는 메서드를 호출하는데 이것은 GetxController의 메서드로 반드시 이 update() 메서드를 호출하여야 변한 상태 값을 추적하여 업데이트해줄 수 있게 된다.

class Controller extends GetxController{

  int _x = 0;
  int get x => _x;

  void increment(){
    _x++;
    update();
  }
}

 

 

controller 불러오기

그리고 아래처럼 main 메서드에서 controller를 불러와서 버튼이 눌러질 때마다 상태값이 업데이트 되고 UI를 다시 빌드하도록 한다.

 

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Controller controller = Get.put(Controller());

    return Scaffold(
      appBar: AppBar(
        title: Text('GetX'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetBuilder<Controller>(
                builder: (_) => Text(
                    'Current value is: ${controller.x}',
                  style: TextStyle(fontSize: 20, color: Colors.red),
                )
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: (){
                  controller.increment();
                },
                child: Text('Add number')
            )
          ],
        ),
      ),
    );
  }
}

 

 

GetBuilder

GetBuilder 위젯을 통해 UI를 리빌드한다. Controller 타입을 받을 것을 제너릭으로 명시하고, builder에서는 underscore를 사용하여 따로 변수 지정은 해주지 않았다. 그리고 Text 위젯을 리턴하여 숫자가 변하는 것이 보이게 한다.

 

Button에서는 위에서 선언해주었던 controller.increment()를 호출한다. 그럼 아래처럼 counter를 구현하게 된다.

 

개선하기

 

Get.put(Controller())를 통해 Controller를 불러왔는데, 사실 GetBuilder의 init 메서드를 통해서 Controller를 불러올 수 있다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('GetX'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GetBuilder<Controller>(
            init: Controller(),
              builder: (_) => Text(
                  'Current value is: ${Get.find<Controller>().x}', //이 부분
                style: TextStyle(fontSize: 20, color: Colors.red),
              )
          ),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
              onPressed: (){
                Get.find<Controller>().increment(); //이 부분
              },
              child: Text('Add number')
          )
        ],
      ),
    ),
  );
}

 

그리고 Get.find() 메서드를 통해 제너릭인 <Controller>에 해당하는 인스턴스를 자동으로 찾아줄 수 있다. 달리 말해 의존성 주입을 해준다. 그리고 해당 인스턴스의 변수 x나 increment 메서드를 불러와서 실행시킨다. 내가 설정한 Controller 클래스의 패키지명 등을 알고 있으므로 그 클래스의 인스턴스를 그대로 불러오는 것이고, _x는 x로 불러온다.

 

다시 정리하자면 Get.put() 메서드가 클래스의 인스턴스를 의존성 주입 컨테이너에 등록하는 것이고, GetBuilder<S>는 S타입의 상태를 구독하고 update() 메서드가 호출되면 UI를 리빌드 한다. find 메서드는 값이나 메서드를 호출할 수 있도록 인스턴스를 불러온다.