I’m working on the following interface with Flutter:

However, there is a point I’m stuck on here. I want the space between the boxes in the Carousel Slider to disappear. I did some research but couldn’t find any results.

My codes:

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return BaseView<HomeViewModel>(
      viewModel: HomeViewModel(),
      onModelReady: (HomeViewModel viewModel) {
        viewModel.setContext(context);
        viewModel.init();
      },
      onPageBuilder: (BuildContext context, HomeViewModel viewModel) {
        return Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(ImagePathConstants.star_background),
              fit: BoxFit.cover,
              opacity: 0.3,
            ),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                ColorConstants.glacialBlueIce,
                ColorConstants.persianIndigo,
              ],
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: SizedBox(
              width: context.width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // ...
                  CarouselSlider(
                    options: CarouselOptions(
                      height: context.dynamicHeight(0.6),
                      enlargeCenterPage: true,
                      viewportFraction: 0.6,
                      enlargeStrategy: CenterPageEnlargeStrategy.zoom,
                      disableCenter: true,
                      onPageChanged: (index, reason) {
                        viewModel.setCarouselSliderIndex(index);
                      },
                    ),
                    items: viewModel.planets
                        .map(
                          (rover) => Stack(
                            children: [
                              Positioned(
                                top: 50,
                                left: 0,
                                right: 0,
                                child: Container(
                                  decoration: ShapeDecoration(
                                    color: viewModel.carouselSliderIndex ==
                                            viewModel.planets.indexOf(rover)
                                        ? context.colors.surface
                                        : context.colors.surfaceVariant,
                                    shape: SmoothRectangleBorder(
                                      borderRadius: SmoothBorderRadius(
                                        cornerRadius: 40,
                                        cornerSmoothing: 0.5,
                                      ),
                                    ),
                                  ),
                                  height: context.dynamicHeight(0.35),
                                  width: context.dynamicWidth(0.8),
                                  margin: const EdgeInsets.all(5.0),
                                  child: Column(
                                    children: [
                                      Padding(
                                        padding: context.paddingNormal,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            context.emptySizedHeightHigh,
                                            Text(
                                              rover.name,
                                              style: context.textTheme.h3,
                                            ),
                                            const SizedBox(height: 5),
                                            Text(
                                              rover.shortDescription,
                                              style: context.textTheme.h6,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Positioned(
                                top: 0,
                                left: (context.dynamicWidth(0.6) -
                                        context.dynamicWidth(0.4)) /
                                    2,
                                child: Image.network(
                                  rover.imageUrl,
                                  width: context.dynamicWidth(0.4),
                                ),
                              ),
                            ],
                          ),
                        )
                        .toList(),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

This is my homework and I have to do it. Thanks in advance for your help. I am grateful to all of you.