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,
),
],
),
),
);
}
}