[WiP] Collage for 2 images

lib/ui/tools/create_collage_page.dart

@@ -1,8 +1,9 @@
 import "package:flutter/material.dart";
-import "package:flutter/widgets.dart";
+import "package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart";
 import "package:logging/logging.dart";
 import "package:photos/generated/l10n.dart";
 import "package:photos/models/file.dart";
+import "package:photos/ui/viewer/file/zoomable_image.dart";
 
 class CreateCollagePage extends StatefulWidget {
   final List<File> files;
@@ -31,6 +32,159 @@ class _CreateCollagePageState extends State<CreateCollagePage> {
   }
 
   Widget _getBody() {
-    return Text("Collage!");
+    return VerticalSplit(widget.files[0], widget.files[1]);
+  }
+
+  Widget _getGrid() {
+    return const TestGrid();
+  }
+}
+
+class VerticalSplit extends StatelessWidget {
+  const VerticalSplit(
+    this.firstFile,
+    this.secondFile, {
+    super.key,
+  });
+
+  final File firstFile, secondFile;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(4),
+      child: StaggeredGrid.count(
+        crossAxisCount: 2,
+        mainAxisSpacing: 4,
+        crossAxisSpacing: 4,
+        axisDirection: AxisDirection.down,
+        children: [
+          StaggeredGridTile.count(
+            crossAxisCellCount: 1,
+            mainAxisCellCount: 2,
+            child: CollageItemWidget(firstFile),
+          ),
+          StaggeredGridTile.count(
+            crossAxisCellCount: 1,
+            mainAxisCellCount: 2,
+            child: CollageItemWidget(secondFile),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class HorizontalSplit extends StatelessWidget {
+  const HorizontalSplit(
+    this.firstFile,
+    this.secondFile, {
+    super.key,
+  });
+
+  final File firstFile, secondFile;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(4),
+      child: StaggeredGrid.count(
+        crossAxisCount: 2,
+        mainAxisSpacing: 4,
+        crossAxisSpacing: 4,
+        axisDirection: AxisDirection.down,
+        children: [
+          StaggeredGridTile.count(
+            crossAxisCellCount: 2,
+            mainAxisCellCount: 1,
+            child: CollageItemWidget(firstFile),
+          ),
+          StaggeredGridTile.count(
+            crossAxisCellCount: 2,
+            mainAxisCellCount: 1,
+            child: CollageItemWidget(secondFile),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class CollageItemWidget extends StatelessWidget {
+  const CollageItemWidget(
+    this.file, {
+    super.key,
+  });
+
+  final File file;
+
+  @override
+  Widget build(BuildContext context) {
+    return InteractiveViewer(
+      child: ZoomableImage(
+        file,
+        backgroundDecoration: const BoxDecoration(
+          color: Colors.transparent,
+        ),
+        tagPrefix: "collage_",
+        shouldCover: true,
+      ),
+    );
+  }
+}
+
+class Tile extends StatelessWidget {
+  final String text;
+  const Tile(this.text, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.blue,
+      child: Center(child: Text(text)),
+    );
+  }
+}
+
+class TestGrid extends StatelessWidget {
+  const TestGrid({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return StaggeredGrid.count(
+      crossAxisCount: 2,
+      mainAxisSpacing: 4,
+      crossAxisSpacing: 4,
+      axisDirection: AxisDirection.down,
+      children: const [
+        StaggeredGridTile.count(
+          crossAxisCellCount: 2,
+          mainAxisCellCount: 1,
+          child: Tile("0"),
+        ),
+        StaggeredGridTile.count(
+          crossAxisCellCount: 2,
+          mainAxisCellCount: 1,
+          child: Tile("1"),
+        ),
+        // StaggeredGridTile.count(
+        //   crossAxisCellCount: 1,
+        //   mainAxisCellCount: 1,
+        //   child: Tile("2"),
+        // ),
+        // StaggeredGridTile.count(
+        //   crossAxisCellCount: 1,
+        //   mainAxisCellCount: 1,
+        //   child: Tile("3"),
+        // ),
+        // StaggeredGridTile.count(
+        //   crossAxisCellCount: 4,
+        //   mainAxisCellCount: 2,
+        //   child: Tile("4"),
+        // ),
+      ],
+    );
   }
 }