adjusted logbook grid

lib/screens/logbook/components/grid_tile/widget_grid_tile_logbook_photo.dart

@@ -0,0 +1,35 @@
+import 'dart:io';
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:lightmeter/res/dimens.dart';
+import 'package:m3_lightmeter_resources/m3_lightmeter_resources.dart';
+
+class LogbookPhotoGridTile extends StatelessWidget {
+  final LogbookPhoto photo;
+  final VoidCallback onTap;
+
+  const LogbookPhotoGridTile({
+    required this.photo,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Card(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusM)),
+        child: FadeInImage(
+          placeholder: MemoryImage(Uint8List(0)), // Will be replaced by placeholder widget
+          image: FileImage(File(photo.name)),
+          fit: BoxFit.cover,
+          fadeInDuration: Dimens.durationS,
+          fadeOutDuration: Dimens.durationS,
+          imageErrorBuilder: (_, __, ___) => const Center(child: Icon(Icons.error_outline)),
+          placeholderErrorBuilder: (_, __, ___) => const SizedBox.shrink(),
+        ),
+      ),
+    );
+  }
+}

lib/screens/logbook/screen_logbook.dart

@@ -1,11 +1,10 @@
-import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:lightmeter/generated/l10n.dart';
 import 'package:lightmeter/navigation/routes.dart';
 import 'package:lightmeter/platform_config.dart';
 import 'package:lightmeter/providers/logbook_photos_provider.dart';
 import 'package:lightmeter/res/dimens.dart';
+import 'package:lightmeter/screens/logbook/components/grid_tile/widget_grid_tile_logbook_photo.dart';
 import 'package:lightmeter/screens/shared/sliver_screen/screen_sliver.dart';
 import 'package:m3_lightmeter_resources/m3_lightmeter_resources.dart';
 
@@ -54,26 +53,24 @@ class _PicturesGridBuilder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SliverGrid(
+    return SliverPadding(
-      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+      padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
-        maxCrossAxisExtent:
+      sliver: SliverGrid(
-            (MediaQuery.sizeOf(context).width - Dimens.paddingS * (_crossAxisCount - 1)) / _crossAxisCount,
+        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-        mainAxisSpacing: Dimens.paddingS,
+          maxCrossAxisExtent:
-        crossAxisSpacing: Dimens.paddingS,
+              (MediaQuery.sizeOf(context).width - Dimens.paddingS * (_crossAxisCount - 1) - Dimens.paddingM * 2) /
-        childAspectRatio: PlatformConfig.cameraPreviewAspectRatio,
+                  _crossAxisCount,
-      ),
+          mainAxisSpacing: Dimens.paddingS,
-      delegate: SliverChildBuilderDelegate(
+          crossAxisSpacing: Dimens.paddingS,
-        (BuildContext context, int index) {
+          childAspectRatio: PlatformConfig.cameraPreviewAspectRatio,
-          return GestureDetector(
+        ),
+        delegate: SliverChildBuilderDelegate(
+          (_, int index) => LogbookPhotoGridTile(
+            photo: values[index],
             onTap: () => onEdit(values[index]),
-            child: Container(
+          ),
-              alignment: Alignment.center,
+          childCount: values.length,
-              color: Colors.teal[100 * (index % 9)],
+        ),
-              child: Image.file(File(values[index].name)),
-            ),
-          );
-        },
-        childCount: values.length,
       ),
     );
   }