GetX (simple state manager with GetBulider 로) 만들기 1

1. simple state manager with GetBulider 로 만들기

→ provider의 consumer는 전체 범위에서 이벤트가 일어나는 것을 감시하는 느낌

→ simple state manager with GetBulider는 내가 필요한 위치에만 딱 집어서 만드는 느낌 

2. 장/단점 

장점 → provider에 비해 선언되는 변수의 양이 적어지며 코드가 간결해짐

단점 → 이벤트 업데이트시 해당 기능 함수에서 update() 메서드를 수동으로 항상 작성해 줘야 함

 

[ 메인 ]

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

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    //Controller controller = Get.put(Controller());
    return Scaffold(
      appBar: AppBar(
        title: Text('GegX'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetBuilder<Controller>(
              //init-> builder안에서 원하는 클래스를 인스턴스화 한다 Controller controller = Get.put(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'),
            ),
          ],
        ),
      ),
    );
  }
}

 

[ Controller 클래스 ]

import 'package:get/get.dart';

class Controller extends GetxController {
  int _x = 0;
  int get x => _x;

  void increment() {
    _x++;
    update(); //UI업에이트 setstate()와 같은 기능
  }
}

 

 

출처 : 코딩 쉐프 채널