feat(mobile): memories lane with the new CarouselView (#11892)

* feat(mobile): memories lane with the new CarouselView

* tuning

* tuning
This commit is contained in:
Alex 2024-08-18 21:27:19 -05:00 committed by GitHub
parent fa7f1e656f
commit bc31b7c06c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,8 @@
import 'package:auto_route/auto_route.dart';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/models/memories/memory.model.dart';
import 'package:immich_mobile/widgets/asset_grid/thumbnail_placeholder.dart';
import 'package:immich_mobile/providers/memory.provider.dart';
import 'package:immich_mobile/routing/router.dart';
@ -9,6 +11,7 @@ import 'package:immich_mobile/widgets/common/immich_image.dart';
class MemoryLane extends HookConsumerWidget {
const MemoryLane({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final memoryLaneFutureProvider = ref.watch(memoryFutureProvider);
@ -16,42 +19,61 @@ class MemoryLane extends HookConsumerWidget {
final memoryLane = memoryLaneFutureProvider
.whenData(
(memories) => memories != null
? SizedBox(
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: memories.length,
padding: const EdgeInsets.only(
right: 8.0,
bottom: 8,
top: 10,
left: 10,
? ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 200,
),
itemBuilder: (context, index) {
final memory = memories[index];
return GestureDetector(
onTap: () {
ref
.read(hapticFeedbackProvider.notifier)
.heavyImpact();
child: CarouselView(
itemExtent: 145.0,
shrinkExtent: 1.0,
elevation: 2,
backgroundColor: Colors.black,
overlayColor: WidgetStateProperty.all(
Colors.white.withOpacity(0.1),
),
onTap: (memoryIndex) {
ref.read(hapticFeedbackProvider.notifier).heavyImpact();
context.pushRoute(
MemoryRoute(
memories: memories,
memoryIndex: index,
memoryIndex: memoryIndex,
),
);
},
children: memories
.mapIndexed<Widget>(
(index, memory) => MemoryCard(
index: index,
memory: memory,
),
)
.toList(),
),
)
: const SizedBox(),
)
.value;
return memoryLane ?? const SizedBox();
}
}
class MemoryCard extends ConsumerWidget {
const MemoryCard({
super.key,
required this.index,
required this.memory,
});
final int index;
final Memory memory;
@override
Widget build(BuildContext context, WidgetRef ref) {
return Center(
child: Stack(
children: [
Card(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(13.0),
),
clipBehavior: Clip.hardEdge,
child: ColorFiltered(
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.2),
BlendMode.darken,
@ -61,16 +83,15 @@ class MemoryLane extends HookConsumerWidget {
child: ImmichImage(
memory.assets[0],
fit: BoxFit.cover,
width: 130,
width: 205,
height: 200,
placeholder: const ThumbnailPlaceholder(
width: 130,
width: 105,
height: 200,
),
),
),
),
),
Positioned(
bottom: 16,
left: 16,
@ -91,13 +112,5 @@ class MemoryLane extends HookConsumerWidget {
],
),
);
},
),
)
: const SizedBox(),
)
.value;
return memoryLane ?? const SizedBox();
}
}