diff --git a/mobile/lib/theme/effects.dart b/mobile/lib/theme/effects.dart index 0eb38411a2..f97ec06723 100644 --- a/mobile/lib/theme/effects.dart +++ b/mobile/lib/theme/effects.dart @@ -12,6 +12,10 @@ List shadowFloatFaintLight = const [ BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.12)), ]; +List shadowFloatFaintestLight = const [ + BoxShadow(blurRadius: 1, color: Color.fromRGBO(0, 0, 0, 0.25)), +]; + List shadowMenuLight = const [ BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)), BoxShadow( diff --git a/mobile/lib/ui/home/memories/memories_widget.dart b/mobile/lib/ui/home/memories/memories_widget.dart index 7799bf1f59..fbeb648ab6 100644 --- a/mobile/lib/ui/home/memories/memories_widget.dart +++ b/mobile/lib/ui/home/memories/memories_widget.dart @@ -10,7 +10,7 @@ import "package:photos/ui/common/loading_widget.dart"; import 'package:photos/ui/home/memories/memory_cover_widget.dart'; class MemoriesWidget extends StatefulWidget { - const MemoriesWidget({Key? key}) : super(key: key); + const MemoriesWidget({super.key}); @override State createState() => _MemoriesWidgetState(); @@ -89,7 +89,7 @@ class _MemoriesWidgetState extends State { final collatedMemories = _collateMemories(memories); return SizedBox( - height: _maxHeight, + height: _maxHeight + MemoryCoverWidget.outerStrokeWidth * 2, child: ListView.builder( physics: const AlwaysScrollableScrollPhysics( parent: BouncingScrollPhysics(), diff --git a/mobile/lib/ui/home/memories/memory_cover_widget.dart b/mobile/lib/ui/home/memories/memory_cover_widget.dart index 8c96be307e..0dfc9adf84 100644 --- a/mobile/lib/ui/home/memories/memory_cover_widget.dart +++ b/mobile/lib/ui/home/memories/memory_cover_widget.dart @@ -1,6 +1,9 @@ import "package:flutter/material.dart"; +import "package:flutter/scheduler.dart"; import "package:photos/generated/l10n.dart"; import "package:photos/models/memory.dart"; +import "package:photos/theme/colors.dart"; +import "package:photos/theme/effects.dart"; import "package:photos/theme/ente_theme.dart"; import "package:photos/ui/home/memories/full_screen_memory.dart"; import "package:photos/ui/viewer/file/thumbnail_widget.dart"; @@ -12,7 +15,7 @@ class MemoryCoverWidget extends StatefulWidget { final double offsetOfItem; final double maxHeight; final double maxWidth; - static const centerStrokeWidth = 1.0; + static const outerStrokeWidth = 1.0; static const aspectRatio = 0.68; static const horizontalPadding = 2.5; final double maxScaleOffsetX; @@ -45,7 +48,8 @@ class _MemoryCoverWidgetState extends State { final title = _getTitle(widget.memories[index]); final memory = widget.memories[index]; final isSeen = memory.isSeen(); - final currentTheme = MediaQuery.platformBrightnessOf(context); + final brightness = + SchedulerBinding.instance.platformDispatcher.platformBrightness; return AnimatedBuilder( animation: widget.controller, @@ -78,137 +82,124 @@ class _MemoryCoverWidgetState extends State { height: widget.maxHeight * scale, width: widget.maxWidth * scale, decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: isSeen - ? currentTheme == Brightness.dark - ? const Color.fromRGBO(104, 104, 104, 0.32) - : Colors.transparent - : const Color.fromRGBO(1, 222, 77, 0.11), - spreadRadius: MemoryCoverWidget.centerStrokeWidth / 2, - blurRadius: 0, - ), - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0.13), - blurRadius: 3, - offset: Offset(1, 1), - ), - ], + boxShadow: brightness == Brightness.dark + ? [ + const BoxShadow( + color: strokeFainterDark, + spreadRadius: MemoryCoverWidget.outerStrokeWidth, + blurRadius: 0, + ), + ] + : [...shadowFloatFaintestLight], borderRadius: BorderRadius.circular(5), ), child: ClipRRect( borderRadius: BorderRadius.circular(5), - child: Stack( - fit: StackFit.expand, - alignment: Alignment.bottomCenter, - children: [ - child!, - Container( - decoration: BoxDecoration( - border: Border.all( - color: isSeen - ? currentTheme == Brightness.dark - ? const Color.fromRGBO( - 104, - 104, - 104, - 0.32, - ) - : Colors.transparent - : const Color.fromRGBO(1, 222, 77, 0.11), - width: MemoryCoverWidget.centerStrokeWidth / 2, + child: isSeen + ? ColorFiltered( + colorFilter: const ColorFilter.mode( + Color(0xFFBFBFBF), + BlendMode.hue, ), - borderRadius: BorderRadius.circular(5), - ), - ), - Container( - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [ - Colors.black.withOpacity(0.5), - Colors.transparent, - ], - stops: const [0, 0.85], - begin: Alignment.bottomCenter, - end: Alignment.topCenter, - ), - ), - ), - isSeen - ? const SizedBox.shrink() - : Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - stops: [0, 0.27, 0.4], - colors: [ - Color.fromRGBO(1, 222, 78, 0.293), - Color.fromRGBO(1, 222, 77, 0.07), - Colors.transparent, - ], - transform: GradientRotation(-1.1), + child: Stack( + fit: StackFit.expand, + alignment: Alignment.bottomCenter, + children: [ + child!, + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.black.withOpacity(0.5), + Colors.transparent, + ], + stops: const [0, 1], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), ), ), - ), - isSeen - ? const SizedBox.shrink() - : Stack( - fit: StackFit.expand, - alignment: Alignment.bottomCenter, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Transform.scale( - scale: scale, - child: Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - stops: [0, 0.1, 0.5, 0.9, 1], - colors: [ - Colors.transparent, - Color.fromRGBO(1, 222, 77, 0.1), - Color.fromRGBO(1, 222, 77, 1), - Color.fromRGBO(1, 222, 77, 0.1), - Colors.transparent, - ], + Positioned( + bottom: 8 * scale, + child: Transform.scale( + scale: scale, + child: SizedBox( + width: widget.maxWidth, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 8.0, + ), + child: Hero( + tag: title, + child: Center( + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: isSeen + ? textFaintDark + : Colors.white, + ), + textAlign: TextAlign.left, ), ), - height: 1 * scale, - width: (widget.maxWidth - 16) * scale, ), ), - ], - ), - ], - ), - Positioned( - bottom: 8 * scale, - child: Transform.scale( - scale: scale, - child: SizedBox( - width: widget.maxWidth, - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 8.0, - ), - child: Hero( - tag: title, - child: Text( - title, - style: getEnteTextTheme(context) - .miniBold - .copyWith( - color: Colors.white, - ), + ), ), ), - ), + ], ), + ) + : Stack( + fit: StackFit.expand, + alignment: Alignment.bottomCenter, + children: [ + child!, + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.black.withOpacity(0.5), + Colors.transparent, + ], + stops: const [0, 1], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), + ), + ), + Positioned( + bottom: 8 * scale, + child: Transform.scale( + scale: scale, + child: SizedBox( + width: widget.maxWidth, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 8.0, + ), + child: Hero( + tag: title, + child: Center( + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: Colors.white, + ), + textAlign: TextAlign.left, + ), + ), + ), + ), + ), + ), + ), + ], ), - ), - ], - ), ), ), ],