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