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/core/ui/app_shell.dart
+27 -2
View File
@@ -4,6 +4,9 @@ import 'package:go_router/go_router.dart';
import '../../features/auth/data/auth_providers.dart';
import '../../features/recipes/data/recipes_grid_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
const _adminDestination = _AppDestination(
path: '/admin',
@@ -102,12 +105,30 @@ class AppShell extends ConsumerWidget {
appBar: AppBar(
title: Text(selectedDestination.title),
actions: [
if (isRecipesRoute)
if (isRecipesRoute) ...existing code...
Consumer(
builder: (context, ref, child) {
final view = ref.watch(recipesViewProvider).valueOrNull ??
(mode: RecipesViewMode.grid, columns: 2);
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
tooltip: view.mode == RecipesViewMode.grid
? 'Visa som lista'
: 'Visa som grid',
icon: Icon(view.mode == RecipesViewMode.grid
? Icons.view_list
: Icons.grid_view),
onPressed: () =>
ref.read(recipesViewProvider.notifier).toggleMode(),
),
if (view.mode == RecipesViewMode.grid)
PopupMenuButton<int>(
icon: const Icon(Icons.grid_view),
tooltip: 'Välj antal kolumner',
onSelected: (columns) =>
ref.read(recipesGridProvider.notifier).setColumns(columns),
ref.read(recipesViewProvider.notifier).setColumns(columns),
itemBuilder: (context) => const [
PopupMenuItem(value: 2, child: Text('2 kolumner')),
PopupMenuItem(value: 4, child: Text('4 kolumner')),
@@ -115,6 +136,10 @@ class AppShell extends ConsumerWidget {
PopupMenuItem(value: 8, child: Text('8 kolumner')),
],
),
],
);
},
),
IconButton(
tooltip: 'Logga ut',
icon: const Icon(Icons.logout),
flutter/lib/features/recipes/data/recipes_grid_provider.dart
+23 -8
View File
@@ -1,21 +1,36 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
const _prefsKey = 'recipes_grid_columns';
enum RecipesViewMode { grid, list }
class RecipesViewNotifier extends AsyncNotifier<({RecipesViewMode mode, int columns})> {
static const _modeKey = 'recipes_view_mode';
static const _columnsKey = 'recipes_grid_columns';
class RecipesGridNotifier extends AsyncNotifier<int> {
@override
Future<int> build() async {
Future<({RecipesViewMode mode, int columns})> build() async {
final prefs = await SharedPreferences.getInstance();
return prefs.getInt(_prefsKey) ?? 2;
final mode = RecipesViewMode.values[prefs.getInt(_modeKey) ?? 0];
final columns = prefs.getInt(_columnsKey) ?? 2;
return (mode: mode, columns: columns);
}
Future<void> toggleMode() async {
final prefs = await SharedPreferences.getInstance();
final current = state.valueOrNull ?? (mode: RecipesViewMode.grid, columns: 2);
final newMode = current.mode == RecipesViewMode.grid ? RecipesViewMode.list : RecipesViewMode.grid;
await prefs.setInt(_modeKey, newMode.index);
state = AsyncData((mode: newMode, columns: current.columns));
}
Future<void> setColumns(int columns) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setInt(_prefsKey, columns);
state = AsyncData(columns);
final current = state.valueOrNull ?? (mode: RecipesViewMode.grid, columns: 2);
await prefs.setInt(_columnsKey, columns);
state = AsyncData((mode: current.mode, columns: columns));
}
}
final recipesGridProvider =
AsyncNotifierProvider<RecipesGridNotifier, int>(RecipesGridNotifier.new);
final recipesViewProvider =
AsyncNotifierProvider<RecipesViewNotifier, ({RecipesViewMode mode, int columns})>(
RecipesViewNotifier.new);
flutter/lib/features/recipes/presentation/recipes_screen.dart
+23 -5
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,10 +32,11 @@ class RecipesScreen extends ConsumerWidget {
);
}
if (view.mode == RecipesViewMode.grid) {
return GridView.builder(
padding: const EdgeInsets.only(bottom: 88),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisCount: view.columns,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
@@ -64,6 +63,25 @@ class RecipesScreen extends ConsumerWidget {
);
},
);
} 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(