[Flutter] getX Counter App With GetX

 

getX 를 이용하여 간단한 Counter App을 작성해보자 

 

get 설치 : 사용버전 4.3.8

flutter pub add get

 

사용 : 

import 'package:get/get.dart';

<구글번역>

Flutter의 새 프로젝트에서 기본적으로 생성된 "카운터" 프로젝트에는 100줄 이상(주석 포함)이 있습니다. Get의 힘을 보여주기 위해 클릭할 때마다 상태를 변경하는 "카운터"를 만드는 방법, 페이지 간에 전환하고 화면 간에 상태를 공유하는 방법을 모두 조직적인 방식으로 보여주고 비즈니스 논리를 보기에서 분리합니다. 주석을 포함한 26개의 라인 코드.

요약 : 카운터앱 만들기( 페이지 전환 /  상태공유 /  비즈니스 로직 분리 )를 할것이다.

 

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

<구글번역>

1단계: MaterialApp 앞에 "Get"을 추가하여 GetMaterialApp으로 바꿉니다.

참고: 이것은 Flutter의 MaterialApp을 수정하지 않으며 GetMaterialApp은 수정된 MaterialApp이 아니며 기본 MaterialApp이 자식으로 있는 사전 구성된 위젯일 뿐입니다. 수동으로 구성할 수 있지만 반드시 필요한 것은 아닙니다. GetMaterialApp은 경로를 생성하고, 주입하고, 번역을 주입하고, 경로 탐색에 필요한 모든 것을 주입합니다. 상태 관리 또는 종속성 관리에만 Get을 사용하는 경우 GetMaterialApp을 사용할 필요가 없습니다. GetMaterialApp은 경로 및 컨텍스트 부재와 관련된 경로, 스낵바, 국제화, bottomSheets, 대화 및 상위 수준 API에 필요합니다.

참고²: 이 단계는 경로 관리(Get.to(), Get.back() 등)를 사용하려는 경우에만 필요합니다. 사용하지 않을 경우 1단계를 수행할 필요가 없습니다.

2단계: 2단계: 비즈니스 로직 클래스를 만들고 그 안에 모든 변수, 메서드 및 컨트롤러를 배치합니다. 간단한 ".obs"를 사용하여 모든 변수를 관찰 가능하게 만들 수 있습니다.

 

정리 : 

기존에 MaterialApp을 사용하지 않고 GetMaterialApp을 사용한다.

(GetMaterialApp은 MaterialApp을 자식으로 포함하고 있고 경로이동 할 때만 필요하다.)

모든 변수 뒤에 ".obs"를 붙이면 관찰 할 수 있는 상태가 된다. (현재는 counter 변수를 관찰하겠다는 뜻)

GetxController를 상속받는 Controller라는 이름의 클래스를 생성

 

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // Instantiate your class using Get.put() to make it available for all "child" routes there.
    final Controller c = Get.put(Controller());

    return Scaffold(
      // Use Obx(()=> to update Text() whenever count is changed.
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // Replace the 8 lines Navigator.push by a simple Get.to(). You don't need context
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // You can ask Get to find a Controller that is being used by another page and redirect you to it.
  final Controller c = Get.find();

  @override
  Widget build(context){
     // Access the updated count variable
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

<구글번역>

3단계: View를 만들고 StatelessWidget을 사용하고 RAM을 절약하세요. Get을 사용하면 더 이상 StatefulWidget을 사용할 필요가 없을 수도 있습니다.

 

정리 :

Get과 StatelessWidget을 사용하면 StatefulWidget으로 생성하지 않아도 상태관리가 가능하다.

 

<구글번역>

이것은 간단한 프로젝트이지만 Get이 얼마나 강력한지 이미 명확하게 보여줍니다. 프로젝트가 성장함에 따라 이 차이는 더욱 중요해집니다.
Get은 팀과 함께 작업하도록 설계되었지만 개별 개발자의 작업을 간단하게 만듭니다.
기한을 단축하고 성능 저하 없이 모든 것을 정시에 제공하십시오. Get이 모든 사람을 위한 것은 아니지만 해당 문구로 확인했다면 Get은 당신을 위한 것입니다!

정리:

Get은 작업을 간단하게 해준다!

 

 

<실제 작성해보기>

- 상단의 코드를 전체 복사해서 위젯으로 추가해주면 별 문제없이 실행되기때문에 코드에 몇가지 주석을 남기는것으로 정리하겠다.

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
}

GetxController를 상속받는 Controller 클래스를 생성

count 값을 관찰 할 것이기 때문에 초기값 뒤에 ".obs"를 붙여준다

increment메서드 작성. 호출 시 count값을 증가

 

final Controller c = Get.put(Controller());

생성한 class (Controller)를 put 키워드를 이용해서 Get에 등록해준다.

 

 

appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

상단에서 등록한 컨트롤러(c)의 변수에 접근 -> c.count

Text형식으로 AppBar의 타이틀에 표현

Obx: 반응상태관리자 -> 값이 변경될 때 모든 위젯이 자동으로 업데이트(변경) 됨 (ex. count값이 변경되면 Text위젯이 업데이트됨)

 

body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),

화면의 가운데에는 ElevatedButton위젯이 있고, 버튼 동작 시 to 키워드를 이용하여 페이지(클래스 Other)로 이동

 

floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));

floating버튼 동작 시 컨트롤러(c)의 increment 메서드 동작(count값을 증가시킨다)

 

<결과화면>

우측 하단의 + 버튼을 누르면 숫자가 증가한다

 

"go to other"버튼을 클릭 시 현재 클릭한 count의 개수가 표시된다.

 

 

https://pub.dev/packages/get