[MVVM Flutter-app 제작] #08 DaysController(View Model) 구현하기 / GetX 라이브러리

지난 과정 리뷰

지난 시간에는 HomeController 를 구현했었다.

HomeController 는 전반적인 앱 데이터 관리, API 통신, 다양한 상태관리, 유틸리티 기능들을 담당하는 클래스였다.

오늘은 DayController 를 구현할 것이다. 이는 특정 날짜에 초점을 맞추고, 그 날짜의 상세 날씨 정보를 관리한다. HomeController에서 제공하는 데이터를 바탕으로 일자별 상세 정보를 제공하는 클래스이다.

DaysController 분석

DaysController의 기능을 자세히 살펴보자.

GetX 를 통한 상태관리

지난 시간에 GetX 패키지를 배운 적이 있다. 해당 패키지는 상태 관리에 유용하다.

아래 코드를 보면 반응형 상태 0.obs를 사용하여 currentDay를 반응형 상태로 만들고 있다. 이를 통해 해당 변수의 값이 변경될 때마다 UI가 자동으로 업데이트할 수 있다.
DaysController 에서는 HomeController 인스턴스를 생성하고, 이를 통해 전반적인 앱 데이터에 접근하게 된다.
(우리는 HomeController 을 통해 모델에 접근할 수 있었다. 모델에 접근하면 날씨 정보를 가져올 수 있다.)
만약 해당 클래스의 객체를 생성하면 생성자에 의해 모델에 접근하여 (days![0])의 데이터를 day 변수에 할당하게 된다.

class DaysController extends GetxController {
  RxInt currentDay = 0.obs;
  final homeController = Get.put(HomeController());
  late Rx<Days> day;

  DaysController() {
    day = homeController.model.value!.days![0].obs;
  }

  // ... 다른 메소드들 ...
}

주요 메소드

아래는 DayController 의 주요 메소드들이다.

• setDay: 특정 인덱스에 해당하는 날짜의 데이터를 day에 설정하고, 현재 선택된 날짜의 인덱스를 업데이트한다.
• getImage: Utilities 클래스를 이용하여 날씨 조건에 따른 이미지 경로를 얻어옴
• getMonth, getMonthDay, getDate: 날짜 관련 정보를 문자열로 반환
• getMinTem, getMaxTem: 최저 및 최고 기온을 문자열로 반환

  setDay(int index)
  {
    day.value = homeController.model.value!.days![index];
    currentDay.value = index;
  }


  String getImage(int index)
  {
    Utilities utilities = Utilities();
    // Utility 클래스에서 imageMap 활용하여 이미지 호출
    return utilities.imageMap[homeController.model.value!.days![index].conditions] == null
        ? ImageAssets.nightStarRain
        : utilities.imageMap[homeController.model.value!.days![index].conditions]!;
  }

  String getMonth(int index)
  {
    String date = homeController.model.value!.days![index].datetime.toString();
    return Utilities.extractDate(date);
  }

  String getMonthDay(int index)
  {
    String date = homeController.model.value!.days![index].datetime.toString();
    return Utilities.extractDay(date);
  }

  String getDate(int index)
  {
    DateTime date = DateTime.parse(homeController.model.value!.days![index].datetime.toString());
    return Utilities.formatDate(date);
  }

  String getMinTem(int index)
  {
    return '${homeController.model.value!.days![index].tempmin!.toInt().toString()}\u00B0';
  }

  String getMaxTem(int index)
  {
    return '${homeController.model.value!.days![index].tempmax!.toInt().toString()}\u00B0';
  }
}

예시 시나리오:
1. 사용자가 앱에서 5월 3일을 선택했다고 가정하자
2. DaysController의 setDay 메소드가 호출되고, currentDay는 '3'으로 설정됩니다.
3. 동시에, homeController.model.value!.days![3]에서 5월 3일에 해당하는 Days 객체 정보를 day 변수에 할당합니다.
4. 이로 인해 UI는 새로운 day 데이터에 맞게 날씨 정보를 업데이트하고 사용자에게 표시합니다.

DaysController는 이처럼 사용자의 상호작용에 반응하여 사용자가 setDay 를 하면 해당하는 날씨 정보를 업데이트한다.

전체 코드

import 'package:get/get.dart';
import 'package:mvvm_weather_with_apis_getx/Resources/images/image_assets.dart';
import 'package:mvvm_weather_with_apis_getx/Utilities/utilities.dart';
import 'package:mvvm_weather_with_apis_getx/ViewModel/Controllers/home_controller.dart';

import '../../Model/data_model.dart';

class DaysController extends GetxController
{
  // 상태관리를 위해 getX 사용

  //  반응형 상태관리를 위한 타입 : RxInt , listening 을 위한 obs
  RxInt currentDay = 0.obs;
  // final : non-changeable
  // homeControlelr 인스턴스 생성
  // -> data controller 가 HomeController 의 메소드나 속성에 접근하기 위해
  final homeController = Get.put(HomeController());

  // late : 초기화 시점을 뒤로 미루겠다는 의미
  // Days 타입의 반응형 객체 :  day
  late Rx<Days> day;

  DaysController()
  {
    day = homeController.model.value!.days![0].obs;
  }

  setDay(int index)
  {
    day.value = homeController.model.value!.days![index];
    currentDay.value = index;
  }


  String getImage(int index)
  {
    Utilities utilities = Utilities();
    // Utility 클래스에서 imageMap 활용하여 이미지 호출
    return utilities.imageMap[homeController.model.value!.days![index].conditions] == null
        ? ImageAssets.nightStarRain
        : utilities.imageMap[homeController.model.value!.days![index].conditions]!;
  }

  String getMonth(int index)
  {
    String date = homeController.model.value!.days![index].datetime.toString();
    return Utilities.extractDate(date);
  }

  String getMonthDay(int index)
  {
    String date = homeController.model.value!.days![index].datetime.toString();
    return Utilities.extractDay(date);
  }

  String getDate(int index)
  {
    DateTime date = DateTime.parse(homeController.model.value!.days![index].datetime.toString());
    return Utilities.formatDate(date);
  }

  String getMinTem(int index)
  {
    return '${homeController.model.value!.days![index].tempmin!.toInt().toString()}\u00B0';
  }

  String getMaxTem(int index)
  {
    return '${homeController.model.value!.days![index].tempmax!.toInt().toString()}\u00B0';
  }
}