new scaffold and add toast_card

Signed-off-by: Peter Siegmund <developer@mars3142.org>

apps/lib/features/home/home_screen.dart

@@ -0,0 +1,31 @@
+import 'package:toaster_ui/toaster_ui.dart';
+
+class HomeScreen extends StatelessWidget {
+  const HomeScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: .center,
+          children: [
+            Padding(
+              padding: EdgeInsets.symmetric(horizontal: context.appSpacing.md),
+              child: ToastCard(
+                icon: Icons.chat_bubble_outline,
+                title: 'Messages',
+                timestamp: '10:42 AM',
+                content: 'New message received from +1 (555) 019-2834',
+                tags: ['res/values/strings.xml', 'en-US'],
+                onDelete: () {
+                  /* ... */
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/lib/main.dart

@@ -1,106 +1,6 @@
+import 'package:toaster/toaster_app.dart';
 import 'package:toaster_ui/toaster_ui.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(const ToasterApp());
-}
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  // This widget is the root of your application.
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: AppTheme.toaster,
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
-
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
-    // by the _incrementCounter method above.
-    //
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
-    return Scaffold(
-      appBar: AppBar(
-        // TRY THIS: Try changing the color here to a specific color (to
-        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
-        // change color while the other colors stay the same.
-        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
-      ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          //
-          // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"
-          // action in the IDE, or press "p" in the console), to see the
-          // wireframe for each widget.
-          mainAxisAlignment: .center,
-          children: [
-            AppButton(onPressed: () {}, child: Text('Peter')),
-            const Text('You have pushed the button this many times:'),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ),
-    );
-  }
 }

apps/lib/toaster_app.dart

@@ -0,0 +1,15 @@
+import 'package:toaster/features/home/home_screen.dart';
+import 'package:toaster_ui/toaster_ui.dart';
+
+class ToasterApp extends StatelessWidget {
+  const ToasterApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: AppTheme.toaster,
+      home:  const HomeScreen(),
+    );
+  }
+}

apps/test/widget_test.dart

@@ -1,30 +0,0 @@
-// This is a basic Flutter widget test.
-//
-// To perform an interaction with a widget in your test, use the WidgetTester
-// utility in the flutter_test package. For example, you can send tap and scroll
-// gestures. You can also use WidgetTester to find child widgets in the widget
-// tree, read text, and verify that the values of widget properties are correct.
-
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:toaster/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}

packages/toaster_ui/lib/src/theme/app_theme.dart

@@ -19,11 +19,40 @@ class AppTheme {
     );
 
     return ThemeData(
-      colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFA78BFA)).copyWith(
+      colorScheme: const ColorScheme(
-        primary: const Color(0xFFA78BFA),
-        secondary: const Color(0xFF71717A),
-        tertiary: const Color(0xFF34D399),
         brightness: Brightness.dark,
+        primary: Color(0xFFA78BFA),
+        onPrimary: Color(0xFF0A0012),
+        primaryContainer: Color(0xFF7C3AED),
+        onPrimaryContainer: Color(0xFFEDE9FE),
+        secondary: Color(0xFF71717A),
+        onSecondary: Color(0xFF09090B),
+        secondaryContainer: Color(0xFF27272A),
+        onSecondaryContainer: Color(0xFFA1A1AA),
+        tertiary: Color(0xFF34D399),
+        onTertiary: Color(0xFF001A12),
+        tertiaryContainer: Color(0xFF065F46),
+        onTertiaryContainer: Color(0xFFBBF7D0),
+        error: Color(0xFFEF4444),
+        onError: Color(0xFF1A0000),
+        errorContainer: Color(0xFF3B1111),
+        onErrorContainer: Color(0xFFFCA5A5),
+        surface: Color(0xFF0C0C0F),
+        onSurface: Color(0xFFFAFAFA),
+        onSurfaceVariant: Color(0xFFA1A1AA),
+        outline: Color(0xFF52525B),
+        outlineVariant: Color(0xFF27272A),
+        inverseSurface: Color(0xFFFAFAFA),
+        onInverseSurface: Color(0xFF09090B),
+        inversePrimary: Color(0xFF5B21B6),
+        surfaceTint: Color(0xFFA78BFA),
+        surfaceDim: Color(0xFF0C0C0F),
+        surfaceBright: Color(0xFF18181B),
+        surfaceContainerLowest: Color(0xFF09090B),
+        surfaceContainerLow: Color(0xFF0F0F12),
+        surfaceContainer: Color(0xFF121215),
+        surfaceContainerHigh: Color(0xFF18181B),
+        surfaceContainerHighest: Color(0xFF1E1E22),
       ),
       extensions: const [appColors, AppSpacing()],
     );

packages/toaster_ui/lib/src/widgets/toast_card.dart

@@ -0,0 +1,248 @@
+import 'package:toaster_ui/toaster_ui.dart';
+
+/// {@template toast_card}
+/// A card displaying a toast notification with icon, title, timestamp,
+/// string content, metadata tags, and an optional delete action.
+/// {@endtemplate}
+class ToastCard extends StatefulWidget {
+  /// {@macro toast_card}
+  const ToastCard({
+    required this.icon,
+    required this.title,
+    required this.timestamp,
+    required this.content,
+    required this.tags,
+    super.key,
+    this.onDelete,
+  });
+
+  /// The icon displayed in the leading section.
+  final IconData icon;
+
+  /// The title text shown next to the icon.
+  final String title;
+
+  /// The timestamp shown below the title.
+  final String timestamp;
+
+  /// The string content displayed in the monospace content box.
+  final String content;
+
+  /// Metadata tags shown below the content box.
+  final List<String> tags;
+
+  /// Called when the delete button is tapped.
+  final VoidCallback? onDelete;
+
+  @override
+  State<ToastCard> createState() => _ToastCardState();
+}
+
+class _ToastCardState extends State<ToastCard> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hovered = true),
+      onExit: (_) => setState(() => _hovered = false),
+      child: Container(
+        padding: EdgeInsets.all(spacing.md),
+        decoration: BoxDecoration(
+          color: cs.surfaceContainer,
+          border: Border.all(color: cs.outlineVariant),
+          borderRadius: BorderRadius.circular(spacing.xs),
+        ),
+        child: Column(
+          spacing: spacing.xs,
+          children: [
+            Row(
+              children: [
+                _IconSection(
+                  icon: widget.icon,
+                  title: widget.title,
+                  timestamp: widget.timestamp,
+                ),
+                const Spacer(),
+                AnimatedOpacity(
+                  opacity: _hovered ? 1.0 : 0.0,
+                  duration: const Duration(milliseconds: 150),
+                  child: _DeleteButton(onDelete: widget.onDelete),
+                ),
+              ],
+            ),
+            _ContentSection(
+              content: widget.content,
+              tags: widget.tags,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _IconSection extends StatelessWidget {
+  const _IconSection({
+    required this.icon,
+    required this.title,
+    required this.timestamp,
+  });
+
+  final IconData icon;
+  final String title;
+  final String timestamp;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: 40,
+          height: 40,
+          decoration: BoxDecoration(
+            color: cs.surfaceDim,
+            border: Border.all(color: cs.outlineVariant),
+            borderRadius: BorderRadius.circular(spacing.xs),
+          ),
+          alignment: Alignment.center,
+          child: Icon(icon, color: cs.primary, size: 20),
+        ),
+        SizedBox(width: spacing.sm),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              title,
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 14,
+                color: cs.onSurface,
+              ),
+            ),
+            Text(
+              timestamp,
+              style: TextStyle(
+                fontSize: 12,
+                color: cs.onSurfaceVariant,
+                fontFamily: 'monospace',
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class _ContentSection extends StatelessWidget {
+  const _ContentSection({required this.content, required this.tags});
+
+  final String content;
+  final List<String> tags;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final spacing = context.appSpacing;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          width: double.infinity,
+          padding: EdgeInsets.all(spacing.sm),
+          decoration: BoxDecoration(
+            color: cs.surfaceContainerLowest,
+            border: Border.all(color: cs.outlineVariant),
+            borderRadius: BorderRadius.circular(4),
+          ),
+          child: Text(
+            '"$content"',
+            style: TextStyle(
+              fontFamily: 'monospace',
+              fontSize: 14,
+              color: cs.tertiary,
+            ),
+          ),
+        ),
+        SizedBox(height: spacing.xs),
+        Wrap(
+          spacing: spacing.xs,
+          children: tags
+              .map(
+                (tag) => Container(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: spacing.xs,
+                    vertical: 2,
+                  ),
+                  decoration: BoxDecoration(
+                    color: cs.surface,
+                    border: Border.all(color: cs.outlineVariant),
+                    borderRadius: BorderRadius.circular(4),
+                  ),
+                  child: Text(
+                    tag,
+                    style: TextStyle(
+                      fontSize: 12,
+                      color: cs.onSurfaceVariant,
+                    ),
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      ],
+    );
+  }
+}
+
+class _DeleteButton extends StatefulWidget {
+  const _DeleteButton({this.onDelete});
+
+  final VoidCallback? onDelete;
+
+  @override
+  State<_DeleteButton> createState() => _DeleteButtonState();
+}
+
+class _DeleteButtonState extends State<_DeleteButton> {
+  bool _hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return MouseRegion(
+      onEnter: (_) => setState(() => _hovered = true),
+      onExit: (_) => setState(() => _hovered = false),
+      child: GestureDetector(
+        onTap: widget.onDelete,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(
+            color: _hovered
+                ? cs.errorContainer.withValues(alpha: 0.2)
+                : Colors.transparent,
+            borderRadius: BorderRadius.circular(6),
+          ),
+          child: Icon(
+            Icons.delete_outline,
+            size: 20,
+            color: _hovered ? cs.error : cs.onSurfaceVariant,
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/toaster_ui/lib/toaster_ui.dart

@@ -8,3 +8,4 @@ export 'src/theme/app_colors.dart';
 export 'src/theme/app_spacing.dart';
 export 'src/theme/app_theme.dart';
 export 'src/widgets/app_button.dart';
+export 'src/widgets/toast_card.dart';