pantry-flutter/lib/widgets/image_preview.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import 'package:pantry/widgets/app_bar_back_leading.dart';

class ImagePreview extends StatelessWidget {
  final String imageUrl;
  final Map<String, String> headers;
  final String heroTag;

  const ImagePreview({
    super.key,
    required this.imageUrl,
    required this.heroTag,
    this.headers = const {},
  });

  static void show(
    BuildContext context, {
    required String imageUrl,
    required String heroTag,
    Map<String, String> headers = const {},
  }) {
    Navigator.of(context).push(
      PageRouteBuilder(
        opaque: false,
        barrierColor: Colors.black87,
        barrierDismissible: true,
        transitionDuration: const Duration(milliseconds: 300),
        reverseTransitionDuration: const Duration(milliseconds: 300),
        pageBuilder: (context, _, _) => ImagePreview(
          imageUrl: imageUrl,
          heroTag: heroTag,
          headers: headers,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          foregroundColor: Colors.white,
          elevation: 0,
          leading: appBarBackLeading(context),
        ),
        body: InteractiveViewer(
          minScale: 0.5,
          maxScale: 4.0,
          clipBehavior: Clip.none,
          child: Center(
            child: Hero(
              tag: heroTag,
              child: CachedNetworkImage(
                imageUrl: imageUrl,
                httpHeaders: headers,
                fit: BoxFit.contain,
                errorWidget: (_, _, _) => const Icon(
                  Icons.broken_image_outlined,
                  size: 64,
                  color: Colors.white54,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}