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

feat: implement grid layout for recipes with column selection and improve pantry product picker

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Nils-Johan Gynther
2026-04-24 23:34:34 +02:00
parent 4919384039
commit fe3d8581a8
6 changed files with 110 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flutter/lib/features/recipes/presentation/recipes_screen.dart
+45 -90
View File
@@ -1,104 +1,55 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../../core/api/api_error_mapper.dart';
import '../../../core/ui/async_state_views.dart';
import '../data/recipe_providers.dart';
import '../data/recipes_grid_provider.dart';
class RecipesScreen extends ConsumerStatefulWidget {
class RecipesScreen extends ConsumerWidget {
const RecipesScreen({super.key});
@override
ConsumerState<RecipesScreen> createState() => _RecipesScreenState();
}
class _RecipesScreenState extends ConsumerState<RecipesScreen> {
int _selectedColumns = 2;
@override
void initState() {
super.initState();
_loadSelectedColumns();
}
Future<void> _loadSelectedColumns() async {
final prefs = await SharedPreferences.getInstance();
setState(() {
_selectedColumns = prefs.getInt('selectedColumns') ?? 2;
});
}
Future<void> _saveSelectedColumns(int columns) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setInt('selectedColumns', columns);
}
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final recipesAsync = ref.watch(recipesProvider);
final columns = ref.watch(recipesGridProvider).maybeWhen(
data: (v) => v,
orElse: () => 2,
);
return Scaffold(
appBar: AppBar(
title: const Text('Recept'),
actions: [
PopupMenuButton<int>(
icon: const Icon(Icons.grid_view),
tooltip: 'Välj antal kolumner',
onSelected: (int columns) {
setState(() {
_selectedColumns = columns;
});
_saveSelectedColumns(columns);
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<int>>[
const PopupMenuItem<int>(
value: 2,
child: Text('2 kolumner'),
),
const PopupMenuItem<int>(
value: 4,
child: Text('4 kolumner'),
),
const PopupMenuItem<int>(
value: 6,
child: Text('6 kolumner'),
),
const PopupMenuItem<int>(
value: 8,
child: Text('8 kolumner'),
),
],
return Stack(
children: [
recipesAsync.when(
loading: () => const LoadingStateView(label: 'Laddar recept...'),
error: (error, _) => ErrorStateView(
message: mapErrorToUserMessage(error, context),
onRetry: () => ref.invalidate(recipesProvider),
),
],
),
body: recipesAsync.when(
loading: () => const LoadingStateView(label: 'Laddar recept...'),
error: (error, _) => ErrorStateView(
message: mapErrorToUserMessage(error, context),
onRetry: () => ref.invalidate(recipesProvider),
),
data: (recipes) {
if (recipes.isEmpty) {
return const EmptyStateView(
title: 'Inga recept hittades',
description: 'Lägg till ett recept för att komma igång.',
);
}
data: (recipes) {
if (recipes.isEmpty) {
return const EmptyStateView(
title: 'Inga recept hittades',
description: 'Lägg till ett recept för att komma igång.',
);
}
return GridView.count(
crossAxisCount: _selectedColumns,
children: List.generate(
recipes.length,
(index) {
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(
margin: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.grey[200],
image: recipe.imageUrl != null
? DecorationImage(
image: NetworkImage(recipe.imageUrl!),
@@ -107,20 +58,24 @@ class _RecipesScreenState extends ConsumerState<RecipesScreen> {
: null,
),
child: recipe.imageUrl == null
? const Center(child: Icon(Icons.restaurant))
? const Center(child: Icon(Icons.restaurant, size: 32))
: null,
),
);
},
),
);
},
),
floatingActionButton: FloatingActionButton(
tooltip: 'Nytt recept',
onPressed: () => context.push('/recipes/create'),
child: const Icon(Icons.add),
),
);
},
),
Positioned(
right: 16,
bottom: 16,
child: FloatingActionButton(
tooltip: 'Nytt recept',
onPressed: () => context.push('/recipes/create'),
child: const Icon(Icons.add),
),
),
],
);
}
}