Update ProductImageDialog

PlugFox · Jan 9, 2024 · 583fa58 · 583fa58
1 parent 39e734f
commit 583fa58
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/example/lib/src/common/router/router_state_mixin.dart b/example/lib/src/common/router/router_state_mixin.dart
@@ -4,7 +4,8 @@ import 'package:example/src/common/router/home_guard.dart';
 import 'package:example/src/common/router/routes.dart';
 import 'package:example/src/common/router/shop_guard.dart';
 import 'package:example/src/feature/shop/data/shop_tabs_cache_service.dart';
-import 'package:flutter/widgets.dart' show State, StatefulWidget, ValueNotifier;
+import 'package:flutter/widgets.dart'
+    show DefaultTransitionDelegate, State, StatefulWidget, ValueNotifier;
 import 'package:octopus/octopus.dart';
 
 mixin RouterStateMixin<T extends StatefulWidget> on State<T> {
@@ -30,6 +31,7 @@ mixin RouterStateMixin<T extends StatefulWidget> on State<T> {
     router = Octopus(
       routes: Routes.values,
       defaultRoute: Routes.home,
+      transitionDelegate: const DefaultTransitionDelegate<void>(),
       guards: <IOctopusGuard>[
         // Check authentication.
         AuthenticationGuard(

diff --git a/example/lib/src/feature/shop/widget/product_image_screen.dart b/example/lib/src/feature/shop/widget/product_image_screen.dart
@@ -1,16 +1,21 @@
+import 'dart:math' as math;
+
+import 'package:example/src/common/constant/config.dart';
 import 'package:example/src/common/widget/not_found_screen.dart';
 import 'package:example/src/feature/shop/model/product.dart';
 import 'package:example/src/feature/shop/widget/shop_scope.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:octopus/octopus.dart';
 import 'package:photo_view/photo_view.dart';
 
 /// {@template photo_image_screen}
 /// ProductImageViewScreen widget
 /// {@endtemplate}
-class ProductImageScreen extends StatelessWidget {
+class ProductImageDialog extends StatelessWidget {
   /// {@macro photo_image_screen}
-  const ProductImageScreen._({
+  const ProductImageDialog._({
     required this.id,
     required this.idx,
     super.key, // ignore: unused_element
@@ -27,24 +32,17 @@ class ProductImageScreen extends StatelessWidget {
     BuildContext context, {
     required ProductID id,
     required int index,
-  }) {
-    final navigator = Navigator.of(context, rootNavigator: true);
-    final route = PageRouteBuilder<void>(
-      pageBuilder: (context, _, __) => BackButtonListener(
-        onBackButtonPressed: navigator.maybePop,
-        child: ProductImageScreen._(id: id, idx: index),
-      ),
-      transitionsBuilder: (context, animation, secondayAnimation, child) =>
-          ScaleTransition(
-        scale: Tween<double>(begin: 1.25, end: 1).animate(animation),
-        child: FadeTransition(
-          opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
-          child: child,
+  }) =>
+      context.octopus.showDialog(
+        (context) => Dialog(
+          elevation: 8,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(24)),
+          ),
+          child: ProductImageDialog._(id: id, idx: index),
         ),
-      ),
-    );
-    return navigator.push<void>(route);
-  }
+        arguments: <String, String>{'idx': index.toString()},
+      );
 
   @override
   Widget build(BuildContext context) {
@@ -66,11 +64,14 @@ class ProductImageScreen extends StatelessWidget {
     };
     if (index == null) return notFoundScreen;
     if (index < 0 || index >= product.images.length) return notFoundScreen;
-    final image = product.images[index];
+    final image = (!kIsWeb || Config.environment.isDevelopment
+        ? AssetImage(product.images[index])
+        : NetworkImage('/${product.images[index]}')) as ImageProvider<Object>;
 
-    return Scaffold(
-      resizeToAvoidBottomInset: false,
-      body: SizedBox.expand(
+    return ClipRRect(
+      borderRadius: const BorderRadius.all(Radius.circular(24)),
+      child: SizedBox.square(
+        dimension: math.min(MediaQuery.sizeOf(context).shortestSide, 400),
         child: Stack(
           children: <Widget>[
             Positioned.fill(
@@ -86,8 +87,10 @@ class ProductImageScreen extends StatelessWidget {
                   child: Center(
                     child: Hero(
                       tag: 'product-${product.id}-image-$index',
-                      child: Image.asset(
-                        image,
+                      child: Image(
+                        image: image,
+                        width: 400,
+                        height: 400,
                         fit: BoxFit.fitHeight,
                       ),
                     ),

diff --git a/example/lib/src/feature/shop/widget/product_screen.dart b/example/lib/src/feature/shop/widget/product_screen.dart
@@ -803,7 +803,7 @@ class _ProductPhotosListViewState extends State<_ProductPhotosListView> {
                             color: Colors.transparent,
                             child: InkWell(
                               onTap: () {
-                                ProductImageScreen.show(
+                                ProductImageDialog.show(
                                   context,
                                   id: widget.product.id,
                                   index: idx,

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -498,7 +498,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1-pre.2"
+    version: "0.0.2"
   package_config:
     dependency: transitive
     description: