v1

lib/src/widgets/kanji_card.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+class KanjiCard extends StatelessWidget {
+  final String characters;
+  final String subtitle;
+  final Color? backgroundColor;
+  final Color? textColor;
+
+  const KanjiCard({
+    super.key,
+    required this.characters,
+    this.subtitle = '',
+    this.backgroundColor,
+    this.textColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final bgColor = backgroundColor ?? theme.cardTheme.color ?? theme.colorScheme.surface;
+    final fgColor = textColor ?? theme.textTheme.bodyMedium?.color ?? theme.colorScheme.onSurface;
+
+    return Card(
+      elevation: theme.cardTheme.elevation ?? 12,
+      color: bgColor,
+      shape: theme.cardTheme.shape ?? RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      child: SizedBox(
+        width: 360,
+        height: 240,
+        child: Padding(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                characters,
+                style: theme.textTheme.headlineMedium?.copyWith(
+                  fontSize: 56,
+                  color: fgColor,
+                ),
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                subtitle,
+                style: theme.textTheme.bodyMedium?.copyWith(
+                  color: fgColor.withOpacity(0.7),
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/options_grid.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class OptionsGrid extends StatelessWidget {
+  final List<String> options;
+  final void Function(String) onSelected;
+  final Color? buttonColor;
+  final Color? textColor;
+
+  const OptionsGrid({
+    super.key,
+    required this.options,
+    required this.onSelected,
+    this.buttonColor,
+    this.textColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (options.isEmpty) return const SizedBox.shrink();
+
+    final theme = Theme.of(context);
+    final bg = buttonColor ?? theme.colorScheme.primary;
+    final fg = textColor ?? theme.colorScheme.onPrimary;
+
+    return Wrap(
+      spacing: 10,
+      runSpacing: 10,
+      alignment: WrapAlignment.center,
+      children: options.map((o) {
+        return SizedBox(
+          width: 160,
+          child: ElevatedButton(
+            onPressed: () => onSelected(o),
+            style: ElevatedButton.styleFrom(
+              backgroundColor: bg,
+              foregroundColor: fg,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+              ),
+              padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
+            ),
+            child: Text(
+              o,
+              style: TextStyle(fontSize: 20, color: fg),
+              textAlign: TextAlign.center,
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}