tane/apps/app_seeds/lib/ui/quick_add_sheet.dart
vjrj 48e9d15772 feat(ui): align inventory + detail with mockups (seed icons, green theme)
Visual pass toward docs/mockups (06 inventory, 07 item):
- Bundle the seedks icon font (chars a–k → seed pictograms: jar, packet, spoon…)
  and a SeedGlyph/QuantityKindIcon helper.
- Green app bar + pale-green canvas theme (buildTaneTheme).
- Inventory list: rounded-square photo thumbnail or green initial avatar, bold
  title, scientific-name subtitle, trailing edit pencil, styled category
  headers, rounded search field, seed-glyph empty state.
- Quantity selectors (quick-add + add-lot) show the seed pictogram + word;
  detail lot lines use the kind's glyph.
- Detail header restyled to mockup 07: category link + scientific name on the
  left, photo on the right.

watchInventory now also returns the linked species' scientific name (subtitle).
37 app tests green; seedks font verified in the Linux asset bundle.
2026-07-08 00:14:43 +02:00

186 lines
5.9 KiB
Dart

import 'dart:typed_data';
import 'package:commons_core/commons_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';
import '../data/variety_repository.dart';
import '../i18n/strings.g.dart';
import '../state/quick_add_cubit.dart';
import 'quantity_kind_l10n.dart';
import 'seed_glyph.dart';
/// Picks a photo and returns its bytes (or null if cancelled). Injected so
/// widget tests can supply a fake instead of the camera plugin.
typedef PhotoPicker = Future<Uint8List?> Function();
/// A short, high-frequency subset of quantity units shown up front to keep the
/// add flow fast; the rest live behind "Add more…".
const _quickKinds = <QuantityKind>[
QuantityKind.aFew,
QuantityKind.handful,
QuantityKind.packet,
QuantityKind.pod,
QuantityKind.cob,
QuantityKind.grams,
];
Future<void> showQuickAddSheet(
BuildContext context, {
required VarietyRepository repository,
PhotoPicker? photoPicker,
}) {
return showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
builder: (_) => BlocProvider(
create: (_) => QuickAddCubit(repository),
child: QuickAddSheet(photoPicker: photoPicker ?? _cameraPhotoPicker),
),
);
}
Future<Uint8List?> _cameraPhotoPicker() async {
final file = await ImagePicker().pickImage(
source: ImageSource.camera,
maxWidth: 1280,
imageQuality: 80,
);
return file?.readAsBytes();
}
class QuickAddSheet extends StatelessWidget {
const QuickAddSheet({required this.photoPicker, super.key});
final PhotoPicker photoPicker;
@override
Widget build(BuildContext context) {
final t = context.t;
return BlocConsumer<QuickAddCubit, QuickAddState>(
listenWhen: (prev, curr) => !prev.submitted && curr.submitted,
listener: (context, state) => Navigator.of(context).pop(),
builder: (context, state) {
final cubit = context.read<QuickAddCubit>();
return Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 16,
bottom: MediaQuery.of(context).viewInsets.bottom + 16,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
t.quickAdd.title,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 12),
TextField(
key: const Key('quickAdd.labelField'),
autofocus: true,
textInputAction: TextInputAction.done,
decoration: InputDecoration(
labelText: t.quickAdd.labelField,
errorText: state.showLabelError
? t.quickAdd.labelRequired
: null,
border: const OutlineInputBorder(),
),
onChanged: cubit.labelChanged,
onSubmitted: (_) => cubit.submit(),
),
const SizedBox(height: 16),
Text(
t.quickAdd.quantity,
style: Theme.of(context).textTheme.labelLarge,
),
const SizedBox(height: 8),
Wrap(
spacing: 8,
children: [
for (final kind in _quickKinds)
ChoiceChip(
avatar: QuantityKindIcon(kind, size: 18),
label: Text(quantityKindLabel(t, kind)),
selected: state.quantityKind == kind,
onSelected: (_) => cubit.selectQuantity(kind),
),
],
),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerLeft,
child: TextButton.icon(
onPressed: cubit.toggleExpanded,
icon: Icon(
state.expanded ? Icons.expand_less : Icons.expand_more,
),
label: Text(t.quickAdd.more),
),
),
if (state.expanded) _MoreSection(photoPicker: photoPicker),
const SizedBox(height: 8),
Row(
children: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(t.quickAdd.cancel),
),
const Spacer(),
FilledButton(
key: const Key('quickAdd.save'),
onPressed: state.submitting ? null : cubit.submit,
child: Text(t.quickAdd.save),
),
],
),
],
),
);
},
);
}
}
class _MoreSection extends StatelessWidget {
const _MoreSection({required this.photoPicker});
final PhotoPicker photoPicker;
@override
Widget build(BuildContext context) {
final t = context.t;
final state = context.watch<QuickAddCubit>().state;
final cubit = context.read<QuickAddCubit>();
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 8),
if (state.photoBytes != null)
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.memory(
state.photoBytes!,
height: 120,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.centerLeft,
child: OutlinedButton.icon(
onPressed: () async {
final bytes = await photoPicker();
if (bytes != null) cubit.photoPicked(bytes);
},
icon: const Icon(Icons.photo_camera_outlined),
label: Text(t.quickAdd.addPhoto),
),
),
],
);
}
}