[Flutter] RestaurantDetailScreen-④SliverList 구현하기

아직 restaurant_detail_screen은 화면이 스크롤되지 않음!
메뉴가 많다면 스크롤시켜서 다른 메뉴들도 볼 수 있게 해야겠지?
스크롤되게 해 보자!

ListView로 할 수도 있겠지만, 여기에선 적합하지 않음.
왜냐면 상품들을 list로 집어넣고, 그 밑에 계속 스크롤했을 때 평점이 나오게 해야 함.
그런데 이 평점도 다른 API에서 불러와야하기 때문!

그래서 List가 2개 공존하는데...
스크롤은 하나의 List를 스크롤하는 것처럼 만들어버리자.

① SliverList 구현하기
restaurant_detail_screen.dart 코드에서 Column은 잠깐 주석처리하고,
CustomScrollView로 수정해서 그 안에 slivers: [ ]를 넣어준다.

• restaurant_detail_screen.dart 코드

import 'package:flutter/material.dart';
import 'package:flutter_actual/common/layout/default_layout.dart';
import 'package:flutter_actual/product/component/product_card.dart';
import 'package:flutter_actual/restaurant/component/restaurant_card.dart';

class RestaurantDetailScreen extends StatelessWidget {
  const RestaurantDetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: '불타는 떡볶이',
      child: CustomScrollView(
        slivers: [
          renderTop(),
          renderLabel(),
          renderProducts(),
        ],
      ),
      //const Padding(
      // padding: EdgeInsets.symmetric(horizontal: 16),
      //child: ProductCard(),
      //),
    );
  }

  SliverPadding renderLabel() {
    return const SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 16),
      sliver: SliverToBoxAdapter(
        child: Text(
          '메뉴',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }

  SliverToBoxAdapter renderTop() {
    return SliverToBoxAdapter(
      child: RestaurantCard(
        image: Image.asset('asset/img/food/ddeok_bok_gi.jpg'),
        name: '불타는 떡볶이',
        tags: const ['떡볶이', '매움', '치즈'],
        ratingsCount: 100,
        deliveryTime: 30,
        deliveryFee: 3000,
        ratings: 4.76,
        isDetail: true,
        detail: '맛있는 떡볶이',
      ),
    );
  }

  SliverPadding renderProducts() {
    return SliverPadding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            return const Padding(
              padding: EdgeInsets.only(top: 16),
              child: ProductCard(),
            );
          },
          childCount: 10,
        ),
      ),
    );
  }
}

결과 화면을 봐보자!