117 lines
4.0 KiB
Dart
117 lines
4.0 KiB
Dart
import 'package:bookmywages/consts_widgets/app_colors.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:carousel_slider/carousel_slider.dart';
|
|
import 'package:get/get.dart';
|
|
|
|
class ImagePage extends StatefulWidget {
|
|
final List<String> mediaUrls;
|
|
|
|
const ImagePage({super.key, required this.mediaUrls});
|
|
|
|
@override
|
|
State<ImagePage> createState() => _ImagePageState();
|
|
}
|
|
|
|
class _ImagePageState extends State<ImagePage> {
|
|
int selectedImageIndex = 0; // Track the currently selected image
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColors.secondprimary,
|
|
appBar: AppBar(
|
|
backgroundColor: AppColors.secondprimary,
|
|
leading: IconButton(
|
|
onPressed: () => Get.back(),
|
|
icon: Icon(Icons.arrow_back_ios_outlined),
|
|
),
|
|
title: Text("Service Image"),
|
|
centerTitle: true,
|
|
),
|
|
body: Column(
|
|
children: [
|
|
SizedBox(height: 50),
|
|
Center(
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(
|
|
22.94,
|
|
), // Set border-radius to 22.94
|
|
child: CachedNetworkImage(
|
|
imageUrl: widget.mediaUrls.isNotEmpty
|
|
? widget.mediaUrls[selectedImageIndex] // Use selected index
|
|
: '',
|
|
width: 250, // Set width to 250
|
|
height: 250, // Set height to 250
|
|
fit: BoxFit.cover,
|
|
placeholder: (context, url) => const Center(
|
|
child: SizedBox(
|
|
width: 30,
|
|
height: 30,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
),
|
|
),
|
|
errorWidget: (context, url, error) => const Icon(Icons.error),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 20),
|
|
CarouselSlider(
|
|
options: CarouselOptions(
|
|
height: 150, // Set height of the carousel
|
|
enlargeCenterPage: true,
|
|
enableInfiniteScroll: false,
|
|
viewportFraction: 0.3,
|
|
aspectRatio: 1.0,
|
|
),
|
|
items: widget.mediaUrls.asMap().entries.map((entry) {
|
|
int index = entry.key;
|
|
String url = entry.value;
|
|
bool isSelected = index == selectedImageIndex;
|
|
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
selectedImageIndex = index; // Update selected image
|
|
});
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(22.94),
|
|
border: isSelected
|
|
? Border.all(
|
|
color: Colors.blue,
|
|
width: 3,
|
|
) // Highlight selected image
|
|
: null,
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(
|
|
22.94,
|
|
), // Set border-radius to 22.94
|
|
child: CachedNetworkImage(
|
|
imageUrl: url,
|
|
width: 176, // Set width to 176
|
|
height: 158, // Set height to 158
|
|
fit: BoxFit.cover,
|
|
placeholder: (context, url) => const Center(
|
|
child: SizedBox(
|
|
width: 30,
|
|
height: 30,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
),
|
|
),
|
|
errorWidget: (context, url, error) =>
|
|
const Icon(Icons.error),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|