Flutter - Managing CarouselSlider to match the width of it's parent and making right and left edges transparent

Question

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);

Answer 1

There are a number of variables you can play with here. I've assumed you've used the carousel_slider package.

In the CarouselOptions you can change the aspectRatio and viewportRatio and resolve your issue right away. For example a viewportFraction: 0.7 would work for your code sample.

However if you want your viewPort to remain the same, you would have to change the width and height of your Image.network AND the aspectRatio to something like:

- CarouselOptions
aspectRatio: 20 / 9

Image.network
width: 360,
height: 200

If there's a specific height or width you must strictly abide to you should play with these 3 values to ensure it work.

I've tested the below code, with some alterations, with dummy data and values and they work well together.

class SpecialEvents {
  final String image;
  final DateTime dateText;
  final String name;
  SpecialEvents(
      {required this.image, required this.name, required this.dateText});
}

List<SpecialEvents> special_events = [
  SpecialEvents(
      name: "Road",
      image:
          "https://images.unsplash.com/photo-1666069810128-e7dfe3b0d653?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=692&q=80",
      dateText: DateTime.now()),
  SpecialEvents(
      name: "NY",
      image:
          "https://images.unsplash.com/photo-1665806558925-930b7210d8bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
      dateText: DateTime.now())
];

CarouselSlider(
  options: CarouselOptions(
      enlargeCenterPage: true,
      aspectRatio: 20 / 9,
      // viewportFraction: 0.7,
      // padEnds: false,
      disableCenter: false,
      scrollDirection: Axis.horizontal,
      onPageChanged: (index, reason) {
        setState(() {
          activeSpecialEventPage = index;
        });
      }),
  items: special_events
      .map((SpecialEvents se) => GestureDetector(
            onTap: () async {
              debugPrint("tap function");
            },
            child: ClipRRect(
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                    bottomLeft: Radius.circular(10)),
                child: Stack(
                  children: [
                    Image.network(se.image.toString(),
                        errorBuilder: (context, url, error) =>
                            Center(
                                child: SizedBox(
                                    width: 160,
                                    height: 160,
                                    child: Image.asset(
                                        "imgPlaceHolder"))),
                        loadingBuilder: (BuildContext context,
                            Widget child,
                            ImageChunkEvent?
                                loadingProgress) {
                          if (loadingProgress == null) {
                            return child;
                          }
                          return Center(
                            child: Image.asset(
                                "image place holder URL",
                                width: 160,
                                height: 160,
                                fit: BoxFit.cover),
                          );
                        },
                        width: 360,
                        height: 200,
                        fit: BoxFit.cover),
                    Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      mainAxisAlignment:
                          MainAxisAlignment.end,
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Container(
                                color: Colors.black26,
                                width: 300,
                                child: Padding(
                                  padding: const EdgeInsets
                                          .symmetric(
                                      vertical: 8.0,
                                      horizontal: 20),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment
                                            .start,
                                    children: [
                                      Text(
                                        se.name.toString(),
                                        style:
                                            const TextStyle(
                                                fontWeight:
                                                    FontWeight
                                                        .w600,
                                                fontSize: 24,
                                                color: Colors
                                                    .white),
                                        softWrap: false,
                                        maxLines: 1,
                                        overflow: TextOverflow
                                            .ellipsis,
                                      ),
                                      Text(
                                        se.dateText
                                            .toString(),
                                        style:
                                            const TextStyle(
                                                fontWeight:
                                                    FontWeight
                                                        .w400,
                                                fontSize: 12,
                                                color: Colors
                                                    .white),
                                        softWrap: false,
                                        maxLines: 1,
                                        overflow: TextOverflow
                                            .ellipsis,
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    )
                  ],
                )),
          ))
      .toList())

Hope that helps explain it.

Answer 2

There is a property on CarouselSlider, onPageChanged. you need to maintain a int, e.g. currentPageIndex as below,

...
onPageChanged: (index, _) {
   setState(
     () {
        currentPageIndex = index;
        }
       );
}
...

And then inside itemBuilder do like this,

...
itemBuilder: (context, index, _) {
    return Opacity(
           opacity: index == currentPageIndex ? 1.0 : 0.2,
           child: Your_Widget(),
      );
}
...