This widget allows users to view an image in full screen with an interactive zoom feature. To use it, simply provide an image path (URL). When triggered, it displays the specified image in a dialog with a blurred background for a sleek appearance. Users can easily close the dialog by tapping anywhere on the image, eliminating the need to press the close button in the upper corner, making it more user-friendly. The widget uses an InteractiveViewer to enable panning and zooming, allowing users to explore the image details easily. It supports a minimum scale of 0.5 and a maximum scale of 4.0, ensuring a smooth user experience.
import 'dart:ui';
Future<void> expandedImageAction(BuildContext context, String imageURL) async {
showDialog(
context: context,
builder: (BuildContext context) {
return _ExpandedImageDialog(imageURL: imageURL);
},
);
}
class _ExpandedImageDialog extends StatelessWidget {
final String imageURL;
const _ExpandedImageDialog({required this.imageURL});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Material(
color: Colors.transparent,
child: Stack(
fit: StackFit.expand,
children: [
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
color: Colors.black.withOpacity(0.5),
),
),
Center(
child: InteractiveViewer(
panEnabled: true,
boundaryMargin: EdgeInsets.all(20),
minScale: 0.5,
maxScale: 4.0,
child: Image.network(
imageURL,
fit: BoxFit.contain,
),
),
),
],
),
),
);
}
}