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:
parent
5942deb0c5
commit
46992bc844
1 changed files with 57 additions and 30 deletions
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue