[Flutter] GetX (Reactive State, Get.put()) [맥북💻]

 목차

1. 사용된 기능 설명
2. 사용 예시

 

 

 

✅ 사용된 기능 설명

• Rx : ReactiveX 의 줄임말
• 변수 [index].update((val){...}
  1. 변수 리스트에서 특정 Rx 객체를 ( [index] )
  2. 내부 값을 val로 받아서 수정 ( update((val){...}) )
  3. 수정 후 GetX가 UI 갱신을 자동으로 수행
• val?.변수1 = 변수2; : val이 null이 아닐 때만 변수1을 변수2 으로 변경
• Get.put() : GetX에서 의존성 주입을 할 때 쓰는 메소드
• .obs : 반응형 변수를 만드는 GetX의 문법으로, 변수에 .obs를 붙이면 그 변수를 감시하는 역할
  • 예시
    var count = 0.obs;   // count는 그냥 int가 아니고, RxInt 타입이 되어 값이 바뀌면 UI에 자동으로 반영
    print(count.value); // 0
    count.value++;       // Rx타입은 .value로 접근/수정
    print(count.value); // 1
    
• GetMaterialApp : MaterialApp을 확장(상속)한 위젯으로, GetX의 기능을 앱 전체에서 사용할 수 있도록 지원
  ** GetX를 사용하기 위해선 GetMaterialApp를 반드시 사용
  
  • GetX 기능
    1. 라우팅 (페이지 이동)
       Get.to(SecondPage());   // push
       Get.off(SecondPage());  // 현재 페이지 닫고 새 페이지
       Get.offAll(SecondPage()); // 모든 스택 날리고 새 페이지
    2. 스낵바 / 다이얼로그 
       Get.snackbar("제목", "내용"); // 스낵바 
       Get.defaultDialog(title: "알림", middleText: "진짜 삭제한다?"); // 다이얼로그
    3. 의존성 주입 & 상태관리 
       Get.put(), Get.find() 같은 GetX DI 기능을 앱 전체에서 쓸 수 있음.
       GetMaterialApp 없이는 Get.snackbar, Get.to 같은 기능이 정상적으로 동작하지 않음.
    4. 네비게이션 관리 (라우트 테이블)

 

 

✅ 사용 예시

 

1️⃣ pubspec.yaml 설정

 

 

2️⃣ Model 작성

 

 

3️⃣ Controller 작성

 

 

4️⃣ Main.dart 작성

1. Widget builder() 의 리턴값으로 GetMaterialApp()을 주기 때문에 runApp( const MyApp() ); 에서 const 삭제
2. Widget builder() 의 리턴값으로 GetMaterialApp()을 주기 때문에 const MyApp({super.key}); 에서 const 삭제

 

 

5️⃣ 테스트

 

 

 

 

 

✔️ 사용된 코드

1️⃣ Model

class Student{
  int studentId;
  String studentName;
  String studentGrade;

  // named parameter(이름 있는 매개변수) 와 기본값(default value) 를 사용
  // this.studentId = 0 은 해당 생성자 호출 시 값을 안 줘도 기본값 0으로 초기화
  Student({this.studentId = 0, this.studentName = "", this.studentGrade = ""});
}

 

2️⃣ Controller

import 'package:get/get.dart';
import 'package:프로젝트명/studentModel.dart';

class StudentController extends GetxController{
  // Rx : ReactiveX 의 줄임말
  RxList<Rx<Student>> studentList = [
    Student(studentId: 1, studentName: "르브론", studentGrade: "A").obs,
    Student(studentId: 2, studentName: "돈치치", studentGrade: "B").obs,
    Student(studentId: 3, studentName: "리브스", studentGrade: "C").obs,
  ].obs;

  List<String> newStudentName = ["하치무라", "라라비아", "에이튼"];
  List<String> newStudentGrade = ["B+", "A+", "C+"];

  void updateStudentName(String name, int index){
    studentList[index].update((val){  // studentList에서 특정 학생(Rx<Student>)을 꺼내서, 내부 Student 객체를 val이라는 이름으로 가져온 뒤, val을 수정할 수 있도록 준비
      val?.studentName = name;  // val이 null이 아닐 때만 studentName 속성을 name 으로 변경
    });
  }

  void updateStudentGrade(String grade, int index){
    studentList[index].update((val){
      val?.studentGrade = grade;
    });
  }
}

 

3️⃣ main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:프로젝트명/studentController.dart';

void main() {
  // 컴파일러의 시작 지점 (void main())
  runApp(MyApp());
}
// void main() => runApp(const MyApp());  // 위에 void main() 코드랑 동일

class MyApp extends StatelessWidget {
  // main() 에서 반환되는 위젯
  MyApp({super.key});

  final StudentController _con = Get.put(StudentController());  // Get.put() : GetX에서 의존성 주입을 할 때 쓰는 메소드

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: const Text("GetX 테스트")),
        body: ListView.builder(
          itemCount: _con.studentList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              margin: const EdgeInsets.all(15),
              padding: const EdgeInsets.all(15),
              child: Column(
                children: [
                  GetX<StudentController>(
                    builder: (_) => Text(
                      "ID : ${_con.studentList[index]().studentId} / NAME : ${_con.studentList[index]().studentName} / GRADE : ${_con.studentList[index]().studentGrade}",
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(
                        onPressed: () => _con.updateStudentName(_con.newStudentName[index], index),
                        child: Text("이름 변경"),
                      ),
                      TextButton(
                        onPressed: () =>
                            _con.updateStudentGrade(_con.newStudentGrade[index], index),
                        child: Text("성적 변경"),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}