Improve menu item card design

- Larger white cards with rounded corners and soft shadows
- Bigger item images (90x90) with shadow effect
- Gradient placeholder for items without images
- Material wrapper for better touch ripple effect
- Better spacing and layout for card content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-01-05 11:21:19 -08:00
parent 5942deb0c5
commit 46992bc844

View file

@ -1,4 +1,4 @@
import "package:flutter/material.dart";
import "package:flutter/material.dart";
import "package:provider/provider.dart";
import "../app/app_router.dart";
@ -397,11 +397,21 @@ class _MenuBrowseScreenState extends State<MenuBrowseScreen> {
}
Widget _buildItemImage(int itemId) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: SizedBox(
width: 64,
height: 64,
return Container(
width: 90,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
"$_imageBaseUrl/items/$itemId.png",
fit: BoxFit.cover,
@ -411,16 +421,20 @@ class _MenuBrowseScreenState extends State<MenuBrowseScreen> {
"$_imageBaseUrl/items/$itemId.jpg",
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
// Show placeholder if no image
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.grey.shade200, Colors.grey.shade300],
),
),
child: Icon(
Icons.restaurant,
color: Theme.of(context).colorScheme.onPrimaryContainer,
size: 28,
child: Center(
child: Icon(
Icons.restaurant_menu,
color: Colors.grey.shade500,
size: 36,
),
),
);
},
@ -555,16 +569,27 @@ class _MenuBrowseScreenState extends State<MenuBrowseScreen> {
final hasModifiers = _itemsByParent.containsKey(item.itemId);
return Container(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Theme.of(context).colorScheme.outlineVariant.withAlpha(128),
),
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 12,
offset: const Offset(0, 4),
),
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: InkWell(
borderRadius: BorderRadius.circular(12),
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () {
if (hasModifiers) {
_showItemCustomization(item);
@ -573,13 +598,14 @@ class _MenuBrowseScreenState extends State<MenuBrowseScreen> {
}
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Item image or placeholder
_buildItemImage(item.itemId),
const SizedBox(width: 16),
// Item details
padding: const EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Item image with shadow
_buildItemImage(item.itemId),
const SizedBox(width: 14),
// Item details
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -634,7 +660,8 @@ class _MenuBrowseScreenState extends State<MenuBrowseScreen> {
),
],
),
],
],
),
),
),
),
@ -1065,7 +1092,7 @@ class _ItemCustomizationSheetState extends State<_ItemCustomizationSheet> {
],
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(20),