Flutter GetX (단순 상태관리)

https://pub.dev/packages/get/install  에 접속한다.

설치 안내에 따라 dependencies에 get 을 추가한다.

 

터미널창을 열고 아래 명령어를 입력하고 엔터키를 친다.

flutter pub add get

 

 

단순 상태관리 예제

본문에 포함된 주석을 참조하면 이해하는데 도움된다.

import 'package:get/get.dart';
 
class CountController extends GetxController {
  // Flutter에서 상태 관리에 가장 많이 사용되는 패키지인 GetX
  // 상태 관리 외에도 route 관리, 다국어 지원, 화면크기 가져오기, API 호출 기능
 
  int _counter = 0; // _를 붙이면 private 변수
  int get counter => _counter;
 
  void increment() {
    _counter++;
    update();
  }
 
  void decrement() {
    _counter--;
    update();
  }
}

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controller.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      // MaterialApp 대신에 GetMaterialApp
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    CountController controller = Get.put(CountController());
 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            // 상태의 변화를 감지하고 변경된 상태값을 적용하기 위해서는
            // GetBuilder를 사용해야 한다.
            GetBuilder<CountController>(builder: (_) {
              return Text(
                '${controller.counter}',
                style: Theme.of(context).textTheme.headline4,
              );
            }),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
              onPressed: () {
                controller.increment();
              },
              backgroundColor: Colors.green,
              child: const Icon(Icons.add)),
          SizedBox(width: 10, ), // 여백을 만들기 위해서 넣음.
          FloatingActionButton(
              onPressed: () {
                controller.decrement();
              },
              backgroundColor: Colors.pink,
              child: const Icon(Icons.remove)),
        ],
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

CountController controller = Get.put(CountController());
controller.counter;
controller.increment();
controller.decrement();
 
// 위의 코드 대신에 아래 코드로 대체 사용할 수 있다.
Get.find<CountController>().counter;
Get.find<CountController>().increment();
Get.find<CountController>().decrement();