[Projeto] [Desafio] Criando a tela Menu

No arquivo "food_menu.dart" adicionei o "CustomScrollView" e os Slivers para organizar o título "Menu" e os itens.

import 'package:flutter/material.dart';
import 'package:panucci_ristorante/components/food_item.dart';
import '../cardapio.dart';

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

  final List items = comidas;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0),
      child: CustomScrollView(
        slivers: [
          const SliverToBoxAdapter(
            child: Padding(
              padding: EdgeInsets.only(bottom: 8.0),
              child: Text(
                'Menu',
                style: TextStyle(fontFamily: "Caveat", fontSize: 32),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FoodItem(
                    itemTitle: items[index]['name'],
                    itemPrice: items[index]['price'],
                    imageURI: items[index]['image'],
                  ),
                );
              },
              childCount: items.length,
            ),
          ),
        ],
      ),
    );
  }
}

Em seguida, a imagem dos itens começou a dar overflow na direita da tela e, também, estava com uma altura muito exagerada. Então, alterei o "height" e o "width" em 80 cada, de acordo com o projeto no figma.

import 'package:flutter/material.dart';

class FoodItem extends StatelessWidget {
const FoodItem({ Key? key, required this.itemTitle, required this.itemPrice, required this.imageURI }) : super(key: key);
  final String itemTitle;
  final String itemPrice;
  final String imageURI;

  @override
  Widget build(BuildContext context){
    return InkWell(
      child: Card(
        clipBehavior: Clip.hardEdge,
        color: Theme.of(context).colorScheme.surfaceVariant,
        elevation: 0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(itemTitle, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),),
                  Text("R\$ " + itemPrice),
                ],
              ),
            ),
            Image(
              height: 80,
              width: 80,
              image: AssetImage(imageURI),
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}