I am using CarouselSlider in Flutter to get the output as below (Special Event section):
But getting result as below :
The Issue is It should be with same width as top and bottom widget vertically (you can see in first image), In result Image, there is little more width between right and left transparent area and middle portion. So, middle portion width and the transparency of left and right edge is concern here.
How can I get the same result?
I have done so far as below:
Container(
child: CarouselSlider(
options: CarouselOptions(
enlargeCenterPage: true,
disableCenter: false,
scrollDirection: Axis.horizontal,
onPageChanged: (index, reason) {
setState(() {
activeSpecialEventPage = index;
});
}),
items: <Widget>[
for (var i = 0; i < special_events.length; i++)
GestureDetector(
onTap: () async {
await getCurrentLocation();
if (getDouble(prefCurrLat) != null &&
getDouble(prefCurrLong) != null) {
NavigationUtils.push(context, routeDetailScreen,
arguments: {
argDetailScreenTitle:
Localization.of(context).labelExhibitions,
argCurrentLat: getDouble(prefCurrLat),
argCurrentLong: getDouble(prefCurrLong),
argEventObj: special_events[i]
});
}
},
child: Container(
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.w),
topRight: Radius.circular(10.h),
bottomRight: Radius.circular(10.w),
bottomLeft: Radius.circular(10.h)),
child: Image.network(
special_events[i].image.toString(),
errorBuilder: (context, url, error) => Center(
child: SizedBox(
width: 160.w,
height: 160.h,
child: Image.asset(imgPlaceHolder))),
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: Image.asset(imgPlaceHolder,
width: 160.w,
height: 160.h,
fit: BoxFit.cover),
);
},
width: 327.w,
height: 200.h,
fit: BoxFit.cover)),
Positioned(
bottom: 16.h,
left: 20.w,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: blackColorOP11,
width: 300.w,
child: Text(
special_events[i].name.toString(),
style: TextStyle(
fontWeight: FontWeight.w600,
fontFamily: "Poppins",
fontSize: 24.sp,
color: Colors.white),
softWrap: false,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
special_events[i].dateText != null &&
special_events[i]
.dateText
.toString()
.length >
0
? Container(
color: blackColorOP11,
child: Text(
getFormatedDateForSpecialEvent(
special_events[i]
.dateText
.toString()),
style: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: "Poppins",
fontSize: 12.sp,
color: Colors.white),
softWrap: false,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
: Container(),
],
),
),
)
],
),
),
)
],
),
)
: buildNoDataWidget(Localization.of(context).labelNoSpecialEvents);