[flutter] 7...GetX_상태관리_간단한 카운터(Controller, GetBuilder)

내 노트북이 4년 됬더니 배터리 전원선 없이 30분밖에 못쓴다...

알리익스프레스에서 베터리 하나 주문했다.

뒷판을 보니 별나사를 써서.. 쿠팡에서 드라이버 하나 주문했다...

처음 해보는 베터리 교체... 자신있다.

뒷판 뜻고 케이블 분리하고 교체하면 된다고 매우 쉽다고 생각하기 때문이다.

 

이번 시간에는 GetX를 알아보자.

GetX는 상태관리 라이브러리이다. 전세계적으로 가장 많이 쓰이는 라이브러리 이다..

그만큼 말도많은 라이브러리다. 플러터 개발을 너무 쉽게 해준다나 뭐라나..

설명을 들이니 정말 쉽고 편하게 만들어 주는것 같다.

플러터 입문자에겐 악영향을 주는거 같지만 쓰라고 있는건데 안쓸 수 있나..

오늘 만들어볼 앱이다.

빨간 텍스트는 현재 숫자값을 보여준다.

plus button - 현재 숫자값에 1 더해준다.

minus button - 현재 숫자값에 1 뺴준다.

초록색 텍스트는 위 2개 버튼 클릭수이다.

reset button - 현재 숫자값, 클릭수를 0으로 초기화 한다.

 

각 위젯 사이에는 SizedBox 를 넣어줘 여백을 준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

getX를 설치해보자

맨 아랫줄과 같이 get: 만 해주면 알아서 최신버전을 설치해준다.

이다음 위에 get pub을 눌러준다.

 

그다음 main.dart에 

import 'package:get/get.dart';

를 import 해준다.

 

 

 

다음 프로젝트 lib 폴더에 controller.dart 를 하나 만들어 아래와 같이 코드를 작성해준다.

 

 

Counter 라는 클래스를 만든다.(GetxController를 상속받는,,)

 

 

 

 

 

1 증가, 1 감소, 초기화 이렇게 3가지 구현 해줘야하니 함수 3개를 만들자.

숫자값은 _x로 클릭수는 _y로 구현하겠다.

_x와 _y는 0으로 초기화 한다.

main에서 불러올때는 각각 value, click를 이용하겠다.

 

update(); 는 상태변화를 감지하기 위해 꼭 넣어줘야한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

다음 main에 와서

아랫 코드를 작성하여 생성해준다.

 

 

 

 

 

GetBuilder 이다.

<Counter> 은 Controller에서 만든 클래스 이름을 넣어준다.

builder은 Text를 뿌려준다.

Text안에는 ${controller.value} 가 들어가고

이는 위 Counter() 의 value 값을 가져온다.

 

 

 

 

 

ElevatedButton 이다.

클릭했을때 실행될 함수를 넣는다.

controller는 Counter를 의미하고 Counter의 increment 함수를 실행한다.

controller.dart 의 해당 함수를 보면

_x 는 1 증가

_y 도 1증가

그리고 update(); 를통해 상태 변화를 감지한다.

 

위같은 로직으로 나머지 부분을 구현하면 아래와같다.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GetX Test',
      home: firstPage(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {

    Counter controller = Get.put(Counter());

    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Test'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GetBuilder<Counter>(
              builder: (_) => Text(
                'Current value is ${controller.value}',
                style: TextStyle(
                    fontSize: 40,
                    color: Colors.red,
                    fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(x
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  controller.increment();
                },
                child: Text('Plus Button',style: TextStyle(fontSize: 30),)),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  controller.decrement();
                },
                child: Text('Minus Button',style: TextStyle(fontSize: 30),)),
            SizedBox(
              height: 20,
            ),
            GetBuilder<Counter>(
              builder: (_) => Text(
                'Total Counter is ${controller.click}',
                style: TextStyle(
                    fontSize: 40,
                    color: Colors.green,
                    fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  controller.reset();
                },
                child: Text('Reset Buttom',style: TextStyle(fontSize: 30),)),
          ],
        ),
      ),
    );
  }
}