mars3142/toaster
1
0
Fork 0
Code Issues Actions Releases Activity

new scaffold and add toast_card
Test / test (push) Successful in 3m15s
Details

Browse Source 
Signed-off-by: Peter Siegmund <developer@mars3142.org>
This commit is contained in:
Peter Siegmund
2026-04-18 16:56:51 +02:00
parent 8d4990a808
commit db4bf5dbc1
7 changed files with 330 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/home/home_screen.dart
+31
View File
@@ -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
+2 -102
View File
@@ -1,106 +1,6 @@
import 'package:toaster/toaster_app.dart';
import 'package:toaster_ui/toaster_ui.dart';
void main() {
runApp(const MyApp());
}
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),
),
);
}
runApp(const ToasterApp());
}
apps/lib/toaster_app.dart
+15
View File
@@ -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
-30
View File
@@ -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
+33 -4
View File
@@ -19,11 +19,40 @@ class AppTheme {
);
return ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFA78BFA)).copyWith(
primary: const Color(0xFFA78BFA),
secondary: const Color(0xFF71717A),
tertiary: const Color(0xFF34D399),
colorScheme: const ColorScheme(
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
+248
View File
@@ -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
+1
View File
@@ -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';