import 'dart:developer'; import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:mc_common_app/extensions/int_extensions.dart'; import 'package:mc_common_app/generated/locale_keys.g.dart'; import 'package:mc_common_app/models/chat_models/chat_message_model.dart'; import 'package:mc_common_app/theme/colors.dart'; import 'package:mc_common_app/widgets/common_widgets/app_bar.dart'; import 'package:mc_common_app/widgets/extensions/extensions_widget.dart'; class MediaViewerScreen extends StatefulWidget { final List images; // List of image URLs or file paths const MediaViewerScreen({Key? key, required this.images}) : super(key: key); @override MediaViewerScreenState createState() => MediaViewerScreenState(); } class MediaViewerScreenState extends State { int selectedIndex = 0; // Track selected image index @override Widget build(BuildContext context) { debugPrint("loaded"); return Scaffold( appBar: CustomAppBar(title: LocaleKeys.pictures.tr()), body: Column( children: [ // Main Image Display (selected image) Expanded( child: Padding( padding: const EdgeInsets.all(16.0), child: Center( child: InteractiveViewer( panEnabled: true, // Allow panning scaleEnabled: true, // Allow zooming minScale: 1.0, // Minimum zoom level maxScale: 4.0, child: ClipRRect( borderRadius: BorderRadius.circular(16), child: (widget.images[selectedIndex].isFromNetwork ?? false) ? widget.images[selectedIndex].imageUrl.buildNetworkImage( fit: BoxFit.cover, width: double.infinity, height: double.infinity, ) : widget.images[selectedIndex].imagePath.buildFileImage( fit: BoxFit.cover, width: double.infinity, height: double.infinity, ), ), ), ), ), ), // Thumbnail List at the bottom Container( height: 100, // Set height for thumbnail list padding: const EdgeInsets.symmetric(vertical: 8.0), child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: widget.images.length, itemBuilder: (context, index) { return GestureDetector( onTap: () { setState(() { selectedIndex = index; // Change the selected image }); }, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Container( width: 80, // Thumbnail size height: 80, decoration: BoxDecoration( border: Border.all( color: selectedIndex == index ? MyColors.darkPrimaryColor : MyColors.greyShadowColor, // Highlight selected image width: selectedIndex == index ? 2 : 1, ), borderRadius: BorderRadius.circular(10), ), child: ClipRRect( borderRadius: BorderRadius.circular(8), child: (widget.images[index].isFromNetwork ?? false) ? widget.images[index].imageUrl.buildNetworkImage( fit: BoxFit.cover, width: double.infinity, height: double.infinity, ) : widget.images[index].imagePath.buildFileImage( fit: BoxFit.cover, width: double.infinity, height: double.infinity, ), ), ), ), ); }, ), ), 10.height, ], ), ); } }