[mob][photos] Memories widget UI changes (#4448)
### Description Change seen and unseen memory states. (New state on the right) <img width="824" alt="Screenshot 2024-12-20 at 1 12 47 PM" src="https://github.com/user-attachments/assets/f8d176f2-08d0-49fc-9758-4f8f75ef4479" />
This commit is contained in:
Ashil
@@ -12,6 +12,10 @@ List<BoxShadow> shadowFloatFaintLight = const [
|
||||
BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.12)),
|
||||
];
|
||||
|
||||
List<BoxShadow> shadowFloatFaintestLight = const [
|
||||
BoxShadow(blurRadius: 1, color: Color.fromRGBO(0, 0, 0, 0.25)),
|
||||
];
|
||||
|
||||
List<BoxShadow> shadowMenuLight = const [
|
||||
BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)),
|
||||
BoxShadow(
|
||||
|
||||
@@ -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<MemoriesWidget> createState() => _MemoriesWidgetState();
|
||||
@@ -89,7 +89,7 @@ class _MemoriesWidgetState extends State<MemoriesWidget> {
|
||||
final collatedMemories = _collateMemories(memories);
|
||||
|
||||
return SizedBox(
|
||||
height: _maxHeight,
|
||||
height: _maxHeight + MemoryCoverWidget.outerStrokeWidth * 2,
|
||||
child: ListView.builder(
|
||||
physics: const AlwaysScrollableScrollPhysics(
|
||||
parent: BouncingScrollPhysics(),
|
||||
|
||||
@@ -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<MemoryCoverWidget> {
|
||||
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<MemoryCoverWidget> {
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user