mirror of
https://github.com/rzuasti/oott.git
synced 2026-07-08 19:21:54 +02:00
Animate notification list inserts, removals and arrivals
Replace the notifications list's wholesale redraw with a SliverAnimatedList driven by a GlobalKey, keeping `_items` in lockstep with the animated state. - Background refreshes (poll, pull-to-refresh, resume, route pop, mark-all) reconcile against the fetched page: departed rows slide out, newly fetched rows slide in at the top with a theme-coloured arrival highlight, and surviving rows stay put (with in-place read-state recolouring under "All"). - Filter/page changes and the initial load reset the list (fresh key) so the new dataset appears instantly without per-row animation. - Read/unread removals are owned by the list: buttons play a slide/fade exit, while swipes let Dismissible animate and then reconcile, avoiding double animation and the disposed-widget race. Add the arrival highlight overlay to NotificationCard and cover the new behaviour with widget tests (swipe-out, flash-in, external removal, in-place "All" mark, filter reset). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
c949deedb6
commit
f847b60c21
@@ -2,18 +2,38 @@ import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../model/notification.dart' as oott_model;
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/dimens.dart';
|
||||
import '../utils/friendly_date_formatter.dart';
|
||||
|
||||
// How long the arrival highlight takes to fade out.
|
||||
const _flashDuration = Duration(milliseconds: 900);
|
||||
|
||||
class NotificationCard extends StatefulWidget {
|
||||
final oott_model.Notification item;
|
||||
final FriendlyDateFormatter formatter;
|
||||
final Future<bool> Function(bool read) onSetRead;
|
||||
|
||||
/// When true, the card briefly tints itself to draw attention to a freshly
|
||||
/// arrived notification, then fades the tint out.
|
||||
final bool flash;
|
||||
|
||||
/// Called once the arrival highlight has finished fading.
|
||||
final VoidCallback? onFlashComplete;
|
||||
|
||||
/// Asks the owner to drop this item from its list once it has left the
|
||||
/// current filter. [animated] is true for button-driven removals (the owner
|
||||
/// plays its own exit animation) and false for swipes, where [Dismissible]
|
||||
/// has already animated the card away and the owner only needs to reconcile.
|
||||
final void Function({required bool animated})? onRemove;
|
||||
|
||||
const NotificationCard({
|
||||
required this.item,
|
||||
required this.formatter,
|
||||
required this.onSetRead,
|
||||
this.flash = false,
|
||||
this.onFlashComplete,
|
||||
this.onRemove,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@@ -31,7 +51,10 @@ class _NotificationCardState extends State<NotificationCard> {
|
||||
alignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () => widget.onSetRead(widget.item.isNew),
|
||||
onPressed: () async {
|
||||
final left = await widget.onSetRead(widget.item.isNew);
|
||||
if (left) widget.onRemove?.call(animated: true);
|
||||
},
|
||||
child: Text(widget.item.isNew ? 'Mark as read' : 'Mark as unread'),
|
||||
),
|
||||
if (widget.item.macAddress != null)
|
||||
@@ -39,7 +62,10 @@ class _NotificationCardState extends State<NotificationCard> {
|
||||
icon: const Icon(Icons.open_in_new),
|
||||
label: const Text('View device'),
|
||||
onPressed: () async {
|
||||
if (widget.item.isNew) await widget.onSetRead(true);
|
||||
if (widget.item.isNew) {
|
||||
final left = await widget.onSetRead(true);
|
||||
if (left) widget.onRemove?.call(animated: true);
|
||||
}
|
||||
if (context.mounted) {
|
||||
context.push('/devices/${widget.item.macAddress}');
|
||||
}
|
||||
@@ -55,55 +81,89 @@ class _NotificationCardState extends State<NotificationCard> {
|
||||
final theme = Theme.of(context);
|
||||
return Card(
|
||||
color: widget.item.isNew ? theme.colorScheme.secondaryContainer : null,
|
||||
child: Dismissible(
|
||||
key: ValueKey(widget.item.id),
|
||||
confirmDismiss: (direction) =>
|
||||
widget.onSetRead(direction != DismissDirection.startToEnd),
|
||||
background: Container(
|
||||
color: theme.colorScheme.tertiaryContainer,
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.only(left: Insets.lg),
|
||||
child: const Icon(Icons.mark_email_unread),
|
||||
// Clip so the arrival highlight overlay respects the rounded corners.
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Stack(
|
||||
children: [
|
||||
_buildDismissible(context, theme),
|
||||
if (widget.flash) _buildFlashOverlay(theme),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// A translucent tint over the card that fades to transparent once, signalling
|
||||
// a freshly arrived notification. Uses the theme's info accent, never a
|
||||
// hardcoded colour.
|
||||
Widget _buildFlashOverlay(ThemeData theme) {
|
||||
final tint = theme.extension<AppColorExtension>()!.info;
|
||||
return Positioned.fill(
|
||||
child: IgnorePointer(
|
||||
child: TweenAnimationBuilder<double>(
|
||||
tween: Tween(begin: 1.0, end: 0.0),
|
||||
duration: _flashDuration,
|
||||
onEnd: widget.onFlashComplete,
|
||||
builder: (context, t, _) =>
|
||||
ColoredBox(color: tint.withValues(alpha: 0.3 * t)),
|
||||
),
|
||||
secondaryBackground: Container(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
alignment: Alignment.centerRight,
|
||||
padding: const EdgeInsets.only(right: Insets.lg),
|
||||
child: const Icon(Icons.done),
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
ListTile(
|
||||
leading: Icon(
|
||||
widget.item.notificationType.icon,
|
||||
color: widget.item.isNew ? theme.colorScheme.primary : null,
|
||||
),
|
||||
title: Text(
|
||||
'${widget.formatter.format(widget.item.createdOn)} - ${widget.item.title}',
|
||||
style: widget.item.isNew
|
||||
? const TextStyle(fontWeight: FontWeight.bold)
|
||||
: null,
|
||||
),
|
||||
subtitle: Text(
|
||||
widget.item.body,
|
||||
maxLines: _expanded ? null : 2,
|
||||
overflow: _expanded
|
||||
? TextOverflow.visible
|
||||
: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDismissible(BuildContext context, ThemeData theme) {
|
||||
return Dismissible(
|
||||
key: ValueKey(widget.item.id),
|
||||
// Toggle read state on the backend; only let the card slide away when the
|
||||
// toggle succeeds and the item should leave the current filter. Returning
|
||||
// false snaps the card back (e.g. the "All" filter keeps the item).
|
||||
confirmDismiss: (direction) =>
|
||||
widget.onSetRead(direction != DismissDirection.startToEnd),
|
||||
// The swipe-out animation is already done; the owner just reconciles.
|
||||
onDismissed: (_) => widget.onRemove?.call(animated: false),
|
||||
background: Container(
|
||||
color: theme.colorScheme.tertiaryContainer,
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.only(left: Insets.lg),
|
||||
child: const Icon(Icons.mark_email_unread),
|
||||
),
|
||||
secondaryBackground: Container(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
alignment: Alignment.centerRight,
|
||||
padding: const EdgeInsets.only(right: Insets.lg),
|
||||
child: const Icon(Icons.done),
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
ListTile(
|
||||
leading: Icon(
|
||||
widget.item.notificationType.icon,
|
||||
color: widget.item.isNew ? theme.colorScheme.primary : null,
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeInOut,
|
||||
child: _expanded
|
||||
? _buildActions(context)
|
||||
: const SizedBox.shrink(),
|
||||
title: Text(
|
||||
'${widget.formatter.format(widget.item.createdOn)} - ${widget.item.title}',
|
||||
style: widget.item.isNew
|
||||
? const TextStyle(fontWeight: FontWeight.bold)
|
||||
: null,
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Text(
|
||||
widget.item.body,
|
||||
maxLines: _expanded ? null : 2,
|
||||
overflow: _expanded
|
||||
? TextOverflow.visible
|
||||
: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeInOut,
|
||||
child: _expanded
|
||||
? _buildActions(context)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user