Merge pull request #75 from KosukeSaigusa/64_create_image_detail_view

#64 画像詳細表示ビューの作成

packages/dart_flutter_common/lib/dart_flutter_common.dart

@@ -4,3 +4,4 @@ export 'src/int.dart';
 export 'src/pick_image.dart';
 export 'src/scaffold_messenger_controller.dart';
 export 'src/string.dart';
+export 'src/image_detail_view.dart';

packages/dart_flutter_common/lib/src/image_detail_view.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+
+class DetailDisplayableImage extends StatelessWidget {
+  DetailDisplayableImage({
+    required this.image,
+    super.key,
+  });
+
+  final Image image;
+
+  /// インスタンス生成された回数。
+  /// Heroのタグとして使用。環境にもよるが2^64回でオーバーフロー
+  /// そこまでの数生成されることはないため、この方法としている。
+  static int _instanceCount = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    final tag = _instanceCount.toString();
+    _instanceCount++;
+    return GestureDetector(
+      onTap: () => Navigator.push<void>(
+        context,
+        MaterialPageRoute<void>(
+          builder: (context) => _ImageDetailView(
+            tag: tag,
+            image: image,
+          ),
+        ),
+      ),
+      child: Hero(
+        tag: tag,
+        child: image,
+      ),
+    );
+  }
+}
+
+// 詳細画像表示
+class _ImageDetailView extends StatelessWidget {
+  _ImageDetailView({
+    required this.tag,
+    required this.image,
+    super.key,
+  });
+
+  final String tag;
+  final Image image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        // 背景、タッチイベント捕捉Widget
+        GestureDetector(
+          onTap: () {
+            Navigator.pop(context);
+          },
+          child: Scaffold(
+            floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
+            floatingActionButton: IconButton(
+              icon: const Icon(Icons.close),
+              onPressed: () {
+                Navigator.pop(context);
+              },
+            ),
+            body: Container(
+              height: MediaQuery.of(context).size.height,
+              width: MediaQuery.of(context).size.width,
+              decoration: const BoxDecoration(
+                color: Colors.black,
+              ),
+            ),
+          ),
+        ),
+        // 画像表示Widget
+        Center(
+          child: InteractiveViewer(
+            clipBehavior: Clip.none,
+            child: Hero(
+              tag: tag,
+              child: image,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

packages/mottai_flutter_app/lib/development/development_items/ui/development_items.dart

@@ -10,9 +10,9 @@ import '../../../scaffold_messenger_controller.dart';
 import '../../../user/user.dart';
 import '../../../user/user_mode.dart';
 import '../../color/ui/color.dart';
+import '../../image_detail_view/image_detail_view_stub.dart';
 import '../../sample_todo/ui/sample_todos.dart';
 
-
 /// 開発中の各ページへの導線を表示するページ。
 class DevelopmentItemsPage extends ConsumerWidget {
   const DevelopmentItemsPage({super.key});
@@ -233,6 +233,18 @@ class DevelopmentItemsPage extends ConsumerWidget {
             //   ),
             // ),
           ),
+          ListTile(
+            title: const Text(
+              '画像の詳細拡大画面サンプル',
+            ),
+            // TODO: 後に auto_route を採用して Navigator.pushNamed を使用する予定
+            onTap: () => Navigator.push<void>(
+              context,
+              MaterialPageRoute<void>(
+                builder: (context) => ImageDetailViewStubPage(),
+              ),
+            ),
+          ),
           const Divider(),
           Padding(
             padding: const EdgeInsets.all(16),

packages/mottai_flutter_app/lib/development/image_detail_view/image_detail_view_stub.dart

@@ -0,0 +1,20 @@
+import 'package:dart_flutter_common/dart_flutter_common.dart';
+import 'package:flutter/material.dart';
+
+/// 開発中の各ページへの導線を表示するページ。
+class ImageDetailViewStubPage extends StatelessWidget {
+  const ImageDetailViewStubPage({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('画像詳細拡大画面サンプル'),
+      ),
+      body: DetailDisplayableImage(
+        image: Image.network(
+          'https://free-materials.com/adm/wp-content/uploads/2017/02/adtDSC_0905-300x199.jpg',
+        ),
+      ),
+    );
+  }
+}