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

improvements in ui

Browse Source
master
gitea 2 months ago
parent 9743f9a8ec
commit 9061470e9b
2 changed files with 607 additions and 131 deletions
Show Stats Download Patch File Download Diff File

502
lib/ui/bookmarks/bookmarks_screen.dart
Unescape View File

@ -23,12 +23,25 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
String? _errorMessage; String? _errorMessage;
RecipeService? _recipeService; RecipeService? _recipeService;
bool _wasLoggedIn = false; bool _wasLoggedIn = false;
String _searchQuery = '';
final TextEditingController _searchController = TextEditingController();
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_checkLoginState(); _checkLoginState();
_initializeService(); _initializeService();
_searchController.addListener(() {
setState(() {
_searchQuery = _searchController.text.toLowerCase();
});
});
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
} }
@override @override
@ -123,6 +136,29 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
} }
} }
List<BookmarkCategory> _getFilteredCategories() {
if (_searchQuery.isEmpty) {
return _categories;
}
return _categories.where((category) {
final recipes = _recipesByCategory[category.id] ?? [];
return category.name.toLowerCase().contains(_searchQuery) ||
recipes.any((recipe) =>
recipe.title.toLowerCase().contains(_searchQuery) ||
(recipe.description?.toLowerCase().contains(_searchQuery) ?? false));
}).toList();
}
List<RecipeModel> _getFilteredRecipes(String categoryId) {
final recipes = _recipesByCategory[categoryId] ?? [];
if (_searchQuery.isEmpty) {
return recipes;
}
return recipes.where((recipe) =>
recipe.title.toLowerCase().contains(_searchQuery) ||
(recipe.description?.toLowerCase().contains(_searchQuery) ?? false)).toList();
}
void _viewRecipe(RecipeModel recipe) { void _viewRecipe(RecipeModel recipe) {
Navigator.push( Navigator.push(
context, context,
@ -158,8 +194,36 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
if (!isLoggedIn) { if (!isLoggedIn) {
return Scaffold( return Scaffold(
appBar: AppBar(title: const Text('Bookmarks')), appBar: AppBar(title: const Text('Bookmarks')),
body: const Center( body: Center(
child: Text('Please log in to view bookmarks'), child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.bookmark_border,
size: 80,
color: Colors.grey.shade400,
),
const SizedBox(height: 24),
Text(
'Please log in to view bookmarks',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: Colors.grey.shade700,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
'Sign in to save and organize your favorite recipes',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey.shade600,
),
textAlign: TextAlign.center,
),
],
),
),
), ),
); );
} }
@ -175,86 +239,330 @@ class _BookmarksScreenState extends State<BookmarksScreen> {
return Scaffold( return Scaffold(
appBar: AppBar(title: const Text('Bookmarks')), appBar: AppBar(title: const Text('Bookmarks')),
body: Center( body: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text(_errorMessage!), Icon(
Icons.error_outline,
size: 64,
color: Colors.red.shade300,
),
const SizedBox(height: 16), const SizedBox(height: 16),
ElevatedButton( Text(
'Oops! Something went wrong',
style: Theme.of(context).textTheme.titleLarge,
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
_errorMessage!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey.shade600,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
ElevatedButton.icon(
onPressed: _loadBookmarks, onPressed: _loadBookmarks,
child: const Text('Retry'), icon: const Icon(Icons.refresh),
label: const Text('Retry'),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
),
), ),
], ],
), ),
), ),
),
); );
} }
if (_categories.isEmpty) { if (_categories.isEmpty) {
return Scaffold( return Scaffold(
appBar: AppBar(title: const Text('Bookmarks')), appBar: AppBar(title: const Text('Bookmarks')),
body: const Center( body: Center(
child: Text( child: Padding(
'No bookmark categories yet.\nBookmark a recipe to get started!', padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.bookmark_add_outlined,
size: 100,
color: Colors.grey.shade300,
),
const SizedBox(height: 24),
Text(
'No bookmark categories yet',
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: Colors.grey.shade700,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
Text(
'Bookmark a recipe to organize your favorites into categories',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Colors.grey.shade600,
),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
],
),
),
), ),
); );
} }
final filteredCategories = _getFilteredCategories();
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('Bookmarks'), title: const Text('Bookmarks'),
actions: [ elevation: 0,
],
), ),
body: RefreshIndicator( body: RefreshIndicator(
onRefresh: _loadBookmarks, onRefresh: _loadBookmarks,
child: ListView.builder( child: CustomScrollView(
slivers: [
// Search bar
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
child: TextField(
controller: _searchController,
decoration: InputDecoration(
hintText: 'Search bookmarks...',
prefixIcon: const Icon(Icons.search),
suffixIcon: _searchQuery.isNotEmpty
? IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
_searchController.clear();
},
)
: null,
filled: true,
fillColor: Theme.of(context).brightness == Brightness.dark
? Colors.grey[800]
: Colors.grey[100],
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
),
),
),
// Categories list
if (filteredCategories.isEmpty && _searchQuery.isNotEmpty)
SliverFillRemaining(
hasScrollBody: false,
child: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.search_off,
size: 64,
color: Colors.grey.shade400,
),
const SizedBox(height: 16),
Text(
'No results found',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: Colors.grey.shade700,
),
),
const SizedBox(height: 8),
Text(
'Try a different search term',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey.shade600,
),
),
],
),
),
),
)
else
SliverPadding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
itemCount: _categories.length, sliver: SliverList(
itemBuilder: (context, index) { delegate: SliverChildBuilderDelegate(
final category = _categories[index]; (context, index) {
final recipes = _recipesByCategory[category.id] ?? []; final category = filteredCategories[index];
final recipes = _getFilteredRecipes(category.id);
return _CategoryCard(
category: category,
recipes: recipes,
categoryColor: category.color != null
? _parseColor(category.color!)
: Theme.of(context).primaryColor,
onRecipeTap: _viewRecipe,
onPhotoTap: _openPhotoGallery,
);
},
childCount: filteredCategories.length,
),
),
),
],
),
),
);
}
}
/// Modern category card widget
class _CategoryCard extends StatefulWidget {
final BookmarkCategory category;
final List<RecipeModel> recipes;
final Color categoryColor;
final Function(RecipeModel) onRecipeTap;
final Function(List<String>, int) onPhotoTap;
const _CategoryCard({
required this.category,
required this.recipes,
required this.categoryColor,
required this.onRecipeTap,
required this.onPhotoTap,
});
@override
State<_CategoryCard> createState() => _CategoryCardState();
}
class _CategoryCardState extends State<_CategoryCard> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Card( return Card(
margin: const EdgeInsets.only(bottom: 16), margin: const EdgeInsets.only(bottom: 16),
child: ExpansionTile( elevation: 2,
leading: category.color != null shape: RoundedRectangleBorder(
? Container( borderRadius: BorderRadius.circular(16),
width: 32, ),
height: 32, child: Column(
children: [
InkWell(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Category icon/color indicator
Container(
width: 48,
height: 48,
decoration: BoxDecoration( decoration: BoxDecoration(
color: _parseColor(category.color!), color: widget.categoryColor.withOpacity(0.2),
shape: BoxShape.circle, borderRadius: BorderRadius.circular(12),
border: Border.all(
color: widget.categoryColor,
width: 2,
),
),
child: Icon(
Icons.bookmark,
color: widget.categoryColor,
size: 24,
),
),
const SizedBox(width: 16),
// Category info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.category.name,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Row(
children: [
Icon(
Icons.restaurant_menu,
size: 16,
color: Colors.grey.shade600,
),
const SizedBox(width: 4),
Text(
'${widget.recipes.length} recipe${widget.recipes.length != 1 ? 's' : ''}',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey.shade600,
),
),
],
),
],
),
),
// Expand icon
Icon(
_isExpanded ? Icons.expand_less : Icons.expand_more,
color: Colors.grey.shade600,
),
],
),
),
),
// Recipes list
if (_isExpanded)
AnimatedSize(
duration: const Duration(milliseconds: 200),
child: widget.recipes.isEmpty
? Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Icon(
Icons.info_outline,
size: 20,
color: Colors.grey.shade400,
),
const SizedBox(width: 8),
Text(
'No recipes in this category',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.grey.shade600,
),
),
],
), ),
) )
: const Icon(Icons.bookmark), : Column(
title: Text( children: widget.recipes.map((recipe) {
category.name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text('${recipes.length} recipe(s)'),
children: recipes.isEmpty
? [
const ListTile(
title: Text('No recipes in this category'),
)
]
: recipes.map((recipe) {
return _BookmarkRecipeItem( return _BookmarkRecipeItem(
recipe: recipe, recipe: recipe,
onTap: () => _viewRecipe(recipe), onTap: () => widget.onRecipeTap(recipe),
onPhotoTap: (index) => _openPhotoGallery( onPhotoTap: (index) => widget.onPhotoTap(
recipe.imageUrls, recipe.imageUrls,
index, index,
), ),
); );
}).toList(), }).toList(),
), ),
);
},
), ),
],
), ),
); );
} }
@ -353,58 +661,130 @@ class _BookmarkRecipeItem extends StatelessWidget {
); );
} }
Color _getRatingColor(double rating) {
if (rating >= 4.5) return Colors.green;
if (rating >= 3.5) return Colors.orange;
if (rating >= 2.5) return Colors.amber;
return Colors.red;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ListTile( return InkWell(
leading: recipe.imageUrls.isNotEmpty onTap: onTap,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Recipe image
recipe.imageUrls.isNotEmpty
? GestureDetector( ? GestureDetector(
onTap: () => onPhotoTap(0), onTap: () => onPhotoTap(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.shade200,
borderRadius: BorderRadius.circular(12),
),
child: _buildRecipeImage(recipe.imageUrls.first), child: _buildRecipeImage(recipe.imageUrls.first),
), ),
), ),
) )
: Container( : Container(
width: 60, width: 80,
height: 60, height: 80,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[300], color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(12),
), ),
child: const Icon(Icons.restaurant_menu), child: Icon(
Icons.restaurant_menu,
color: Colors.grey.shade400,
size: 32,
), ),
title: Text(
recipe.title,
style: const TextStyle(fontWeight: FontWeight.w500),
), ),
subtitle: Column( const SizedBox(width: 16),
// Recipe info
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if (recipe.description != null && recipe.description!.isNotEmpty) Text(
recipe.title,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
if (recipe.description != null && recipe.description!.isNotEmpty) ...[
const SizedBox(height: 6),
Text( Text(
recipe.description!, recipe.description!,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.grey.shade600,
),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 4), ],
const SizedBox(height: 8),
Row( Row(
children: [ children: [
const Icon(Icons.star, size: 16, color: Colors.amber), // Rating badge
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: _getRatingColor(recipe.rating.toDouble()).withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.star,
size: 14,
color: Colors.amber,
),
const SizedBox(width: 4), const SizedBox(width: 4),
Text(recipe.rating.toString()), Text(
recipe.rating.toString(),
style: Theme.of(context).textTheme.labelSmall?.copyWith(
fontWeight: FontWeight.bold,
color: _getRatingColor(recipe.rating.toDouble()),
),
),
],
),
),
if (recipe.isFavourite) ...[ if (recipe.isFavourite) ...[
const SizedBox(width: 12), const SizedBox(width: 8),
const Icon(Icons.favorite, size: 16, color: Colors.red), Icon(
Icons.favorite,
size: 16,
color: Colors.red.shade400,
),
], ],
], ],
), ),
], ],
), ),
onTap: onTap, ),
// Chevron icon
Icon(
Icons.chevron_right,
color: Colors.grey.shade400,
),
],
),
),
); );
} }
} }

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

@ -1173,7 +1173,10 @@ class _RecipeCard extends StatelessWidget {
Widget _buildRecipeImage(String imageUrl) { Widget _buildRecipeImage(String imageUrl) {
final mediaService = ServiceLocator.instance.mediaService; final mediaService = ServiceLocator.instance.mediaService;
if (mediaService == null) { if (mediaService == null) {
return Image.network(imageUrl, fit: BoxFit.cover); return _FadeInImageWidget(
imageUrl: imageUrl,
isNetwork: true,
);
} }
// Try to extract asset ID from Immich URL (format: .../api/assets/{id}/original) // Try to extract asset ID from Immich URL (format: .../api/assets/{id}/original)
@ -1205,18 +1208,102 @@ class _RecipeCard extends StatelessWidget {
); );
} }
return Image.memory( return _FadeInImageWidget(
snapshot.data!, imageBytes: snapshot.data!,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
); );
}, },
); );
} }
return Image.network( return _FadeInImageWidget(
imageUrl, imageUrl: imageUrl,
isNetwork: true,
);
}
Widget _buildVideoThumbnail(String videoUrl) {
return _VideoThumbnailPreview(videoUrl: videoUrl);
}
Color _getRatingColor(int rating) {
if (rating >= 4) return Colors.green;
if (rating >= 2) return Colors.orange;
return Colors.red;
}
}
/// Widget that displays an image with a smooth fade-in animation.
class _FadeInImageWidget extends StatefulWidget {
final String? imageUrl;
final Uint8List? imageBytes;
final bool isNetwork;
const _FadeInImageWidget({
this.imageUrl,
this.imageBytes,
this.isNetwork = false,
}) : assert(imageUrl != null || imageBytes != null, 'Either imageUrl or imageBytes must be provided');
@override
State<_FadeInImageWidget> createState() => _FadeInImageWidgetState();
}
class _FadeInImageWidgetState extends State<_FadeInImageWidget>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _fadeAnimation;
bool _imageLoaded = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_fadeAnimation = CurvedAnimation(
parent: _controller,
curve: Curves.easeOut,
);
// Start with opacity 0
_controller.value = 0.0;
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onImageLoaded() {
if (!_imageLoaded && mounted) {
_imageLoaded = true;
_controller.forward();
}
}
@override
Widget build(BuildContext context) {
Widget imageWidget;
if (widget.imageBytes != null) {
// For memory images, use frameBuilder to detect when image is ready
imageWidget = Image.memory(
widget.imageBytes!,
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
if ((wasSynchronouslyLoaded || frame != null) && !_imageLoaded) {
WidgetsBinding.instance.addPostFrameCallback((_) => _onImageLoaded());
}
return child;
},
);
} else if (widget.imageUrl != null) {
// For network images, use frameBuilder to detect when image is ready
imageWidget = Image.network(
widget.imageUrl!,
fit: BoxFit.cover, fit: BoxFit.cover,
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
@ -1227,7 +1314,10 @@ class _RecipeCard extends StatelessWidget {
); );
}, },
loadingBuilder: (context, child, loadingProgress) { loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child; if (loadingProgress == null) {
// Image is loaded, return child and let frameBuilder handle fade-in
return child;
}
return Container( return Container(
color: Colors.grey.shade200, color: Colors.grey.shade200,
child: Center( child: Center(
@ -1240,21 +1330,27 @@ class _RecipeCard extends StatelessWidget {
), ),
); );
}, },
); frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
if ((wasSynchronouslyLoaded || frame != null) && !_imageLoaded) {
WidgetsBinding.instance.addPostFrameCallback((_) => _onImageLoaded());
} }
return child;
Widget _buildVideoThumbnail(String videoUrl) { },
return _VideoThumbnailPreview(videoUrl: videoUrl); );
} else {
return Container(
color: Colors.grey.shade200,
child: const Icon(Icons.image_not_supported, size: 32, color: Colors.grey),
);
} }
Color _getRatingColor(int rating) { return FadeTransition(
if (rating >= 4) return Colors.green; opacity: _fadeAnimation,
if (rating >= 2) return Colors.orange; child: imageWidget,
return Colors.red; );
} }
} }
/// Widget that displays a video thumbnail preview with a few seconds of playback. /// Widget that displays a video thumbnail preview with a few seconds of playback.
class _VideoThumbnailPreview extends StatefulWidget { class _VideoThumbnailPreview extends StatefulWidget {
final String videoUrl; final String videoUrl;

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.