cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-15 09:59:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
1 changed files with 85 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
mobile/lib/widgets/memories/memory_lane.dart
View File

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