[Flutter] RestaurantDetailScreen-⑦ProductCard 매핑하기

아직 Detail Screen에서 각 메뉴(product)들은 불러와지지 않고 있다.
데이터가 잘 들어올 수 있도록 ProductCard를 모델링, 매핑해보자!

---

① 일반 constructor에서 받아오기
product_card.dart 코드를 보면 샘플로 넣어둔 것을 볼 수 있다.

이것들을 일반 constructor에서 받아오는 것부터 해보자.

Image.asset( ) 내용은 지워주고, 이미지부터 받아오기.
파라미터에도 추가해줘야겠지?!

그리고 이 image는 여기 드래그한 곳에 들어갈 거임!

다음 Text('떡볶이')는 어떻게 해 주면 될까?
'떡볶이' 글자는 name에서 가져오면 됨.

그럼 image처럼 위로 올라가서 코드 작성해주면 되겠지!?

나머지 내용, 가격도 그대로 해주면 된다.
지금까지 전체 코드는 아래와 같다.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_actual/common/const/colors.dart';

class ProductCard extends StatelessWidget {
  final Image image;
  final String name;
  final String detail;
  final int price;

  const ProductCard({
    super.key,
    required this.image,
    required this.name,
    required this.detail,
    required this.price,
  });

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        children: [
          ClipRRect(borderRadius: BorderRadius.circular(8), child: image),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  name,
                  style: const TextStyle(
                      fontSize: 18, fontWeight: FontWeight.w500),
                ),
                Text(
                  detail,
                  overflow: TextOverflow.ellipsis,
                  style: const TextStyle(
                    fontSize: 14,
                    color: BODY_TEXT_COLOR,
                  ),
                ),
                // 가격
                Text(
                  '￦$price',
                  textAlign: TextAlign.right,
                  style: const TextStyle(
                      fontSize: 12,
                      color: PRIMARY_COLOR,
                      fontWeight: FontWeight.w500),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

하지만! 위에 전체 코드처럼 쌩으로 다 매핑해서 넣을 것은 아니기 때문에
계속 했던 것처럼 factory constructor를 만들어서 작업한다.

그리고 이 ProductCard를 어떻게 매핑해 줄 것인지 정의한다.

이미지는 network로 가져올 거임!

③ ProductCard( )에 값 넣어주기
restaurant_detail_screen.dart 에러 수정
에러가 발생한 이유는 ProductCard( )에 값이 들어가야 하는데, 안 들어가고 있기 때문!

renderProducts( )에 파라미터를 받아와야 한다.
뭘 파라미터로 받아오느냐...

그리고 이 products를 위에 있는 renderProducts에 넣어주면 된다.

그리고 ProductCard에는 어떤 값들이 들어가야 되냐면...

일단... .fromModel하고 이 모델 값을 가져오도록 한다.
모델 값을 가져오기 위한 방법은?
products의 index를 가져오면 된다.

아이템 카운트는??

앱을 재실행 해서 확인해 보도록 하자.

뭔가 좀 이상하다... URL의 문제인데, 해결하기 위해서
restaurant_detail_model.dart 코드로 가보자.

여기서 매핑을 할 때, 이렇게 해도 되지만,
RestaurantProductModel에서도 factory constructor를 사용해
이 안에서 자체적으로 매핑할 수 있게 해주자!

드래그 된 값들을 잘라내서 붙여 넣기해준다.

그리고 x는 json으로 바꿔주면 됨!

그리고 이 각각의 x값들은 .fromJson 해서 x에 넣어주면 된다.

정상적으로 렌더링이 잘 된다!!!