[Flu] GetX 상태관리 / Extract code into a method > Flutter/Dart/Node

본문 바로가기
사이트 내 전체검색

Flutter/Dart/Node

[Flu] GetX 상태관리 / Extract code into a method

페이지 정보

작성자 sbLAB 댓글 0건 조회 2,855회 작성일 22-12-13 20:19

본문

GetX 상태관리

https://github.com/jonataslaw/getx#installing 

https://danawalab.github.io/flutter/2022/08/05/Flutter-Getx.html

https://sudarlife.tistory.com/entry/%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%9D%98-%EB%81%9D%ED%8C%90%EC%99%95-GetX%EB%A5%BC-%EC%A0%95%EB%A6%AC%ED%95%B4-%EB%B3%B4%EC%95%98%EB%8B%A4

- https://youtu.be/OXfG-D4PNpQ 


Extract code into a method(복잡/반복적인 위젯(클래스)를 메서드로 분리)



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

  void main() {
    runApp(GetMaterialApp(home: MyHomePage())); //GetMaterialApp
  }

  //GetX SimpleController Class
  class SimpleController extends GetxController {
    int counter = 0;
   
    void increase() {
    counter++;
    update(); //update
    }
  }

  //MyHomePage
  class MyHomePage extends StatelessWidget {
    MyHomePage({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      Get.put(SimpleController()); // SimpleController 등록      
      return Scaffold(
        appBar: AppBar(
          title: const Text("단순 상태관리"),
        ),
        body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
              'FLUTTER',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                  color: Colors.red,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: buildGetBuilder(),  //재사용
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: buildGetBuilder(),  //재사용
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: buildGetBuilder(), //재사용
            )
          ]),
        ),
      );
    }

   //반복적인 위젯(클래스)를 메서드로 분리
    GetBuilder<SimpleController> buildGetBuilder() {
    return GetBuilder<SimpleController>(
          builder: (controller) { //컨트롤러 인스턴스(controller)
    return ElevatedButton(
              child: Text(
              'Current Value : ${controller.counter}',
              ),
              onPressed: () {
                controller.increase();
                //Get.find<SimpleController>().increase();
              },
            );
          },
        );
      }
    }
 


9696c4fbe240e91ff1525d7b8264b273_1670931044_0759.jpg
 


[AppBar Title 에도 Text 변경]




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

    void main() {
      runApp(GetMaterialApp(home: MyHomePage()));
    }

    class SimpleController extends GetxController {
      int counter = 0;
      void increase() {
        counter++;
        update();
      }
    }

    //MyHomePage
    class MyHomePage extends StatelessWidget {
      MyHomePage({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        Get.put(SimpleController()); // controller 등록
        return Scaffold(
          appBar: AppBar(
            title: buildTitleGetBuilder(),  //AppBar Title
          ),
          body: Center(
            child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  'FLUTTER',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: Colors.red,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: buildGetBuilder(),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: buildGetBuilder(),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: buildGetBuilder(),
              )
            ]),
          ),
        );
      }

      GetBuilder<SimpleController> buildGetBuilder() {
        return GetBuilder<SimpleController>(
          // 실시간 렌더링
          builder: (controller) {
            return ElevatedButton(
              child: Text(
                'Current Value: ${controller.counter}',
              ),
              onPressed: () {
                controller.increase();
                //Get.find<SimpleController>().increase();
              },
            );
          },
        );
      }

      GetBuilder<SimpleController> buildTitleGetBuilder() {
        return GetBuilder<SimpleController>(
          // AppBar 제목 실시간 렌더링
          builder: (controller) {
            return Text(
              'Current Value: ${controller.counter}',
            );
          },
        );
      }

    }

 


31d3052dc69f7b59d1b8f9853bb617b6_1670939249_2723.jpg
 




댓글목록

등록된 댓글이 없습니다.

회원로그인

접속자집계

오늘
147
어제
407
최대
1,279
전체
211,917

그누보드5
Copyright © sebom.com All rights reserved.