tane/apps/app_seeds/lib/ui/home_screen.dart
vjrj 4b209d6752 feat(shell): real sprout logo on home + basic Settings screen
- Bundle the real sprout logo (docs/logo.png → assets/logo.png) and show it on
  the home menu instead of a Material icon.
- Settings screen: switch language (Español / English / system) via slang, plus
  an About tile (logo, app name, one-line description). Drawer "Settings" is now
  active and routes to /settings.

Tests: drawer Settings opens the screen and shows the language options. 54 green.
2026-07-08 14:05:12 +02:00

157 lines
4.4 KiB
Dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../i18n/strings.g.dart';
import 'app_drawer.dart';
import 'seed_glyph.dart';
import 'theme.dart';
/// The main menu (mockup 02): a sprout logo over a faint seed-glyph watermark,
/// with the big "open market" (Block 2, coming soon) and "your inventory"
/// destinations. The hamburger opens [AppDrawer].
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
final t = context.t;
return Scaffold(
appBar: AppBar(title: Text(t.app.title)),
drawer: const AppDrawer(),
body: Stack(
children: [
const Positioned.fill(child: _SeedWatermark()),
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 440),
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
'assets/logo.png',
height: 140,
fit: BoxFit.contain,
),
const SizedBox(height: 40),
_MenuButton(
icon: const SeedGlyph(
SeedGlyphs.share,
size: 26,
color: Colors.white,
),
label: t.home.openMarket,
tag: t.common.comingSoon,
onTap: null,
),
const SizedBox(height: 16),
_MenuButton(
key: const Key('home.inventory'),
icon: const Icon(Icons.list, color: Colors.white),
label: t.home.yourInventory,
onTap: () => context.go('/inventory'),
),
],
),
),
),
),
],
),
);
}
}
class _MenuButton extends StatelessWidget {
const _MenuButton({
required this.icon,
required this.label,
this.onTap,
this.tag,
super.key,
});
final Widget icon;
final String label;
final VoidCallback? onTap;
final String? tag;
@override
Widget build(BuildContext context) {
final enabled = onTap != null;
return Material(
color: enabled ? seedGreen : seedGreen.withValues(alpha: 0.45),
borderRadius: BorderRadius.circular(10),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Row(
children: [
icon,
const SizedBox(width: 16),
Expanded(
child: Text(
label,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
if (tag != null)
Text(
tag!,
style: const TextStyle(color: Colors.white70, fontSize: 12),
),
],
),
),
),
);
}
}
/// A faint scatter of seed pictograms behind the menu (like mockup 02).
class _SeedWatermark extends StatelessWidget {
const _SeedWatermark();
static const _glyphs = [
SeedGlyphs.jars,
SeedGlyphs.envelope,
SeedGlyphs.bigSpoon,
SeedGlyphs.jar,
SeedGlyphs.sack,
SeedGlyphs.scattered,
SeedGlyphs.mug,
SeedGlyphs.smallSpoon,
];
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: Opacity(
opacity: 0.06,
child: Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 24),
child: Wrap(
spacing: 28,
runSpacing: 18,
alignment: WrapAlignment.center,
children: [
for (final g in _glyphs)
SeedGlyph(g, size: 64, color: seedGreenDark),
],
),
),
),
),
);
}
}