renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix gallery

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-17 16:08:20 +07:00
parent ff3629d6d1
commit 0798b28db5
5 changed files with 118 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
lib/features/products/presentation/widgets/product_detail/image_gallery_section.dart
View File

@@ -19,9 +19,9 @@ import 'package:worker/features/products/domain/entities/product.dart';
/// - Image indicators (dots)
/// - Thumbnail gallery row (horizontal scroll)
class ImageGallerySection extends StatefulWidget {
final Product product;
const ImageGallerySection({super.key, required this.product});
final Product product;
@override
State<ImageGallerySection> createState() => _ImageGallerySectionState();
@@ -203,48 +203,78 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
// Thumbnail Gallery
if (images.length > 1)
Container(
height: 92,
padding: const EdgeInsets.all(16),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
final isActive = _currentImageIndex == index;
return GestureDetector(
onTap: () => _changeImage(index),
child: Container(
width: 60,
height: 60,
margin: const EdgeInsets.only(right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isActive
? AppColors.primaryBlue
: Colors.transparent,
width: 2,
),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: CachedNetworkImage(
imageUrl: images[index],
fit: BoxFit.cover,
placeholder: (context, url) =>
Container(color: AppColors.grey100),
errorWidget: (context, url, error) => Container(
color: AppColors.grey100,
child: const Icon(
FontAwesomeIcons.image,
size: 20,
color: AppColors.grey500,
child: SizedBox(
height: 80,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
final isActive = _currentImageIndex == index;
final imageUrl = images[index];
final imageName = widget.product.imageCaptions[imageUrl];
return GestureDetector(
onTap: () => _changeImage(index),
child: Container(
margin: const EdgeInsets.only(right: 12),
child: Column(
mainAxisSize: .min,
mainAxisAlignment: .end,
children: [
// Image name above thumbnail (only show for active/selected)
if (isActive && imageName != null && imageName.isNotEmpty)
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text(
imageName,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: AppColors.primaryBlue,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
// Thumbnail image
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isActive
? AppColors.primaryBlue
: Colors.transparent,
width: 2,
),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: CachedNetworkImage(
imageUrl: imageUrl,
fit: BoxFit.cover,
placeholder: (context, url) =>
Container(color: AppColors.grey100),
errorWidget: (context, url, error) => Container(
color: AppColors.grey100,
child: const Icon(
FontAwesomeIcons.image,
size: 20,
color: AppColors.grey500,
),
),
),
),
),
),
],
),
),
),
);
},
);
},
),
),
),
],
@@ -255,15 +285,15 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
/// Image Lightbox for full-screen image viewing
class _ImageLightbox extends StatefulWidget {
final List<String> images;
final Map<String, String> imageCaptions;
final int initialIndex;
const _ImageLightbox({
required this.images,
required this.imageCaptions,
required this.initialIndex,
});
final List<String> images;
final Map<String, String> imageCaptions;
final int initialIndex;
@override
State<_ImageLightbox> createState() => _ImageLightboxState();