nilsjohan/recipe-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor RecipesScreen and RecipesViewNotifier to support dynamic view modes and column selection

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-25 07:09:15 +02:00
parent fe3d8581a8
commit ba4e931f5c
3 changed files with 110 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flutter/lib/features/recipes/presentation/recipes_screen.dart
+50 -32
View File
@@ -13,10 +13,8 @@ class RecipesScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final recipesAsync = ref.watch(recipesProvider);
final columns = ref.watch(recipesGridProvider).maybeWhen(
data: (v) => v,
orElse: () => 2,
);
final view = ref.watch(recipesViewProvider).valueOrNull ??
(mode: RecipesViewMode.grid, columns: 2);
return Stack(
children: [
@@ -34,36 +32,56 @@ class RecipesScreen extends ConsumerWidget {
);
}
return GridView.builder(
padding: const EdgeInsets.only(bottom: 88),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: recipes.length,
itemBuilder: (context, index) {
final recipe = recipes[index];
return GestureDetector(
onTap: () => context.push('/recipes/${recipe.id}'),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.grey[200],
image: recipe.imageUrl != null
? DecorationImage(
image: NetworkImage(recipe.imageUrl!),
fit: BoxFit.cover,
)
if (view.mode == RecipesViewMode.grid) {
return GridView.builder(
padding: const EdgeInsets.only(bottom: 88),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: view.columns,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemCount: recipes.length,
itemBuilder: (context, index) {
final recipe = recipes[index];
return GestureDetector(
onTap: () => context.push('/recipes/${recipe.id}'),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.grey[200],
image: recipe.imageUrl != null
? DecorationImage(
image: NetworkImage(recipe.imageUrl!),
fit: BoxFit.cover,
)
: null,
),
child: recipe.imageUrl == null
? const Center(child: Icon(Icons.restaurant, size: 32))
: null,
),
child: recipe.imageUrl == null
? const Center(child: Icon(Icons.restaurant, size: 32))
: null,
),
);
},
);
);
},
);
} else {
return ListView.builder(
padding: const EdgeInsets.only(bottom: 88),
itemCount: recipes.length,
itemBuilder: (context, index) {
final recipe = recipes[index];
return ListTile(
leading: recipe.imageUrl != null
? CircleAvatar(
backgroundImage: NetworkImage(recipe.imageUrl!),
)
: const CircleAvatar(child: Icon(Icons.restaurant)),
title: Text(recipe.name),
subtitle: Text(recipe.description ?? ''),
onTap: () => context.push('/recipes/${recipe.id}'),
);
},
);
}
},
),
Positioned(