Flutter - Getx

 

 

Getx

 

GetX는 Flutter를 위한 매우 가볍고 강력한 솔루션입니다. 고성능 상태 관리, 지능형 종속성 주입 및 빠르고 실용적인 라우트 관리가 결합되어 있습니다.

 

설치

dev_dependencies:
  flutter_test:
    sdk: flutter
  get: ^4.3.0

사용할 파일에 추가

import 'package:get/get.dart';

 

main.dart

import 'package:tistory/test2_view.dart';
import 'package:tistory/test_controller.dart';
import 'package:tistory/test_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      getPages: [
        GetPage(
          name: '/first',
          page: () => Test2View(),
        ),
      ], //라우트 이동을 위한 getPage 설정
      initialBinding: BindingsBuilder(() {
        Get.lazyPut<TestController>(() => TestController());
      }), //binding을 사용하여 의존성을 주입한다
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestView(),
    );
  }
}

 

처음엔 MaterialApp으로 되어있는데 GetMaterialApp으로 바꿔준다

 

getPages는 라우트 관리를 위해 라우트하는 페이지들을 다 추가해준다

 

initialBinding으로 binding을 사용하여 의존성을 주입한다 TestView의 controller를 주입한다

 

TestView()

import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:tistory/test2_view.dart';
import 'package:tistory/test_controller.dart';

class TestView extends GetView<TestController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Obx(
      () => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(width: 360),
          GestureDetector(
            onTap: () {
              controller.plusNum();//TestController에 설정한 메소드
            },
            child: Container(width: 100, height: 100, color: Colors.red),
          ),
          Text(controller.num1.value.toString()),//controller에서 설정한 rxInt 변수
          GestureDetector(
              onTap: () {
              //이름으로 argument와 함께 라우트 이동, 
                Get.toNamed('/first', arguments: 'get to named argument');
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.black,
                child: Center(
                  child: Text(
                    'get to named',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )),
          SizedBox(height: 30),
          GestureDetector(
              onTap: () {
              //argument와 함께 라우트 이동, 
                Get.to(() => Test2View(), arguments: 'get to argument');
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.black,
                child: Center(
                  child: Text(
                    'get to',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ))
        ],
      ),
    ));
  }
}

Obx Obx안에 들어가있어야지 상태 관리가  되어서 화면에 보이는 num1 숫자가 변화는 걸 보실 수 있습니다

 

controller.plusNum() : TestController()에서 num1을 1씩 올려주는 메서드

 

controller.num1.value : TestController()에서 설정한 RxInt형 변수라. value를 사용해준다

 

Get.toNamed() : main에서 getPages로 설정해준 이름올 화면 이동, argument도 같이 넘겨줄 수 있다

 

Get.to() : 클래스 이름으로 화면 이동, argument도 같이 넘겨줄 수 있다

 

TestController()

import 'package:get/get.dart';

class TestController extends GetxController {
  var num1 = 1.obs;
  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();
  }

  plusNum() {
    num1.value++;
  }
}

num1 : 1로 초기화해주고. obs를 붙여서 RxInt형으로 만든다

 

plushNum() : num1의 값을 1씩 늘려준다

 

TestBinding()

import 'package:get/get.dart';
import 'package:tistory/test_controller.dart';

class TestBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<TestController>(() => TestController());
  }
}

 

Test2View()

TestView에서 화면 이동한 페이지

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

class Test2View extends StatefulWidget {
  const Test2View({Key? key}) : super(key: key);

  @override
  _Test2ViewState createState() => _Test2ViewState();
}

class _Test2ViewState extends State<Test2View> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
         
          GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.black,
              child: Text(
                'get back',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          SizedBox(height: 30),
          Text(Get.arguments.toString())
        ],
      ),
    );
  }
}

Get.back() : 바로 전 페이지로 이동

 

Get.arguments : 전 페이지에서 화면 이동할 때 같이 넘겨준 argument 출력

 

더 많은 내용은 아래 참조

https://github.com/jonataslaw/getx/blob/master/README.ko-kr.md