feat: use composited image in share modal (flutter#566)

.vscode/launch.json

@@ -9,7 +9,7 @@
       "request": "launch",
       "type": "dart",
       "program": "lib/main.dart",
-      "args": ["-d", "chrome"]
+      "args": ["-d", "chrome", "--web-renderer", "html"]
     }
   ]
 }

lib/photobooth/widgets/widgets.dart

@@ -2,7 +2,6 @@ export 'animated_characters/animated_characters.dart';
 export 'character_icon_button.dart';
 export 'characters_caption.dart';
 export 'characters_layer.dart';
-export 'framed_photobooth_photo.dart';
 export 'photobooth_background.dart';
 export 'photobooth_error.dart';
 export 'photobooth_photo.dart';

lib/share/view/share_bottom_sheet.dart

@@ -1,7 +1,7 @@
-import 'package:camera/camera.dart';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:io_photobooth/l10n/l10n.dart';
-import 'package:io_photobooth/photobooth/photobooth.dart';
 import 'package:io_photobooth/share/share.dart';
 import 'package:photobooth_ui/photobooth_ui.dart';
 
@@ -11,7 +11,7 @@ class ShareBottomSheet extends StatelessWidget {
     required this.image,
   }) : super(key: key);
 
-  final CameraImage image;
+  final Uint8List image;
 
   @override
   Widget build(BuildContext context) {
@@ -36,14 +36,8 @@ class ShareBottomSheet extends StatelessWidget {
                 mainAxisSize: MainAxisSize.min,
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  const SizedBox(height: 32),
-                  Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 25.0),
-                    child: FramedPhotoboothPhoto(
-                      aspectRatio: PhotoboothAspectRatio.portrait,
-                      image: image.data,
-                    ),
-                  ),
+                  const SizedBox(height: 60),
+                  SharePreviewPhoto(image: image),
                   const SizedBox(height: 60),
                   SelectableText(
                     l10n.shareDialogHeading,

lib/share/view/share_dialog.dart

@@ -1,19 +1,14 @@
-import 'package:camera/camera.dart';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:io_photobooth/l10n/l10n.dart';
-import 'package:io_photobooth/photobooth/photobooth.dart';
 import 'package:io_photobooth/share/share.dart';
 import 'package:photobooth_ui/photobooth_ui.dart';
 
 class ShareDialog extends StatelessWidget {
-  const ShareDialog({
-    Key? key,
-    required this.aspectRatio,
-    required this.image,
-  }) : super(key: key);
+  const ShareDialog({Key? key, required this.image}) : super(key: key);
 
-  final double aspectRatio;
-  final CameraImage image;
+  final Uint8List image;
 
   @override
   Widget build(BuildContext context) {
@@ -44,14 +39,7 @@ class ShareDialog extends StatelessWidget {
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                    Container(
-                      height: 430,
-                      width: 600,
-                      child: FramedPhotoboothPhoto(
-                        aspectRatio: aspectRatio,
-                        image: image.data,
-                      ),
-                    ),
+                    SharePreviewPhoto(image: image),
                     const SizedBox(height: 60),
                     SelectableText(
                       l10n.shareDialogHeading,

lib/share/widgets/share_body.dart

@@ -1,4 +1,5 @@
-import 'package:camera/camera.dart';
+import 'dart:typed_data';
+
 import 'package:cross_file/cross_file.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -18,6 +19,9 @@ class ShareBody extends StatelessWidget {
     final compositeStatus = context.select(
       (ShareBloc bloc) => bloc.state.compositeStatus,
     );
+    final compositedImage = context.select(
+      (ShareBloc bloc) => bloc.state.bytes,
+    );
     final isUploadSuccess = context.select(
       (ShareBloc bloc) => bloc.state.uploadStatus.isSuccess,
     );
@@ -55,12 +59,14 @@ class ShareBody extends StatelessWidget {
                       ),
                       child: ShareCopyableLink(link: shareUrl),
                     ),
-                  if (image != null && file != null)
+                  if (compositedImage != null && file != null)
                     ResponsiveLayoutBuilder(
-                      small: (_, __) =>
-                          MobileButtonsLayout(image: image, file: file),
+                      small: (_, __) => MobileButtonsLayout(
+                        image: compositedImage,
+                        file: file,
+                      ),
                       large: (_, __) => DesktopButtonsLayout(
-                        image: image,
+                        image: compositedImage,
                         file: file,
                       ),
                     ),
@@ -87,7 +93,7 @@ class DesktopButtonsLayout extends StatelessWidget {
     required this.file,
   }) : super(key: key);
 
-  final CameraImage image;
+  final Uint8List image;
   final XFile file;
 
   @override
@@ -113,7 +119,7 @@ class MobileButtonsLayout extends StatelessWidget {
     required this.file,
   }) : super(key: key);
 
-  final CameraImage image;
+  final Uint8List image;
   final XFile file;
 
   @override

lib/share/widgets/share_button.dart

@@ -1,4 +1,5 @@
-import 'package:camera/camera.dart';
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:io_photobooth/l10n/l10n.dart';
@@ -16,8 +17,8 @@ class ShareButton extends StatelessWidget {
   })  : platformHelper = platformHelper ?? PlatformHelper(),
         super(key: key);
 
-  /// Raw image from camera
-  final CameraImage image;
+  /// Composited image
+  final Uint8List image;
 
   /// Optional [PlatformHelper] instance.
   final PlatformHelper platformHelper;
@@ -36,10 +37,7 @@ class ShareButton extends StatelessWidget {
               BlocProvider.value(value: context.read<PhotoboothBloc>()),
               BlocProvider.value(value: context.read<ShareBloc>()),
             ],
-            child: ShareDialog(
-              aspectRatio: PhotoboothAspectRatio.landscape,
-              image: image,
-            ),
+            child: ShareDialog(image: image),
           ),
           portraitChild: MultiBlocProvider(
             providers: [

lib/share/widgets/share_preview_photo.dart

@@ -0,0 +1,36 @@
+import 'dart:math' as math;
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:photobooth_ui/photobooth_ui.dart';
+
+class SharePreviewPhoto extends StatelessWidget {
+  const SharePreviewPhoto({Key? key, required this.image}) : super(key: key);
+
+  final Uint8List image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Transform.rotate(
+      angle: -5 * (math.pi / 180),
+      child: Container(
+        constraints: const BoxConstraints(maxWidth: 600, maxHeight: 400),
+        decoration: const BoxDecoration(
+          boxShadow: [
+            BoxShadow(
+              color: PhotoboothColors.black54,
+              blurRadius: 7,
+              offset: Offset(-3, 9),
+              spreadRadius: 1,
+            ),
+          ],
+        ),
+        child: Image.memory(
+          image,
+          isAntiAlias: true,
+          filterQuality: FilterQuality.high,
+        ),
+      ),
+    );
+  }
+}

lib/share/widgets/widgets.dart

@@ -7,6 +7,7 @@ export 'share_button.dart';
 export 'share_caption.dart';
 export 'share_copyable_link.dart';
 export 'share_heading.dart';
+export 'share_preview_photo.dart';
 export 'share_progress_overlay.dart';
 export 'share_social_media_clarification.dart';
 export 'share_state_listener.dart';