Newer
Older
MiniTias / lib / widgets / image_detail_dialog.dart
import 'dart:io';

import 'package:flutter/material.dart';

/// 画像の拡大表示ダイアログ.ピンチズームと削除ボタンを備える.
class ImageDetailDialog extends StatelessWidget {
  const ImageDetailDialog({
    super.key,
    required this.file,
    required this.onDelete,
  });

  final File file;
  final VoidCallback onDelete;

  @override
  Widget build(BuildContext context) {
    final fileName = file.path.split('/').last;

    return Dialog(
      backgroundColor: Colors.black,
      insetPadding: const EdgeInsets.all(8),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // ヘッダー(ファイル名 + 閉じるボタン)
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    fileName,
                    style: const TextStyle(color: Colors.white, fontSize: 12),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.close, color: Colors.white),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            ),
          ),
          // 画像(ピンチズーム対応)
          Flexible(
            child: InteractiveViewer(
              minScale: 1.0,
              maxScale: 5.0,
              child: Image.file(file),
            ),
          ),
          // 削除ボタン
          Padding(
            padding: const EdgeInsets.all(8),
            child: TextButton.icon(
              onPressed: () => _confirmDelete(context),
              icon: const Icon(Icons.delete, color: Colors.red),
              label: const Text('削除', style: TextStyle(color: Colors.red)),
            ),
          ),
        ],
      ),
    );
  }

  void _confirmDelete(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('画像を削除'),
        content: const Text('この画像を削除しますか?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text('キャンセル'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(); // 確認ダイアログを閉じる
              Navigator.of(context).pop(); // 詳細ダイアログを閉じる
              onDelete();
            },
            child: const Text('削除', style: TextStyle(color: Colors.red)),
          ),
        ],
      ),
    );
  }
}