#36 create generic image widget

packages/dart_flutter_common/lib/src/components/image.dart

@@ -1 +1,187 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
 
+enum ImageShape {
+  circle,
+  square,
+  rectangle,
+}
+
+class GenericImageWidget extends StatelessWidget {
+  const GenericImageWidget.circle({
+    required this.imageUrl,
+    this.onTap,
+    this.size,
+    this.loadingWidget,
+    super.key,
+  })  : imageShape = ImageShape.circle,
+        borderRadius = null,
+        height = null,
+        width = null;
+
+  const GenericImageWidget.square({
+    required this.imageUrl,
+    this.onTap,
+    this.size,
+    this.borderRadius,
+    this.loadingWidget,
+    super.key,
+  })  : imageShape = ImageShape.square,
+        height = null,
+        width = null;
+
+  const GenericImageWidget.reqtangle({
+    required this.imageUrl,
+    this.onTap,
+    required this.height,
+    required this.width,
+    this.borderRadius,
+    this.loadingWidget,
+    super.key,
+  })  : imageShape = ImageShape.rectangle,
+        size = null;
+
+  final String imageUrl;
+  final ImageShape imageShape;
+  final VoidCallback? onTap;
+  final double? size;
+  final double? height;
+  final double? width;
+  final double? borderRadius;
+  final Widget? loadingWidget;
+  @override
+  Widget build(BuildContext context) {
+    if (imageUrl.isEmpty) {
+      return _ImageDisplayContainer.placeholder(
+        imageShape: imageShape,
+        size: size,
+        height: height,
+        width: width,
+        borderRadius: borderRadius,
+      );
+    }
+    return GestureDetector(
+      onTap: onTap,
+      child: CachedNetworkImage(
+        imageUrl: imageUrl,
+        imageBuilder: (context, imageProvider) {
+          return _ImageDisplayContainer(
+            imageShape: imageShape,
+            size: size,
+            height: height,
+            width: width,
+            borderRadius: borderRadius,
+            decorationImage: DecorationImage(
+              image: imageProvider,
+              fit: BoxFit.cover,
+            ),
+          );
+        },
+        placeholder: (context, url) =>
+            loadingWidget ??
+            _ImageDisplayContainer.placeholder(
+              imageShape: imageShape,
+              size: size,
+              height: height,
+              width: width,
+              borderRadius: borderRadius,
+            ),
+        errorWidget: (context, url, error) =>
+            _ImageDisplayContainer.errorWidget(
+          imageShape: imageShape,
+          size: size,
+          height: height,
+          width: width,
+          borderRadius: borderRadius,
+        ),
+      ),
+    );
+  }
+}
+
+class _ImageDisplayContainer extends StatelessWidget {
+  const _ImageDisplayContainer({
+    required this.imageShape,
+    this.size,
+    this.height,
+    this.width,
+    this.borderRadius,
+    this.decorationImage,
+  })  : color = null,
+        icon = null;
+
+  const _ImageDisplayContainer.placeholder({
+    required this.imageShape,
+    this.size,
+    this.height,
+    this.width,
+    this.borderRadius,
+  })  : color = Colors.grey,
+        decorationImage = null,
+        icon = null;
+
+  const _ImageDisplayContainer.errorWidget({
+    required this.imageShape,
+    this.size,
+    this.height,
+    this.width,
+    this.borderRadius,
+  })  : color = Colors.grey,
+        decorationImage = null,
+        icon = const Icon(
+          Icons.broken_image,
+          color: Colors.white,
+        );
+
+  final ImageShape imageShape;
+  final Color? color;
+  final double? size;
+  final double? height;
+  final double? width;
+  final double? borderRadius;
+  final DecorationImage? decorationImage;
+  final Icon? icon;
+
+  static const double _defaultSize = 64;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (imageShape) {
+      case ImageShape.circle:
+        return Container(
+          height: size ?? _defaultSize,
+          width: size ?? _defaultSize,
+          decoration: BoxDecoration(
+            color: color,
+            shape: BoxShape.circle,
+            image: decorationImage,
+          ),
+          child: icon,
+        );
+
+      case ImageShape.square:
+        return Container(
+          height: size ?? _defaultSize,
+          width: size ?? _defaultSize,
+          decoration: BoxDecoration(
+            color: color,
+            image: decorationImage,
+            borderRadius: BorderRadius.circular(borderRadius ?? 0),
+          ),
+          child: icon,
+        );
+
+      case ImageShape.rectangle:
+        return Container(
+          height: height,
+          width: width,
+          decoration: BoxDecoration(
+            color: color,
+            image: decorationImage,
+            borderRadius: BorderRadius.circular(borderRadius ?? 0),
+          ),
+          child: icon,
+        );
+    }
+  }
+}

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

@@ -10,6 +10,7 @@ import '../../../scaffold_messenger_controller.dart';
 import '../../../user/user.dart';
 import '../../../user/user_mode.dart';
 import '../../color/ui/color.dart';
+import '../../deveopment_components/development_components.dart';
 import '../../image_detail_view/image_detail_view_stub.dart';
 import '../../sample_todo/ui/sample_todos.dart';
 
@@ -233,6 +234,16 @@ class DevelopmentItemsPage extends ConsumerWidget {
             //   ),
             // ),
           ),
+          ListTile(
+            title: const Text('Components'),
+            // TODO: 後に auto_route を採用して Navigator.pushNamed を使用する予定
+            onTap: () => Navigator.push<void>(
+              context,
+              MaterialPageRoute<void>(
+                builder: (context) => const DevelopmentComponents(),
+              ),
+            ),
+          ),
           ListTile(
             title: const Text(
               '画像の詳細拡大画面サンプル',
@@ -241,7 +252,7 @@ class DevelopmentItemsPage extends ConsumerWidget {
             onTap: () => Navigator.push<void>(
               context,
               MaterialPageRoute<void>(
-                builder: (context) => ImageDetailViewStubPage(),
+                builder: (context) => const ImageDetailViewStubPage(),
               ),
             ),
           ),

packages/mottai_flutter_app/lib/development/deveopment_components/development_components.dart

@@ -0,0 +1,62 @@
+import 'package:dart_flutter_common/dart_flutter_common.dart';
+import 'package:flutter/material.dart';
+
+class DevelopmentComponents extends StatelessWidget {
+  const DevelopmentComponents({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('開発中のComponents'),
+      ),
+      body: Column(
+        children: [
+          Column(
+            children: [
+              const Text('汎用的な画像Widget'),
+              const GenericImageWidget.circle(
+                imageUrl: '',
+              ),
+              const SizedBox(
+                height: 10,
+              ),
+              const GenericImageWidget.circle(
+                imageUrl: 'https://picsum.photos/128',
+              ),
+              const SizedBox(
+                height: 10,
+              ),
+              const GenericImageWidget.square(
+                imageUrl: 'https://picsum.photos/200',
+                size: 100,
+              ),
+              const SizedBox(
+                height: 10,
+              ),
+              GenericImageWidget.reqtangle(
+                imageUrl: 'https://picsum.photos/100',
+                height: 100,
+                width: 250,
+                borderRadius: 10,
+                onTap: () => debugPrint('onTap'),
+              ),
+              const SizedBox(
+                height: 10,
+              ),
+              // errorWidgetのサンプル
+              GenericImageWidget.reqtangle(
+                imageUrl: 'https://testinvalidurl.com',
+                height: 100,
+                width: 250,
+                borderRadius: 10,
+                onTap: () => debugPrint('onTap'),
+              ),
+            ],
+          ),
+          const Divider(),
+        ],
+      ),
+    );
+  }
+}

packages/mottai_flutter_app/pubspec.lock

@@ -122,7 +122,7 @@ packages:
     source: hosted
     version: "8.6.1"
   cached_network_image:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: cached_network_image
       sha256: fd3d0dc1d451f9a252b32d95d3f0c3c487bc41a75eba2e6097cb0b9c71491b15

packages/mottai_flutter_app/pubspec.yaml

@@ -8,6 +8,7 @@ environment:
 
 dependencies:
   auto_route: ^7.7.0
+  cached_network_image: ^3.2.3
   crypto: ^3.0.1
   dart_flutter_common:
     path: ../dart_flutter_common