fix stack handling

2024-11-16 18:05:22 -05:00
parent 3b9a3d4037
commit d1c7ed5464
4 changed files with 123 additions and 100 deletions
@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_stack.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/image/immich_remote_image_provider.dart';
+
+class GalleryStackedChildren extends HookConsumerWidget {
+  final ValueNotifier<int> stackIndex;
+
+  const GalleryStackedChildren(this.stackIndex, {super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetProvider);
+    if (asset == null) {
+      return const SizedBox();
+    }
+
+    final stackId = asset.stackId;
+    if (stackId == null) {
+      return const SizedBox();
+    }
+
+    final stackElements = ref.watch(assetStackStateProvider(stackId));
+
+    return SizedBox(
+      height: 80,
+      child: ListView.builder(
+        shrinkWrap: true,
+        scrollDirection: Axis.horizontal,
+        itemCount: stackElements.length,
+        padding: const EdgeInsets.only(
+          left: 5,
+          right: 5,
+          bottom: 30,
+        ),
+        itemBuilder: (context, index) {
+          final currentAsset = stackElements.elementAt(index);
+          final assetId = currentAsset.remoteId;
+          if (assetId == null) {
+            return const SizedBox();
+          }
+
+          return Padding(
+            key: ValueKey(assetId),
+            padding: const EdgeInsets.only(right: 5),
+            child: GestureDetector(
+              onTap: () {
+                stackIndex.value = index;
+                ref.read(currentAssetProvider.notifier).set(currentAsset);
+              },
+              child: Container(
+                width: 60,
+                height: 60,
+                decoration: index == stackIndex.value
+                    ? const BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.all(Radius.circular(6)),
+                        border: Border.fromBorderSide(
+                          BorderSide(color: Colors.white, width: 2),
+                        ),
+                      )
+                    : const BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.all(Radius.circular(6)),
+                        border: null,
+                      ),
+                child: ClipRRect(
+                  borderRadius: const BorderRadius.all(Radius.circular(4)),
+                  child: Image(
+                    fit: BoxFit.cover,
+                    image: ImmichRemoteImageProvider(assetId: assetId),
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}