stack_wallet/lib/notifications/notification_card.dart

151 lines
5.8 KiB
Dart
Raw Normal View History

2022-08-26 08:11:35 +00:00
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/models/notification_model.dart';
import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
2022-11-14 16:40:31 +00:00
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
2022-08-26 08:11:35 +00:00
import 'package:stackwallet/widgets/rounded_container.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
class NotificationCard extends StatelessWidget {
const NotificationCard({
Key? key,
required this.notification,
}) : super(key: key);
final NotificationModel notification;
String extractPrettyDateString(DateTime date) {
// TODO: format this differently to better match the design
return Format.extractDateFrom(date.millisecondsSinceEpoch ~/ 1000);
}
2022-11-14 16:40:31 +00:00
static const double mobileIconSize = 24;
static const double desktopIconSize = 30;
2022-08-26 08:11:35 +00:00
@override
Widget build(BuildContext context) {
2022-11-14 16:40:31 +00:00
final isDesktop = Util.isDesktop;
2022-08-26 08:11:35 +00:00
return Stack(
children: [
RoundedWhiteContainer(
2022-11-14 16:40:31 +00:00
padding: isDesktop
? const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
)
: const EdgeInsets.all(12),
2022-08-26 08:11:35 +00:00
child: Row(
children: [
notification.changeNowId == null
? SvgPicture.asset(
notification.iconAssetName,
2022-11-14 16:40:31 +00:00
width: isDesktop ? desktopIconSize : mobileIconSize,
height: isDesktop ? desktopIconSize : mobileIconSize,
2022-08-26 08:11:35 +00:00
)
: Container(
2022-11-14 16:40:31 +00:00
width: isDesktop ? desktopIconSize : mobileIconSize,
height: isDesktop ? desktopIconSize : mobileIconSize,
2022-08-26 08:11:35 +00:00
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(24),
),
child: SvgPicture.asset(
notification.iconAssetName,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
2022-11-14 16:40:31 +00:00
width: isDesktop ? desktopIconSize : mobileIconSize,
height: isDesktop ? desktopIconSize : mobileIconSize,
2022-08-26 08:11:35 +00:00
),
),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
2022-11-14 16:40:31 +00:00
ConditionalParent(
condition: isDesktop && !notification.read,
builder: (child) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
child,
Text(
"New",
style:
STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorGreen,
),
)
],
),
child: Text(
notification.title,
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
)
: STextStyles.titleBold12(context),
),
2022-08-26 08:11:35 +00:00
),
const SizedBox(
height: 2,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
notification.description,
2022-11-14 16:40:31 +00:00
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
)
: STextStyles.label(context),
2022-08-26 08:11:35 +00:00
),
Text(
extractPrettyDateString(notification.date),
2022-11-14 16:40:31 +00:00
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
)
: STextStyles.label(context),
2022-08-26 08:11:35 +00:00
),
],
),
],
),
),
],
),
),
if (notification.read)
Positioned.fill(
child: RoundedContainer(
color: Theme.of(context)
.extension<StackColors>()!
.background
.withOpacity(0.5),
2022-08-26 08:11:35 +00:00
),
),
],
);
}
}