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.
This commit is contained in:
parent
e41ec9872b
commit
48e9d15772
12 changed files with 329 additions and 49 deletions
87
apps/app_seeds/lib/ui/seed_glyph.dart
Normal file
87
apps/app_seeds/lib/ui/seed_glyph.dart
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import 'package:commons_core/commons_core.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Renders a glyph from the bundled `seedks` icon font, whose characters `a`–`k`
|
||||
/// map to seed-themed pictograms (jar, packet, spoon…). See
|
||||
/// docs/mockups/seedks-glyphs.png.
|
||||
class SeedGlyph extends StatelessWidget {
|
||||
const SeedGlyph(this.char, {this.size = 24, this.color, super.key});
|
||||
|
||||
final String char;
|
||||
final double size;
|
||||
final Color? color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
char,
|
||||
style: TextStyle(
|
||||
fontFamily: 'seedks',
|
||||
fontSize: size,
|
||||
height: 1,
|
||||
color: color ?? Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Named seedks glyphs (the character each pictogram is mapped to).
|
||||
abstract final class SeedGlyphs {
|
||||
static const jar = 'a';
|
||||
static const jars = 'b';
|
||||
static const search = 'c';
|
||||
static const share = 'd';
|
||||
static const sack = 'e';
|
||||
static const smallSpoon = 'f';
|
||||
static const bigSpoon = 'g';
|
||||
static const mug = 'h';
|
||||
static const envelope = 'i';
|
||||
static const pouring = 'j';
|
||||
static const scattered = 'k';
|
||||
}
|
||||
|
||||
/// The seedks character for a quantity [kind], or null for plant-form/precise
|
||||
/// kinds that have no seed pictogram (they fall back to a Material icon).
|
||||
String? seedGlyphForKind(QuantityKind kind) => switch (kind) {
|
||||
QuantityKind.aFew => SeedGlyphs.scattered,
|
||||
QuantityKind.some => SeedGlyphs.smallSpoon,
|
||||
QuantityKind.plenty => SeedGlyphs.jars,
|
||||
QuantityKind.handful => SeedGlyphs.bigSpoon,
|
||||
QuantityKind.pinch => SeedGlyphs.scattered,
|
||||
QuantityKind.jar => SeedGlyphs.jar,
|
||||
QuantityKind.packet => SeedGlyphs.envelope,
|
||||
_ => null,
|
||||
};
|
||||
|
||||
IconData _materialIconForKind(QuantityKind kind) => switch (kind) {
|
||||
QuantityKind.grams => Icons.scale_outlined,
|
||||
QuantityKind.count => Icons.tag,
|
||||
QuantityKind.cob || QuantityKind.ear => Icons.grass,
|
||||
QuantityKind.head || QuantityKind.seedHead => Icons.filter_vintage_outlined,
|
||||
QuantityKind.fruit => Icons.local_florist_outlined,
|
||||
QuantityKind.bulb ||
|
||||
QuantityKind.tuber ||
|
||||
QuantityKind.bunch => Icons.spa_outlined,
|
||||
_ => Icons.eco_outlined,
|
||||
};
|
||||
|
||||
/// A consistent icon for a [QuantityKind]: the seed glyph where one exists,
|
||||
/// otherwise a Material fallback.
|
||||
class QuantityKindIcon extends StatelessWidget {
|
||||
const QuantityKindIcon(this.kind, {this.size = 24, this.color, super.key});
|
||||
|
||||
final QuantityKind kind;
|
||||
final double size;
|
||||
final Color? color;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final glyph = seedGlyphForKind(kind);
|
||||
if (glyph != null) return SeedGlyph(glyph, size: size, color: color);
|
||||
return Icon(
|
||||
_materialIconForKind(kind),
|
||||
size: size,
|
||||
color: color ?? Theme.of(context).colorScheme.primary,
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue