[Flutter] Getx with state management(update version)

Getx with state management(update version, not reactive)

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
    // build 위젯 내에서 호출해야 함
    Get.put(GetxSimpleController());

    print('------------ build ------------');
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Getx Simple'),
      ),
      body: Center(
        child: GetxSimple(), // 'getx_simple.dart'
      ),

    );
  }
}

 

getx_simple.dart

 

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

class GetxSimpleController extends GetxController {
  int count = 0;

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

  void putNumber(int number) {
    count = number;
    update(); // update 호출시, GetBuilder 영역이 호출됨
  }

}

class GetxSimple extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Getx Simple', style: TextStyle(fontSize: 20),),
          Container(height: 10,),
          GetBuilder<GetxSimpleController>(
            builder: (controller) {
              print('GetBuilder called: ${controller.count}');
              return Text("${controller.count}",
                style: TextStyle(fontSize: 15),
              );
            },
          ),
          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("+", style: TextStyle(fontSize: 30)),
              onPressed: () {
                Get.find<GetxSimpleController>().increment();
              },
            ),
          ),
          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("Reset", style: TextStyle(fontSize: 30)),
              onPressed: () {
                Get.find<GetxSimpleController>().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
I/flutter (30402): GetBuilder called: 0
I/flutter (30402): ------------ build ------------
I/flutter (30402): GetBuilder called: 0
I/flutter (30402): GetBuilder called: 1
I/flutter (30402): GetBuilder called: 2
I/flutter (30402): GetBuilder called: 3
I/flutter (30402): GetBuilder called: 0
I/flutter (30402): GetBuilder called: 0

 

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

 

클릭시 1씩증가, 리셋은 0 으로 초기화

 

 

 

 

 

getxSimpleController 선언시, 변경 사항

• _getxSimpleController 명으로 Get.find<GetxSimpleController>() 대체 가능함

 

class GetxSimple extends StatelessWidget {

  final _getxSimpleController = Get.put(GetxSimpleController());

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Getx Simple', style: TextStyle(fontSize: 20),),
          Container(height: 10,),
          GetBuilder<GetxSimpleController>(
            builder: (controller) {
              return Text("${controller.count}",
                style: TextStyle(fontSize: 15),
              );
            },
          ),
          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("+", style: TextStyle(fontSize: 30)),
              onPressed: () {
                _getxSimpleController.increment();
//              Get.find<GetxSimpleController>().increment();
              },
            ),
          ),
          Container(height: 10,),
          SizedBox(
            width: 120,
            height: 40,
            child: ElevatedButton(
              child: Text("Reset", style: TextStyle(fontSize: 30)),
              onPressed: () {
                _getxSimpleController.putNumber(0);
//              Get.find<GetxSimpleController>().putNumber(0);
              },
            ),
          ),
        ],
      ),
    );
  }
}