added categories, import export, settings
This commit is contained in:
davmar
@@ -0,0 +1,159 @@
|
||||
/// Simple line chart of unit prices over time.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../models/purchase.dart';
|
||||
import '../utils/dates.dart';
|
||||
import '../utils/money.dart';
|
||||
|
||||
class PriceChart extends StatelessWidget {
|
||||
const PriceChart({super.key, required this.purchases});
|
||||
|
||||
final List<Purchase> purchases;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (purchases.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final points = purchases.reversed.toList();
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 160,
|
||||
child: CustomPaint(
|
||||
painter: _PriceChartPainter(
|
||||
prices: [
|
||||
for (final purchase in points) purchase.unitOrLinePrice,
|
||||
],
|
||||
lineColor: theme.colorScheme.primary,
|
||||
fillColor: theme.colorScheme.primary.withValues(alpha: 0.12),
|
||||
gridColor: theme.colorScheme.outlineVariant,
|
||||
labelColor: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
child: const SizedBox.expand(),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
formatDate(points.first.boughtAt),
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
Text(
|
||||
formatDate(points.last.boughtAt),
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Latest ${formatEuro(points.last.unitOrLinePrice)}',
|
||||
style: theme.textTheme.labelMedium,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PriceChartPainter extends CustomPainter {
|
||||
_PriceChartPainter({
|
||||
required this.prices,
|
||||
required this.lineColor,
|
||||
required this.fillColor,
|
||||
required this.gridColor,
|
||||
required this.labelColor,
|
||||
});
|
||||
|
||||
final List<double> prices;
|
||||
final Color lineColor;
|
||||
final Color fillColor;
|
||||
final Color gridColor;
|
||||
final Color labelColor;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final minPrice = prices.reduce((a, b) => a < b ? a : b);
|
||||
final maxPrice = prices.reduce((a, b) => a > b ? a : b);
|
||||
final span = (maxPrice - minPrice).abs() < 0.01 ? 1.0 : maxPrice - minPrice;
|
||||
const left = 36.0;
|
||||
const right = 8.0;
|
||||
const top = 12.0;
|
||||
const bottom = 8.0;
|
||||
final chart = Rect.fromLTRB(left, top, size.width - right, size.height - bottom);
|
||||
|
||||
final gridPaint = Paint()
|
||||
..color = gridColor
|
||||
..strokeWidth = 1;
|
||||
for (var i = 0; i < 3; i++) {
|
||||
final y = chart.top + chart.height * i / 2;
|
||||
canvas.drawLine(Offset(chart.left, y), Offset(chart.right, y), gridPaint);
|
||||
}
|
||||
|
||||
final path = Path();
|
||||
final fill = Path();
|
||||
Offset? last;
|
||||
for (var i = 0; i < prices.length; i++) {
|
||||
final x = prices.length == 1
|
||||
? chart.center.dx
|
||||
: chart.left + chart.width * i / (prices.length - 1);
|
||||
final y = chart.bottom - chart.height * ((prices[i] - minPrice) / span);
|
||||
final point = Offset(x, y);
|
||||
last = point;
|
||||
if (i == 0) {
|
||||
path.moveTo(x, y);
|
||||
fill.moveTo(x, chart.bottom);
|
||||
fill.lineTo(x, y);
|
||||
} else {
|
||||
path.lineTo(x, y);
|
||||
fill.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
if (last != null) {
|
||||
fill.lineTo(last.dx, chart.bottom);
|
||||
fill.close();
|
||||
}
|
||||
|
||||
canvas.drawPath(fill, Paint()..color = fillColor);
|
||||
canvas.drawPath(
|
||||
path,
|
||||
Paint()
|
||||
..color = lineColor
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 2.5
|
||||
..strokeCap = StrokeCap.round
|
||||
..strokeJoin = StrokeJoin.round,
|
||||
);
|
||||
|
||||
final dot = Paint()..color = lineColor;
|
||||
for (var i = 0; i < prices.length; i++) {
|
||||
final x = prices.length == 1
|
||||
? chart.center.dx
|
||||
: chart.left + chart.width * i / (prices.length - 1);
|
||||
final y = chart.bottom - chart.height * ((prices[i] - minPrice) / span);
|
||||
canvas.drawCircle(Offset(x, y), 3.5, dot);
|
||||
}
|
||||
|
||||
final labels = [maxPrice, (minPrice + maxPrice) / 2, minPrice];
|
||||
final textStyle = TextStyle(color: labelColor, fontSize: 10);
|
||||
for (var i = 0; i < labels.length; i++) {
|
||||
final tp = TextPainter(
|
||||
text: TextSpan(text: labels[i].toStringAsFixed(2), style: textStyle),
|
||||
textDirection: TextDirection.ltr,
|
||||
)..layout(maxWidth: left - 4);
|
||||
final y = chart.top + chart.height * i / 2 - tp.height / 2;
|
||||
tp.paint(canvas, Offset(0, y));
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _PriceChartPainter oldDelegate) =>
|
||||
oldDelegate.prices != prices || oldDelegate.lineColor != lineColor;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
/// Thumbnail or letter avatar for a product.
|
||||
library;
|
||||
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ProductImage extends StatelessWidget {
|
||||
const ProductImage({
|
||||
super.key,
|
||||
required this.name,
|
||||
this.path,
|
||||
this.size = 48,
|
||||
});
|
||||
|
||||
final String name;
|
||||
final String? path;
|
||||
final double size;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final file = path == null ? null : File(path!);
|
||||
final hasFile = file != null && file.existsSync();
|
||||
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(size / 4),
|
||||
child: SizedBox(
|
||||
width: size,
|
||||
height: size,
|
||||
child: hasFile
|
||||
? Image.file(
|
||||
file,
|
||||
fit: BoxFit.cover,
|
||||
cacheWidth: (size * 3).round(),
|
||||
errorBuilder: (_, _, _) => _LetterAvatar(
|
||||
name: name,
|
||||
size: size,
|
||||
colorScheme: theme.colorScheme,
|
||||
),
|
||||
)
|
||||
: _LetterAvatar(
|
||||
name: name,
|
||||
size: size,
|
||||
colorScheme: theme.colorScheme,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LetterAvatar extends StatelessWidget {
|
||||
const _LetterAvatar({
|
||||
required this.name,
|
||||
required this.size,
|
||||
required this.colorScheme,
|
||||
});
|
||||
|
||||
final String name;
|
||||
final double size;
|
||||
final ColorScheme colorScheme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final trimmed = name.trim();
|
||||
final letter = trimmed.isEmpty ? '?' : trimmed.substring(0, 1).toUpperCase();
|
||||
return ColoredBox(
|
||||
color: colorScheme.secondaryContainer,
|
||||
child: Center(
|
||||
child: Text(
|
||||
letter,
|
||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
fontSize: size * 0.4,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,372 @@
|
||||
/// Gear that opens the settings sheet.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../models/supermarket.dart';
|
||||
import '../services/app_settings.dart';
|
||||
import '../services/backup_service.dart';
|
||||
|
||||
class SettingsButton extends StatelessWidget {
|
||||
const SettingsButton({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IconButton(
|
||||
tooltip: 'Settings',
|
||||
onPressed: () => showSettingsSheet(context),
|
||||
icon: const Icon(Icons.settings_outlined),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> showSettingsSheet(BuildContext context) {
|
||||
return showModalBottomSheet<void>(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
showDragHandle: true,
|
||||
builder: (context) {
|
||||
return const _SettingsSheet();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
class _SettingsSheet extends StatefulWidget {
|
||||
const _SettingsSheet();
|
||||
|
||||
@override
|
||||
State<_SettingsSheet> createState() => _SettingsSheetState();
|
||||
}
|
||||
|
||||
class _SettingsSheetState extends State<_SettingsSheet> {
|
||||
bool _busy = false;
|
||||
|
||||
Future<void> _export(AppSettings settings) async {
|
||||
setState(() => _busy = true);
|
||||
try {
|
||||
final shared = await BackupService(settings.repository).exportBackup();
|
||||
if (!mounted) return;
|
||||
if (shared) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Backup ready.')),
|
||||
);
|
||||
}
|
||||
} catch (_) {
|
||||
if (!mounted) return;
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Could not export the backup.')),
|
||||
);
|
||||
} finally {
|
||||
if (mounted) setState(() => _busy = false);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _import(AppSettings settings) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('Import backup?'),
|
||||
content: const Text(
|
||||
'This replaces all products, shopping trips, photos, and settings on this device.',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () => Navigator.pop(context, true),
|
||||
child: const Text('Import'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
if (confirmed != true || !mounted) return;
|
||||
|
||||
setState(() => _busy = true);
|
||||
try {
|
||||
final imported = await BackupService(settings.repository).importBackup();
|
||||
if (!mounted) return;
|
||||
if (imported) {
|
||||
await settings.reload();
|
||||
if (!mounted) return;
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Backup imported.')),
|
||||
);
|
||||
}
|
||||
} catch (_) {
|
||||
if (!mounted) return;
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Could not import this backup.')),
|
||||
);
|
||||
} finally {
|
||||
if (mounted) setState(() => _busy = false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final settings = SettingsScope.of(context);
|
||||
final bottom = MediaQuery.viewInsetsOf(context).bottom;
|
||||
|
||||
return ListenableBuilder(
|
||||
listenable: settings,
|
||||
builder: (context, _) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.fromLTRB(16, 0, 16, 16 + bottom),
|
||||
child: SizedBox(
|
||||
height: MediaQuery.sizeOf(context).height * 0.75,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text('Settings', style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
SwitchListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
title: const Text('Dark mode'),
|
||||
value: settings.darkMode,
|
||||
onChanged: _busy ? null : settings.setDarkMode,
|
||||
),
|
||||
Text('Backup', style: Theme.of(context).textTheme.titleMedium),
|
||||
Text(
|
||||
'Save everything to a JSON file, or replace this device from a backup.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: _busy ? null : () => _export(settings),
|
||||
icon: const Icon(Icons.file_upload_outlined),
|
||||
label: const Text('Export'),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: _busy ? null : () => _import(settings),
|
||||
icon: const Icon(Icons.file_download_outlined),
|
||||
label: const Text('Import'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_busy) ...[
|
||||
const SizedBox(height: 8),
|
||||
const LinearProgressIndicator(),
|
||||
],
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Supermarkets',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
Text(
|
||||
'Name and color used as tags on products.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
children: [
|
||||
for (final store in settings.supermarkets)
|
||||
_StoreRow(
|
||||
store: store,
|
||||
onEdit: _busy
|
||||
? () {}
|
||||
: () => _editStore(context, settings, store),
|
||||
onDelete: _busy || store.id == null
|
||||
? null
|
||||
: () => settings.deleteSupermarket(store.id!),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton.icon(
|
||||
onPressed: _busy
|
||||
? null
|
||||
: () => _editStore(context, settings, null),
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add supermarket'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _editStore(
|
||||
BuildContext context,
|
||||
AppSettings settings,
|
||||
Supermarket? existing,
|
||||
) async {
|
||||
final result = await showDialog<Supermarket>(
|
||||
context: context,
|
||||
builder: (context) => _StoreEditDialog(store: existing),
|
||||
);
|
||||
if (result == null) return;
|
||||
if (existing == null) {
|
||||
try {
|
||||
await settings.addSupermarket(result.name, result.colorValue);
|
||||
} catch (_) {
|
||||
if (context.mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('That supermarket already exists.')),
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await settings.updateSupermarket(
|
||||
existing.copyWith(name: result.name, colorValue: result.colorValue),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class _StoreRow extends StatelessWidget {
|
||||
const _StoreRow({
|
||||
required this.store,
|
||||
required this.onEdit,
|
||||
this.onDelete,
|
||||
});
|
||||
|
||||
final Supermarket store;
|
||||
final VoidCallback onEdit;
|
||||
final VoidCallback? onDelete;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final onColor = store.color.computeLuminance() > 0.55
|
||||
? Colors.black87
|
||||
: Colors.white;
|
||||
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: store.color,
|
||||
child: Text(
|
||||
store.name.isEmpty ? '?' : store.name.substring(0, 1),
|
||||
style: TextStyle(color: onColor, fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
title: Text(store.name),
|
||||
trailing: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
tooltip: 'Edit',
|
||||
onPressed: onEdit,
|
||||
icon: const Icon(Icons.edit_outlined),
|
||||
),
|
||||
IconButton(
|
||||
tooltip: 'Delete',
|
||||
onPressed: onDelete,
|
||||
icon: const Icon(Icons.delete_outline),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StoreEditDialog extends StatefulWidget {
|
||||
const _StoreEditDialog({this.store});
|
||||
|
||||
final Supermarket? store;
|
||||
|
||||
@override
|
||||
State<_StoreEditDialog> createState() => _StoreEditDialogState();
|
||||
}
|
||||
|
||||
class _StoreEditDialogState extends State<_StoreEditDialog> {
|
||||
late final TextEditingController _name;
|
||||
late int _color;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_name = TextEditingController(text: widget.store?.name ?? '');
|
||||
_color = widget.store?.colorValue ?? kStoreColorPalette.first;
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_name.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: Text(widget.store == null ? 'Add supermarket' : 'Edit supermarket'),
|
||||
content: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextField(
|
||||
controller: _name,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
decoration: const InputDecoration(labelText: 'Name'),
|
||||
autofocus: widget.store == null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text('Color', style: Theme.of(context).textTheme.titleMedium),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
for (final value in kStoreColorPalette)
|
||||
GestureDetector(
|
||||
onTap: () => setState(() => _color = value),
|
||||
child: Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: Color(value),
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: _color == value
|
||||
? Theme.of(context).colorScheme.onSurface
|
||||
: Colors.transparent,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () {
|
||||
final name = _name.text.trim();
|
||||
if (name.isEmpty) return;
|
||||
Navigator.pop(
|
||||
context,
|
||||
Supermarket(
|
||||
id: widget.store?.id,
|
||||
name: name,
|
||||
colorValue: _color,
|
||||
sortOrder: widget.store?.sortOrder ?? 0,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: const Text('Save'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/// Colored supermarket chip used in lists and on product pages.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../models/supermarket.dart';
|
||||
import '../utils/supermarkets.dart';
|
||||
|
||||
class StoreTag extends StatelessWidget {
|
||||
const StoreTag({
|
||||
super.key,
|
||||
required this.name,
|
||||
this.stores = const [],
|
||||
this.compact = false,
|
||||
});
|
||||
|
||||
final String? name;
|
||||
final List<Supermarket> stores;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final storeName = name?.trim();
|
||||
if (storeName == null || storeName.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final store = supermarketByName(stores, storeName);
|
||||
final color = store?.color ?? const Color(0xFF78909C);
|
||||
final onColor = color.computeLuminance() > 0.55
|
||||
? Colors.black87
|
||||
: Colors.white;
|
||||
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: compact ? 6 : 8,
|
||||
vertical: compact ? 2 : 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: compact ? 6 : 8,
|
||||
height: compact ? 6 : 8,
|
||||
decoration: BoxDecoration(
|
||||
color: onColor.withValues(alpha: 0.85),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
SizedBox(width: compact ? 4 : 6),
|
||||
Text(
|
||||
storeName,
|
||||
style: Theme.of(context).textTheme.labelMedium?.copyWith(
|
||||
color: onColor,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: compact ? 11 : 12,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user