[Flutter] Getx with state management(reactive version)

Getx with state state management(reactive version)

get: ^4.1.4

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'getx_simple.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp( // MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    //instantiating your Getx controller
    Get.put(GetxSimpleController());

    print('------------ build ------------');
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Getx Update/Reactive'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          GetxSimple(),
          Container(height: 40,),
          GetxReactiv(),
        ]
      ),

    );
  }
}

 

getx_simple.dart - reactive 추가 부분만

 

class GetxReactiveController extends GetxController {
  RxInt count = 0.obs;

  void increment() {
    count++;
//    update(); // reactive 방식에서는 필요없음
  }

  void putNumber(int number) {
//    count = number; // reactive 방식에서는 직접 대입 불가(오류발생함)
    count(number);
//    update();       // reactive 방식에서는 필요없음
  }

  @override // reactive 시 추가설정 부분
  void onInit() { // work 를 설정할수 있음.
    // 번경시마다 동작함
    ever(count, (_) => print("매번 호출"));
    // 최초에 1회만 동작함
    once(count, (_) => print("최초 호출"));
    interval(count, (_) => print("변경되고 있는 동안 1초 간격으로 호출"),
        time: Duration(seconds: 1));
    debounce(count, (_) => print("마지막 변경에 한번만 시간차 두고 호출"),
        time: Duration(seconds: 2));
    super.onInit();
  }
}


class GetxReactiv extends StatelessWidget {

  final _getxReactiveController = Get.put(GetxReactiveController());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Getx Reactive', style: TextStyle(fontSize: 20),),
          Container(height: 10,),
          Obx((){  // reactive 시, GetBuilder 대신 Obx 사용
            print('GetBuilder(reactive) called: ${_getxReactiveController.count}');
            return Text("${_getxReactiveController.count}",
              style: TextStyle(fontSize: 15),
            );
          }),

          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("+", style: TextStyle(fontSize: 30)),
              onPressed: () {
              _getxReactiveController.increment();
              },
            ),
          ),
          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("Reset", style: TextStyle(fontSize: 30)),
              onPressed: () {
              _getxReactiveController.putNumber(0);
              },
            ),
          ),
        ],
      ),
    );
  }
}

----------------- console 출력 화면

[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
[GETX] Instance "GetxSimpleController" has been created
I/flutter (30402): ------------ build ------------
[GETX] Instance "GetxSimpleController" has been initialized
[GETX] Instance "GetxReactiveController" has been created
[GETX] Instance "GetxReactiveController" has been initialized
I/flutter (30402): GetBuilder(update) called: 0
I/flutter (30402): Obx(reactive) called: 0
I/flutter (30402): ------------ build ------------
I/flutter (30402): GetBuilder(update) called: 0
I/flutter (30402): Obx(reactive) called: 0
I/flutter (30402): GetBuilder(update) called: 1
I/flutter (30402): GetBuilder(update) called: 2
I/flutter (30402): GetBuilder(update) called: 0
I/flutter (30402): GetBuilder(update) called: 0 <== 2번째 호출된 로그 >
I/flutter (30402): 매번 호출
[GETX] Worker [once] called
I/flutter (30402): 최초 호출
I/flutter (30402): Obx(reactive) called: 1
I/flutter (30402): 변경되고 있는 동안 1초 간격으로 호출
I/flutter (30402): 매번 호출
I/flutter (30402): Obx(reactive) called: 2
I/flutter (30402): 변경되고 있는 동안 1초 간격으로 호출
I/flutter (30402): 마지막 변경에 한번만 시간차 두고 호출
I/flutter (30402): 매번 호출
I/flutter (30402): Obx(reactive) called: 0  <== 1번째 호출 후 더이상 호출되지 않음 >
I/flutter (30402): 변경되고 있는 동안 1초 간격으로 호출
I/flutter (30402): 마지막 변경에 한번만 시간차 두고 호출

 

• Reactive state management 적용하면, 변수값이 변하지 않으면 Obx 영역이 계속 호출되지 않는다.
• update 방식은 변수값이 변하지 않아도 reset을 클릭시 마다 GetBuilder 영역이 계속 호출된다.