Skip to content

Commit

Permalink
feat: added swipe-able actions to notification list item
Browse files Browse the repository at this point in the history
  • Loading branch information
@DE7924
DE7924 committed Sep 5, 2024
1 parent 2811629 commit 17eb8b5
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 81 deletions.
49 changes: 48 additions & 1 deletion example/lib/pages/components/notification_list_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,13 @@ class NotificationListItemExample extends StatelessWidget {
onPressed: () {},
size: ZetaWidgetSize.small,
),
// attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -65,6 +71,10 @@ class NotificationListItemExample extends StatelessWidget {
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -84,6 +94,11 @@ class NotificationListItemExample extends StatelessWidget {
),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
const SizedBox(height: 20),
Text(
Expand All @@ -108,6 +123,13 @@ class NotificationListItemExample extends StatelessWidget {
size: ZetaWidgetSize.small,
),
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -123,6 +145,10 @@ class NotificationListItemExample extends StatelessWidget {
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -136,6 +162,11 @@ class NotificationListItemExample extends StatelessWidget {
),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
const SizedBox(height: 20),
Text(
Expand All @@ -158,6 +189,13 @@ class NotificationListItemExample extends StatelessWidget {
size: ZetaWidgetSize.small,
),
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
paleButtonColors: true,
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -171,6 +209,10 @@ class NotificationListItemExample extends StatelessWidget {
notificationTime: "10:32 AM",
showBellIcon: true,
attachment: Text("Spring-Donation-Drive.pdf"),
slidableActions: [
ZetaSlidableAction.menuMore(onPressed: () {}),
ZetaSlidableAction.delete(onPressed: () {}),
],
),
ZetaNotificationListItem(
body: Text(
Expand All @@ -182,6 +224,11 @@ class NotificationListItemExample extends StatelessWidget {
leading: ZetaNotificationBadge.icon(icon: ZetaIcons.check_circle),
notificationRead: true,
notificationTime: "03/09/2024",
slidableActions: [
ZetaSlidableAction.call(onPressed: () {}),
ZetaSlidableAction.ptt(onPressed: () {}),
],
paleButtonColors: true,
),
].gap(Zeta.of(context).spacing.xl_4),
),
Expand Down
224 changes: 144 additions & 80 deletions lib/src/components/list_item/notification_list_item.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

import '../../../zeta_flutter.dart';

Expand All @@ -20,6 +21,8 @@ class ZetaNotificationListItem extends ZetaStatelessWidget {
this.semanticLabel,
this.attachment,
this.showBellIcon = false,
this.slidableActions = const [],
this.paleButtonColors,
});

/// Notification Badge to indicate type of notification or who it's coming from
Expand Down Expand Up @@ -54,6 +57,27 @@ class ZetaNotificationListItem extends ZetaStatelessWidget {
/// Show bell icon if notification is recent/important.
final bool? showBellIcon;

/// List of slidable actions.
///
/// The actions are displayed in the order they are provided; from left to right.
final List<ZetaSlidableAction> slidableActions;

/// Whether to apply pale color to action buttons.
///
/// Pale buttons was the default behavior before 0.15.2, but now buttons have darker colors by default.
final bool? paleButtonColors;

double _getSlidableExtend({
required int slidableActionsCount,
required double maxScreenWidth,
required BuildContext context,
}) {
final actionWith = slidableActionsCount * Zeta.of(context).spacing.xl_10;
final maxButtonWidth = actionWith / maxScreenWidth;
final extend = actionWith / maxScreenWidth;
return extend.clamp(0, maxButtonWidth).toDouble();
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
Expand All @@ -64,12 +88,16 @@ class ZetaNotificationListItem extends ZetaStatelessWidget {
..add(DiagnosticsProperty<bool?>('showDivider', showDivider))
..add(StringProperty('semanticLabel', semanticLabel))
..add(DiagnosticsProperty<Widget?>('attachment', attachment))
..add(DiagnosticsProperty<bool?>('showBellIcon', showBellIcon));
..add(DiagnosticsProperty<bool?>('showBellIcon', showBellIcon))
..add(DiagnosticsProperty<bool?>('paleButtonColors', paleButtonColors));
}

@override
Widget build(BuildContext context) {
final colors = Zeta.of(context).colors;

final actions = [...slidableActions];

return Padding(
padding: EdgeInsets.all(Zeta.of(context).spacing.small),
child: ZetaRoundedScope(
Expand All @@ -78,98 +106,133 @@ class ZetaNotificationListItem extends ZetaStatelessWidget {
explicitChildNodes: true,
label: semanticLabel,
button: true,
child: DecoratedBox(
decoration: _getStyle(context),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
leading,
Expanded(
child: Column(
child: LayoutBuilder(
builder: (context, constraints) {
return Slidable(
enabled: actions.isNotEmpty,
endActionPane: actions.isEmpty
? null
: ActionPane(
extentRatio: _getSlidableExtend(
slidableActionsCount: actions.length,
maxScreenWidth: constraints.maxWidth,
context: context,
),
motion: const ScrollMotion(),
children: paleButtonColors != null
? actions
.map(
(action) => action.copyWith(
paleColor: paleButtonColors,
),
)
.toList()
: actions,
),
child: DecoratedBox(
decoration: _getStyle(context),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MergeSemantics(
child: Row(
leading,
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
if (!notificationRead)
ZetaIndicator.icon(
color: ZetaColors().primary,
size: ZetaWidgetSize.small,
MergeSemantics(
child: Row(
children: [
if (!notificationRead)
ZetaIndicator.icon(
color: ZetaColors().primary,
size: ZetaWidgetSize.small,
),
SizedBox(
width: Zeta.of(context)
.spacing
.minimum,
),
Text(
title,
style: ZetaTextStyles.labelLarge,
),
],
),
SizedBox(
width: Zeta.of(context).spacing.minimum,
),
Text(
title,
style: ZetaTextStyles.labelLarge,
Row(
children: [
if (notificationTime != null)
Text(
notificationTime!,
style:
ZetaTextStyles.bodySmall.apply(
color: colors.textDisabled,
),
),
if (showBellIcon ?? false)
Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: colors.surfaceNegative,
borderRadius:
Zeta.of(context).radius.full,
),
child: ZetaIcon(
ZetaIcons.important_notification,
color: colors.white,
size: Zeta.of(context)
.spacing
.large,
),
),
].gap(Zeta.of(context).spacing.minimum),
),
],
),
),
Row(
children: [
if (notificationTime != null)
Text(
notificationTime!,
style: ZetaTextStyles.bodySmall
.apply(color: colors.textDisabled),
body,
if (attachment != null)
Container(
padding: EdgeInsets.symmetric(
vertical:
Zeta.of(context).spacing.minimum,
),
if (showBellIcon ?? false)
Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: colors.surfaceNegative,
borderRadius:
Zeta.of(context).radius.full,
),
child: ZetaIcon(
ZetaIcons.important_notification,
color: colors.white,
size: Zeta.of(context).spacing.large,
),
child: Row(
children: [
ZetaIcon(
ZetaIcons.attachment,
size: Zeta.of(context).spacing.medium,
color: colors.primary,
),
DefaultTextStyle(
style: ZetaTextStyles.bodyXSmall
.apply(color: colors.primary),
child: attachment!,
),
],
),
].gap(Zeta.of(context).spacing.minimum),
),
],
),
body,
if (attachment != null)
Container(
padding: EdgeInsets.symmetric(
vertical: Zeta.of(context).spacing.minimum,
),
child: Row(
children: [
ZetaIcon(
ZetaIcons.attachment,
size: Zeta.of(context).spacing.medium,
color: colors.primary,
),
DefaultTextStyle(
child: attachment!,
style: ZetaTextStyles.bodyXSmall
.apply(color: colors.primary),
),
],
),
].gap(Zeta.of(context).spacing.minimum),
),
].gap(Zeta.of(context).spacing.minimum),
),
].gap(Zeta.of(context).spacing.small),
),
),
].gap(Zeta.of(context).spacing.small),
if (action != null)
Container(
alignment: Alignment.bottomRight, child: action),
],
).paddingAll(Zeta.of(context).spacing.small),
),
if (action != null)
Container(alignment: Alignment.bottomRight, child: action),
],
).paddingAll(Zeta.of(context).spacing.small),
);
},
),
),
),
Expand Down Expand Up @@ -263,7 +326,8 @@ class ZetaNotificationBadge extends StatelessWidget {
borderRadius: Zeta.of(context).radius.rounded,
child: SizedBox.fromSize(
size: Size.square(
Zeta.of(context).spacing.xl_8), // Image radius
Zeta.of(context).spacing.xl_8,
), // Image radius
child: image!.copyWith(fit: BoxFit.cover),
),
);
Expand Down

0 comments on commit 17eb8b5

Please sign in to comment.