[Flutter] RestaurantDetailScreen-⑥Restaurant Detail Screen 모델링

겨레·2024년 7월 24일

다트 플러터

[Flutter] 코드팩토리 중급 Flutter 진짜 실전!

목록 보기

19/32

스웨거 Restaurant Detail Model에는 기존 데이터에서 detail, products 2개의 파라미터가 추가되어 있는 걸 볼 수 있다.

① Restaurant Detail Model 만들기
restaurant/model/restaurant_detail_model.dart 파일을 먼저 만들어준다.

속성들은 레스토랑 model에서 일단 복붙해오자.
그리고 2개의 파라미터를 추가해준다.

그런데!!!! 이렇게 하면 문제가 생긴다.
바로 중복이 되버리는 것!

만약 Restaurant model의 속성들이 실제로 서버에서 바뀔 경우에는
model에서도 이 값들을 바꿔줘야 하고, Restaurant Detail Model 에서도
이 값들을 바꿔줘야 하는 문제가 생긴다.

이런 경우가 많아지면 많아질수록 중복으로 에디팅을 해줘야 하는 상황이 잦아지게 됨.

그래서 이렇게 하지 않고, Restaurant Model을 상속받아버린다.

이렇게 해버리면 더 이상 Restaurant Model에 있는 것들을 다시 선언할 필요가 없어진다.

이렇게 상속받았지만 추가된 2개의 파라미터는 존재하지 않음.
이 부분만 따로 추가로 선언해주자.

② products에 해당되는 모델 만들기
products는 리스트 안에 여러 개가 들어있음.
products에 해당되는 모델을 아래다가 만들어주자.

import 'package:flutter_actual/restaurant/model/restaurant_model.dart';

class RestaurantDetailModel extends RestaurantModel {
  final String detail; // detail
  final List<RestaurantProductModel> products;

  RestaurantDetailModel({
    required super.id,
    required super.name,
    required super.thumbUrl,
    required super.tags,
    required super.priceRange,
    required super.ratings,
    required super.ratingsCount,
    required super.deliveryFee,
    required super.deliveryTime,
    required this.detail,
    required this.products,
  });
}

class RestaurantProductModel {
  final String id;
  final String name;
  final String imgUrl;
  final String detail;
  final int price;

  RestaurantProductModel({
    required this.id,
    required this.name,
    required this.imgUrl,
    required this.detail,
    required this.price,
  });
}

그리고 RestaurantProductModel 이건 어떻게 쓸 수 있느냐...
위로 올라가서 코드 추가 작성

③ factory constructor 만들기
factory constructor를 만들었던 이유는?
json을 넣기만 하면 자동으로 매핑이 잘 되게 하려고!

그래서 직접 factory constructor를 만들어서 fron json이라는 네임드 컨스트럭터를 사용했음.

Restaurant Detail Model에도 factory constructor 만들어주자~
매핑을 할 거니까...

④ restaurant_detail_screen.dart 코드 수정
매핑이 잘 되는지 restaurant_detail_screen.dart에서 확인하기

아래 코드 추가

if (!snapshot.hasData) {
            return Container();
          }
          // data가 있으면 
          final item = RestaurantDetailModel.fromJson(json: snapshot.data);