[Flutter] RestaurantDetailScreen-①레스토랑 상세 페이지 작업

① 파일 생성
restaurant/view/restaurant_detail_screen.dart 생성

② 레이아웃
return Container(); -> return const DefaultLayout(); 수정해주고
임시로 title 값주기

③ 이동 매핑 구현
스크린에서 RestaurantCard를 누르면 RestaurantDetailScreen으로 이동되게 매핑해보자.

restaurant_screen.dart 코드로 가서 이 부분을 아래와 같이 수정!
(현재 Navigator를 사용 중인데, 추후 Gorouter를 사용해 바꿀 거임)


이제 음식 사진을 누르면 상세 페이지로 넘어감!

④ UI 작업
bool 값을 넣어서 상세 페이지인지 아닌지 결정되게 해보자.
bool 값을 넣었을 때 상세 페이지라면 음식 사진 이미지가 앱 화면 끝과 끝에 닿게하고,
글자는 패딩을 좌우로 살짝 주도록 해볼 거임.

restaurant_card.dart 코드로 가서 bool 값 받으러 가자!
디폴트 값은 false로 할 거임!

왜? 👉 이미 구현해 놓은 게 detail에 해당되지 않는 데이터에 대해서 값을 구현해 놨으니까
false로 하면 기존 코드를 안 고쳐도 됨!

(⭐잊지말자!!!)
그리고!!! factory constructor에서도 isDetail을 받아 넘겨줘야 함!!!
그래야 정확히 detial 여부를 확인할 수 있음!

그리고 밑으로 내려와서 테두리 깎은 곳에서 코드 추가 작성해주자.
추가된 코드는 이러하다.

그리고 restaurant_detail_screen.dart로 돌아가서 칼럼에 RestaurantCard를 넣어보자.
이 값들에는 일단 샘플 값들로 넣어 둘거임.

// 가상의 값 넣은 코드
 @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: '불타는 떡볶이',
      child: Column(
        children: [
          RestaurantCard(
              image: Image.asset('asset/img/food/ddeok_bok_gi.jpg'),
              name: '불타는 떡볶이',
              tags: const ['떡볶이', '매움', '치즈'],
              ratingsCount: 100,
              deliveryTime: 30,
              deliveryFee: 3000,
              ratings: 4.76),
        ],
      ),
    );
  }
}

잘 나왔는지 앱으로 가서 확인해보자!

그러면 이렇게 디테일 스크린이 나오는 걸 볼 수 있다.
(근데 아직 isDetial을 true로 안 바꾼 상태라 좌우 코너가 둥글게 깎여있음)

isDetial을 true 추가해주면...

restaurant_card.dart으로 가서 좌우 패딩도 주자!
Column 전체를 Padding으로 래핑해줌.

그러면 이렇게 좌우 패딩 간격이 생긴다.



그리고 다시 restaurant_card.dart로 가서 상세 내용도 추가!

(... detail이 다 오타라 수정해줬습니다ㅠㅠ)

그리고 아래로 내려가서 Row가 끝나는 곳에 코드 추가해줌.

만약 detail이 null이 아니고 isDetail이 true일 때 detail이라는 글자를 넣을거임.
그리고 이건 필수로 null이 아님! 왜냐면 이미 null 체크를 했기 때문에.

그리고 restaurant_detail_screen.dart 코드로 가서 detail 코드 추가해주기.

그러면 불타는 떡볶이 글자가 추가된 것을 확인할 수 있다.