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

feat: enhance product picker with searchable bottom sheet and improve recipe list item layout

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-25 07:31:28 +02:00
parent 46de546f9f
commit 5a85bd4526
3 changed files with 128 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flutter/lib/core/ui/app_shell.dart
-3
View File
@@ -4,9 +4,6 @@ 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',
flutter/lib/core/ui/product_picker_field.dart
+93 -1
View File
@@ -81,6 +81,98 @@ class ProductPickerField extends StatelessWidget {
}
Future<void> _openPicker(BuildContext context) async {
// Implementera logik för att öppna en bottom sheet för produktval
final selectedId = await showModalBottomSheet<int?>(
context: context,
isScrollControlled: true,
useSafeArea: true,
builder: (sheetContext) {
var query = '';
return StatefulBuilder(
builder: (context, setModalState) {
final normalizedQuery = query.trim().toLowerCase();
final filtered = normalizedQuery.isEmpty
? products
: products
.where(
(p) => p.name.toLowerCase().contains(normalizedQuery),
)
.toList();
return SizedBox(
height: MediaQuery.of(context).size.height * 0.85,
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Row(
children: [
Expanded(
child: Text(
label,
style: Theme.of(context).textTheme.titleMedium,
),
),
TextButton.icon(
onPressed: () => Navigator.pop(context, null),
icon: const Icon(Icons.clear),
label: const Text('Rensa'),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
child: TextField(
autofocus: true,
decoration: const InputDecoration(
hintText: 'Sök produkt...',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(),
),
onChanged: (text) {
setModalState(() {
query = text;
});
},
),
),
const Divider(height: 1),
Expanded(
child: filtered.isEmpty
? const Center(
child: Text('Inga produkter matchar sökningen.'),
)
: ListView.separated(
itemCount: filtered.length,
separatorBuilder: (_, __) => const Divider(height: 1),
itemBuilder: (context, index) {
final product = filtered[index];
final isSelected = product.id == value;
return ListTile(
selected: isSelected,
title: Text(product.name),
trailing: isSelected
? const Icon(Icons.check)
: null,
onTap: () => Navigator.pop(context, product.id),
);
},
),
),
],
),
);
},
);
},
);
if (!context.mounted) return;
if (selectedId == null) {
onChanged?.call(null);
return;
}
onChanged?.call(selectedId);
}
}
flutter/lib/features/recipes/presentation/recipes_screen.dart
+35 -8
View File
@@ -71,15 +71,42 @@ class RecipesScreen extends ConsumerWidget {
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.title),
subtitle: Text(recipe.description ?? ''),
return InkWell(
onTap: () => context.push('/recipes/${recipe.id}'),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 6),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(6),
child: recipe.imageUrl != null
? Image.network(
recipe.imageUrl!,
width: 72,
height: 72,
fit: BoxFit.cover,
)
: Container(
width: 72,
height: 72,
color: Colors.grey[200],
child: const Icon(Icons.restaurant,
size: 32),
),
),
const SizedBox(width: 12),
Expanded(
child: Text(
recipe.title,
style: Theme.of(context).textTheme.titleMedium,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
);
},
);