gitea
/
basedFood-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a good state overall

Browse Source
master
gitea 2 months ago
parent 7ffd01d303
commit 39567bbd92
2 changed files with 538 additions and 536 deletions
Show Stats Download Patch File Download Diff File

686
lib/ui/favourites/favourites_screen.dart
Unescape View File

@ -21,7 +21,7 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
String? _errorMessage; String? _errorMessage;
RecipeService? _recipeService; RecipeService? _recipeService;
bool _wasLoggedIn = false; bool _wasLoggedIn = false;
bool _isCompactMode = false; bool _isMinimalView = false;
@override @override
void initState() { void initState() {
@ -210,31 +210,16 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('Favourites'), title: const Text('Favourites'),
elevation: 0,
actions: [ actions: [
// View mode toggle icons // View mode toggle icon
IconButton( IconButton(
icon: Icon( icon: Icon(_isMinimalView ? Icons.grid_view : Icons.view_list),
_isCompactMode ? Icons.view_list : Icons.view_list_outlined,
color: _isCompactMode ? Theme.of(context).primaryColor : Colors.grey,
),
onPressed: () {
setState(() {
_isCompactMode = true;
});
},
tooltip: 'List View',
),
IconButton(
icon: Icon(
!_isCompactMode ? Icons.grid_view : Icons.grid_view_outlined,
color: !_isCompactMode ? Theme.of(context).primaryColor : Colors.grey,
),
onPressed: () { onPressed: () {
setState(() { setState(() {
_isCompactMode = false; _isMinimalView = !_isMinimalView;
}); });
}, },
tooltip: 'Grid View',
), ),
], ],
), ),
@ -338,17 +323,15 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
return RefreshIndicator( return RefreshIndicator(
onRefresh: _loadFavourites, onRefresh: _loadFavourites,
child: ListView.builder( child: ListView.builder(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: _recipes.length, itemCount: _recipes.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final recipe = _recipes[index]; final recipe = _recipes[index];
return _RecipeCard( return _RecipeCard(
recipe: recipe, recipe: recipe,
isCompact: _isCompactMode, isMinimal: _isMinimalView,
onTap: () => _viewRecipe(recipe), onTap: () => _viewRecipe(recipe),
onFavorite: () => _toggleFavorite(recipe), onFavouriteToggle: () => _toggleFavorite(recipe),
onEdit: () => _editRecipe(recipe),
onDelete: () => _deleteRecipe(recipe),
); );
}, },
), ),
@ -356,23 +339,18 @@ class _FavouritesScreenState extends State<FavouritesScreen> {
} }
} }
/// Card widget for displaying a recipe (reused from RecipesScreen). /// Card widget for displaying a recipe in Favourites screen.
/// This is a copy of the _RecipeCard from recipes_screen.dart to avoid making it public.
class _RecipeCard extends StatelessWidget { class _RecipeCard extends StatelessWidget {
final RecipeModel recipe; final RecipeModel recipe;
final bool isCompact; final bool isMinimal;
final VoidCallback onTap; final VoidCallback onTap;
final VoidCallback onFavorite; final VoidCallback onFavouriteToggle;
final VoidCallback onEdit;
final VoidCallback onDelete;
const _RecipeCard({ const _RecipeCard({
required this.recipe, required this.recipe,
required this.isCompact, required this.isMinimal,
required this.onTap, required this.onTap,
required this.onFavorite, required this.onFavouriteToggle,
required this.onEdit,
required this.onDelete,
}); });
void _openPhotoGallery(BuildContext context, int initialIndex) { void _openPhotoGallery(BuildContext context, int initialIndex) {
@ -388,448 +366,426 @@ class _RecipeCard extends StatelessWidget {
); );
} }
/// Builds an image widget using MediaService for authenticated access. Color _getRatingColor(int rating) {
Widget _buildRecipeImage(String imageUrl) { if (rating >= 4) return Colors.green;
final mediaService = ServiceLocator.instance.mediaService; if (rating >= 2) return Colors.orange;
if (mediaService == null) { return Colors.red;
return Image.network(imageUrl, fit: BoxFit.cover);
} }
// Try to extract asset ID from Immich URL (format: .../api/assets/{id}/original) @override
final assetIdMatch = RegExp(r'/api/assets/([^/]+)/').firstMatch(imageUrl); Widget build(BuildContext context) {
String? assetId; if (isMinimal) {
return _buildMinimalCard(context);
if (assetIdMatch != null) {
assetId = assetIdMatch.group(1);
} else { } else {
// For Blossom URLs, use the full URL return _buildFullCard(context);
assetId = imageUrl;
}
if (assetId != null) {
return FutureBuilder<Uint8List?>(
future: mediaService.fetchImageBytes(assetId, isThumbnail: true),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
color: Colors.grey.shade200,
child: const Center(
child: CircularProgressIndicator(),
),
);
}
if (snapshot.hasError || !snapshot.hasData || snapshot.data == null) {
return Container(
color: Colors.grey.shade200,
child: const Icon(Icons.broken_image, size: 48),
);
}
return Image.memory(
snapshot.data!,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
);
},
);
} }
return Image.network(
imageUrl,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
errorBuilder: (context, error, stackTrace) {
return Container(
color: Colors.grey.shade200,
child: const Icon(Icons.broken_image, size: 48),
);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.grey.shade200,
child: Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
),
);
},
);
} }
/// Builds a mosaic-style image grid for multiple images. Widget _buildMinimalCard(BuildContext context) {
Widget _buildMosaicImages(BuildContext context, List<String> imageUrls) { return Card(
if (imageUrls.isEmpty) return const SizedBox.shrink(); margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
if (imageUrls.length == 1) { elevation: 2,
return ClipRRect( shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.vertical(top: Radius.circular(12)), borderRadius: BorderRadius.circular(16),
child: AspectRatio(
aspectRatio: 16 / 9,
child: GestureDetector(
onTap: () => _openPhotoGallery(context, 0),
child: _buildRecipeImage(imageUrls.first),
),
), ),
); child: InkWell(
} onTap: onTap,
borderRadius: BorderRadius.circular(16),
return ClipRRect( child: Padding(
borderRadius: const BorderRadius.vertical(top: Radius.circular(12)), padding: const EdgeInsets.all(16),
child: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
final height = width * 0.6;
if (imageUrls.length == 2) {
return SizedBox(
height: height,
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Expanded( // Thumbnail (80x80)
child: GestureDetector( if (recipe.imageUrls.isNotEmpty)
GestureDetector(
onTap: () => _openPhotoGallery(context, 0), onTap: () => _openPhotoGallery(context, 0),
child: ClipRect( child: ClipRRect(
child: _buildRecipeImage(imageUrls[0]), borderRadius: BorderRadius.circular(12),
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
), ),
child: _buildRecipeImage(recipe.imageUrls.first),
), ),
), ),
Expanded( )
child: GestureDetector( else
onTap: () => _openPhotoGallery(context, 1), Container(
child: ClipRect( width: 80,
child: _buildRecipeImage(imageUrls[1]), height: 80,
), decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
), ),
child: Icon(
Icons.restaurant_menu,
color: Colors.grey[400],
size: 32,
), ),
],
), ),
); const SizedBox(width: 16),
} else if (imageUrls.length == 3) { // Content section
return SizedBox(
height: height,
child: Row(
children: [
Expanded( Expanded(
flex: 2, child: Column(
child: GestureDetector( crossAxisAlignment: CrossAxisAlignment.start,
onTap: () => _openPhotoGallery(context, 0), mainAxisAlignment: MainAxisAlignment.center,
child: ClipRect( children: [
child: _buildRecipeImage(imageUrls[0]), // Title
), Text(
recipe.title,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
fontSize: 16,
), ),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
Expanded( const SizedBox(height: 8),
child: Column( // Icons and rating row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Expanded( // Left side: Favorite icon
child: GestureDetector( InkWell(
onTap: () => _openPhotoGallery(context, 1), onTap: onFavouriteToggle,
child: ClipRect( borderRadius: BorderRadius.circular(20),
child: _buildRecipeImage(imageUrls[1]), child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(
recipe.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: recipe.isFavourite ? Colors.red : Colors.grey[600],
size: 22,
), ),
), ),
), ),
Expanded( // Right side: Rating badge
child: GestureDetector( Container(
onTap: () => _openPhotoGallery(context, 2), padding: const EdgeInsets.symmetric(
child: ClipRect( horizontal: 10,
child: _buildRecipeImage(imageUrls[2]), vertical: 6,
), ),
decoration: BoxDecoration(
color: _getRatingColor(recipe.rating).withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(20),
), ),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.star,
size: 18,
color: Colors.amber,
), ),
], const SizedBox(width: 4),
Text(
recipe.rating.toString(),
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
color: _getRatingColor(recipe.rating),
fontSize: 14,
), ),
), ),
], ],
), ),
);
} else {
return SizedBox(
height: height,
child: GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
padding: EdgeInsets.zero,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
childAspectRatio: 1.0,
),
itemCount: imageUrls.length > 4 ? 4 : imageUrls.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => _openPhotoGallery(context, index),
child: ClipRect(
child: Stack(
fit: StackFit.expand,
children: [
_buildRecipeImage(imageUrls[index]),
if (index == 3 && imageUrls.length > 4)
Container(
color: Colors.black.withValues(alpha: 0.5),
child: Center(
child: Text(
'+${imageUrls.length - 4}',
style: const TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
), ),
],
), ),
],
), ),
), ),
], ],
), ),
), ),
);
},
),
);
}
},
), ),
); );
} }
@override Widget _buildFullCard(BuildContext context) {
Widget build(BuildContext context) { // Show up to 3 images
if (isCompact) { final imagesToShow = recipe.imageUrls.take(3).toList();
return _buildCompactCard(context);
} else {
return _buildExpandedCard(context);
}
}
Widget _buildCompactCard(BuildContext context) {
return Card( return Card(
margin: const EdgeInsets.only(bottom: 8), margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
elevation: 1, elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: InkWell( child: InkWell(
onTap: onTap, onTap: onTap,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(16),
child: Padding( child: Column(
padding: const EdgeInsets.all(8), crossAxisAlignment: CrossAxisAlignment.start,
child: Row(
children: [ children: [
if (recipe.imageUrls.isNotEmpty) // Photo section with divided layout
GestureDetector( if (imagesToShow.isNotEmpty)
onTap: () => _openPhotoGallery(context, 0), ClipRRect(
child: ClipRRect( borderRadius: const BorderRadius.vertical(
borderRadius: BorderRadius.circular(6), top: Radius.circular(16),
child: SizedBox(
width: 80,
height: 80,
child: _buildRecipeImage(recipe.imageUrls.first),
),
), ),
child: _buildPhotoLayout(context, imagesToShow),
), ),
if (recipe.imageUrls.isNotEmpty) const SizedBox(width: 12), Padding(
Expanded( padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Title row with actions
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( Expanded(
child: Text( child: Text(
recipe.title, recipe.title,
style: const TextStyle( style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontSize: 14, fontWeight: FontWeight.w600,
fontWeight: FontWeight.bold, fontSize: 18,
), ),
maxLines: 1, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), ),
], const SizedBox(width: 8),
), // Action icons and rating grouped together
const SizedBox(height: 4),
Row( Row(
mainAxisAlignment: MainAxisAlignment.end, mainAxisSize: MainAxisSize.min,
children: [ children: [
IconButton( // Favorite icon
icon: Icon( InkWell(
recipe.isFavourite ? Icons.favorite : Icons.favorite_border, onTap: onFavouriteToggle,
color: recipe.isFavourite ? Colors.red : Colors.grey, borderRadius: BorderRadius.circular(20),
size: 24, child: Padding(
padding: const EdgeInsets.all(6),
child: Icon(
recipe.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: recipe.isFavourite ? Colors.red : Colors.grey[600],
size: 20,
),
), ),
onPressed: onFavorite,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
tooltip: recipe.isFavourite ? 'Remove from favorites' : 'Add to favorites',
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
// Rating badge
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
decoration: BoxDecoration(
color: _getRatingColor(recipe.rating).withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(18),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon( const Icon(
Icons.star, Icons.star,
size: 20, size: 16,
color: Colors.amber, color: Colors.amber,
), ),
const SizedBox(width: 4), const SizedBox(width: 4),
Text( Text(
recipe.rating.toString(), recipe.rating.toString(),
style: Theme.of(context).textTheme.titleSmall?.copyWith( style: TextStyle(
color: _getRatingColor(recipe.rating),
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 13,
), ),
), ),
], ],
), ),
],
),
), ),
PopupMenuButton(
icon: const Icon(Icons.more_vert, size: 20),
itemBuilder: (context) => [
PopupMenuItem(
child: const Row(
children: [
Icon(Icons.edit, size: 18),
SizedBox(width: 8),
Text('Edit'),
], ],
), ),
onTap: () => Future.delayed(
const Duration(milliseconds: 100),
onEdit,
),
),
PopupMenuItem(
child: const Row(
children: [
Icon(Icons.delete, size: 18, color: Colors.red),
SizedBox(width: 8),
Text('Delete', style: TextStyle(color: Colors.red)),
], ],
), ),
onTap: () => Future.delayed( // Description
const Duration(milliseconds: 100), if (recipe.description != null && recipe.description!.isNotEmpty) ...[
onDelete, const SizedBox(height: 6),
Text(
recipe.description!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[600],
fontSize: 14,
), ),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
], ],
),
], ],
), ),
), ),
],
),
), ),
); );
} }
Widget _buildExpandedCard(BuildContext context) { Widget _buildPhotoLayout(BuildContext context, List<String> imagesToShow) {
return Card( final imageCount = imagesToShow.length;
margin: const EdgeInsets.only(bottom: 16),
elevation: 2, return AspectRatio(
child: InkWell( aspectRatio: 2 / 1, // More compact than 16/9 (which is ~1.78/1)
onTap: onTap, child: Row(
borderRadius: BorderRadius.circular(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (recipe.imageUrls.isNotEmpty)
_buildMosaicImages(context, recipe.imageUrls),
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [ children: [
if (imageCount == 1)
// Single image: full width
Expanded( Expanded(
child: Text( child: _buildImageTile(context, imagesToShow[0], 0, showBorder: false),
recipe.title, )
style: const TextStyle( else if (imageCount == 2)
fontSize: 20, // Two images: split 50/50
fontWeight: FontWeight.bold, ...imagesToShow.asMap().entries.map((entry) {
), final index = entry.key;
), return Expanded(
child: _buildImageTile(
context,
entry.value,
index,
showBorder: index == 0,
), ),
if (recipe.rating > 0)
Row(
children: List.generate(5, (index) {
return Icon(
index < recipe.rating
? Icons.star
: Icons.star_border,
size: 16,
color: index < recipe.rating
? Colors.amber
: Colors.grey,
); );
}), })
), else
], // Three images: one large on left, two stacked on right
), Expanded(
if (recipe.description != null && recipe.description!.isNotEmpty) ...[ flex: 2,
const SizedBox(height: 8), child: _buildImageTile(
Text( context,
recipe.description!, imagesToShow[0],
style: TextStyle( 0,
fontSize: 14, showBorder: false,
color: Colors.grey.shade700,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
],
if (recipe.tags.isNotEmpty) ...[
const SizedBox(height: 8),
Wrap(
spacing: 4,
runSpacing: 4,
children: recipe.tags.map((tag) {
return Chip(
label: Text(
tag,
style: const TextStyle(fontSize: 12),
),
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity.compact,
);
}).toList(),
), ),
], if (imageCount == 3) ...[
const SizedBox(height: 12), const SizedBox(width: 2),
Row( Expanded(
mainAxisAlignment: MainAxisAlignment.end, child: Column(
children: [ children: [
IconButton( Expanded(
icon: Icon( child: _buildImageTile(
recipe.isFavourite ? Icons.favorite : Icons.favorite_border, context,
color: recipe.isFavourite ? Colors.red : Colors.grey, imagesToShow[1],
1,
showBorder: true,
), ),
onPressed: onFavorite,
tooltip: recipe.isFavourite ? 'Remove from favorites' : 'Add to favorites',
), ),
IconButton( const SizedBox(height: 2),
icon: const Icon(Icons.edit), Expanded(
onPressed: onEdit, child: _buildImageTile(
tooltip: 'Edit', context,
imagesToShow[2],
2,
showBorder: false,
), ),
IconButton(
icon: const Icon(Icons.delete),
onPressed: onDelete,
tooltip: 'Delete',
color: Colors.red,
), ),
], ],
), ),
),
],
], ],
), ),
);
}
Widget _buildImageTile(BuildContext context, String imageUrl, int index, {required bool showBorder}) {
return GestureDetector(
onTap: () => _openPhotoGallery(context, index),
child: Container(
decoration: showBorder
? BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.white.withValues(alpha: 0.3),
width: 2,
), ),
],
), ),
)
: null,
child: _buildRecipeImage(imageUrl),
),
);
}
Widget _buildRecipeImage(String imageUrl) {
final mediaService = ServiceLocator.instance.mediaService;
if (mediaService == null) {
return Image.network(imageUrl, fit: BoxFit.cover);
}
// Try to extract asset ID from Immich URL (format: .../api/assets/{id}/original)
final assetIdMatch = RegExp(r'/api/assets/([^/]+)/').firstMatch(imageUrl);
String? assetId;
if (assetIdMatch != null) {
assetId = assetIdMatch.group(1);
} else {
// For Blossom URLs, use the full URL
assetId = imageUrl;
}
if (assetId != null) {
return FutureBuilder<Uint8List?>(
future: mediaService.fetchImageBytes(assetId, isThumbnail: true),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
color: Colors.grey.shade200,
child: const Center(
child: CircularProgressIndicator(),
), ),
); );
} }
if (snapshot.hasError || !snapshot.hasData || snapshot.data == null) {
return Container(
color: Colors.grey.shade200,
child: const Icon(Icons.broken_image, size: 48),
);
} }
return Image.memory(
snapshot.data!,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
);
},
);
}
return Image.network(
imageUrl,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
errorBuilder: (context, error, stackTrace) {
return Container(
color: Colors.grey.shade200,
child: const Icon(Icons.broken_image, size: 48),
);
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
color: Colors.grey.shade200,
child: Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
),
);
},
);
}
}

220
lib/ui/recipes/recipes_screen.dart
Unescape View File

@ -423,7 +423,7 @@ class _RecipesScreenState extends State<RecipesScreen> {
), ),
) )
: ListView.builder( : ListView.builder(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: _filteredRecipes.length, itemCount: _filteredRecipes.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final recipe = _filteredRecipes[index]; final recipe = _filteredRecipes[index];
@ -491,108 +491,132 @@ class _RecipeCard extends StatelessWidget {
Widget _buildMinimalCard(BuildContext context) { Widget _buildMinimalCard(BuildContext context) {
return Card( return Card(
margin: const EdgeInsets.only(bottom: 12), margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
elevation: 1, elevation: 2,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(16),
), ),
child: InkWell( child: InkWell(
onTap: onTap, onTap: onTap,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(16),
child: Padding( child: Padding(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(16),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
// Small thumbnail (60x60) // Thumbnail (80x80)
if (recipe.imageUrls.isNotEmpty) if (recipe.imageUrls.isNotEmpty)
GestureDetector( GestureDetector(
onTap: () => _openPhotoGallery(context, 0), onTap: () => _openPhotoGallery(context, 0),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(12),
child: SizedBox( child: Container(
width: 60, width: 80,
height: 60, height: 80,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(12),
),
child: _buildRecipeImage(recipe.imageUrls.first), child: _buildRecipeImage(recipe.imageUrls.first),
), ),
), ),
) )
else else
Container( Container(
width: 60, width: 80,
height: 60, height: 80,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[200], color: Colors.grey[200],
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(12),
), ),
child: const Icon( child: Icon(
Icons.restaurant_menu, Icons.restaurant_menu,
color: Colors.grey, color: Colors.grey[400],
size: 32,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 16),
// Content // Content section
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Row( // Title
children: [ Text(
Expanded(
child: Text(
recipe.title, recipe.title,
style: Theme.of(context) style: Theme.of(context).textTheme.titleMedium?.copyWith(
.textTheme fontWeight: FontWeight.w600,
.titleMedium fontSize: 16,
?.copyWith(
fontWeight: FontWeight.bold,
), ),
maxLines: 1, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), const SizedBox(height: 8),
], // Icons and rating row
), Row(
const SizedBox(height: 4), mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Left side: Action icons
Row( Row(
mainAxisAlignment: MainAxisAlignment.end, mainAxisSize: MainAxisSize.min,
children: [ children: [
// Favorite icon
InkWell(
onTap: onFavouriteToggle,
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(
recipe.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: recipe.isFavourite ? Colors.red : Colors.grey[600],
size: 22,
),
),
),
const SizedBox(width: 8),
// Bookmark icon // Bookmark icon
FutureBuilder<bool>( FutureBuilder<bool>(
future: _isRecipeBookmarked(recipe.id), future: _isRecipeBookmarked(recipe.id),
builder: (context, snapshot) { builder: (context, snapshot) {
final isBookmarked = snapshot.data ?? false; final isBookmarked = snapshot.data ?? false;
return IconButton( return InkWell(
icon: Icon( onTap: onBookmarkToggle,
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(
isBookmarked isBookmarked
? Icons.bookmark ? Icons.bookmark
: Icons.bookmark_border, : Icons.bookmark_border,
color: isBookmarked ? Colors.blue : Colors.grey, color: isBookmarked ? Colors.blue : Colors.grey[600],
size: 24, size: 22,
),
), ),
onPressed: onBookmarkToggle,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
); );
}, },
), ),
const SizedBox(width: 4), ],
// Favorite icon ),
IconButton( // Right side: Rating badge
icon: Icon( Container(
recipe.isFavourite padding: const EdgeInsets.symmetric(
? Icons.favorite horizontal: 10,
: Icons.favorite_border, vertical: 6,
color: recipe.isFavourite ? Colors.red : Colors.grey,
size: 24,
), ),
onPressed: onFavouriteToggle, decoration: BoxDecoration(
padding: EdgeInsets.zero, color: _getRatingColor(recipe.rating).withValues(alpha: 0.15),
constraints: const BoxConstraints(), borderRadius: BorderRadius.circular(20),
), ),
const SizedBox(width: 8), child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon( const Icon(
Icons.star, Icons.star,
size: 20, size: 18,
color: Colors.amber, color: Colors.amber,
), ),
const SizedBox(width: 4), const SizedBox(width: 4),
@ -600,6 +624,11 @@ class _RecipeCard extends StatelessWidget {
recipe.rating.toString(), recipe.rating.toString(),
style: Theme.of(context).textTheme.titleSmall?.copyWith( style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: _getRatingColor(recipe.rating),
fontSize: 14,
),
),
],
), ),
), ),
], ],
@ -619,14 +648,14 @@ class _RecipeCard extends StatelessWidget {
final imagesToShow = recipe.imageUrls.take(3).toList(); final imagesToShow = recipe.imageUrls.take(3).toList();
return Card( return Card(
margin: const EdgeInsets.only(bottom: 16), margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
elevation: 1, elevation: 2,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(16),
), ),
child: InkWell( child: InkWell(
onTap: onTap, onTap: onTap,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -634,70 +663,82 @@ class _RecipeCard extends StatelessWidget {
if (imagesToShow.isNotEmpty) if (imagesToShow.isNotEmpty)
ClipRRect( ClipRRect(
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: Radius.circular(12), top: Radius.circular(16),
), ),
child: _buildPhotoLayout(context, imagesToShow), child: _buildPhotoLayout(context, imagesToShow),
), ),
Padding( Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Title row with actions
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( Expanded(
child: Text( child: Text(
recipe.title, recipe.title,
style: Theme.of(context).textTheme.titleLarge?.copyWith( style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.w600,
fontSize: 18,
), ),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 8),
// Action icons and rating grouped together
Row(
mainAxisSize: MainAxisSize.min,
children: [
// Favorite icon
InkWell(
onTap: onFavouriteToggle,
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(6),
child: Icon(
recipe.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: recipe.isFavourite ? Colors.red : Colors.grey[600],
size: 20,
),
),
),
const SizedBox(width: 4),
// Bookmark icon // Bookmark icon
FutureBuilder<bool>( FutureBuilder<bool>(
future: _isRecipeBookmarked(recipe.id), future: _isRecipeBookmarked(recipe.id),
builder: (context, snapshot) { builder: (context, snapshot) {
final isBookmarked = snapshot.data ?? false; final isBookmarked = snapshot.data ?? false;
return IconButton( return InkWell(
icon: Icon( onTap: onBookmarkToggle,
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.all(6),
child: Icon(
isBookmarked isBookmarked
? Icons.bookmark ? Icons.bookmark
: Icons.bookmark_border, : Icons.bookmark_border,
color: isBookmarked ? Colors.blue : Colors.grey[600], color: isBookmarked ? Colors.blue : Colors.grey[600],
size: 20, size: 20,
), ),
onPressed: onBookmarkToggle, ),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
); );
}, },
), ),
const SizedBox(width: 4),
// Favorite icon
IconButton(
icon: Icon(
recipe.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: recipe.isFavourite ? Colors.red : Colors.grey[600],
size: 20,
),
onPressed: onFavouriteToggle,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
),
const SizedBox(width: 8), const SizedBox(width: 8),
// Rating badge
Container( Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 12, horizontal: 10,
vertical: 6, vertical: 5,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _getRatingColor(recipe.rating).withValues(alpha: 0.1), color: _getRatingColor(recipe.rating).withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(18),
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -713,6 +754,7 @@ class _RecipeCard extends StatelessWidget {
style: TextStyle( style: TextStyle(
color: _getRatingColor(recipe.rating), color: _getRatingColor(recipe.rating),
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 13,
), ),
), ),
], ],
@ -720,12 +762,16 @@ class _RecipeCard extends StatelessWidget {
), ),
], ],
), ),
],
),
// Description
if (recipe.description != null && recipe.description!.isNotEmpty) ...[ if (recipe.description != null && recipe.description!.isNotEmpty) ...[
const SizedBox(height: 8), const SizedBox(height: 6),
Text( Text(
recipe.description!, recipe.description!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith( style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey[600], color: Colors.grey[600],
fontSize: 14,
), ),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -744,7 +790,7 @@ class _RecipeCard extends StatelessWidget {
final imageCount = imagesToShow.length; final imageCount = imagesToShow.length;
return AspectRatio( return AspectRatio(
aspectRatio: 16 / 9, aspectRatio: 2 / 1, // More compact than 16/9 (which is ~1.78/1)
child: Row( child: Row(
children: [ children: [
if (imageCount == 1) if (imageCount == 1)

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.