How to fix this bottom render overflow in Flutter while using carousel image with text below?

I am using Flutter 3.16.5 and these libraries to create a carousel for home page:

carousel_slider: ^4.2.1
smooth_page_indicator: ^1.1.0

Goal: Is to create first application page to have some benefits and a button to register.
Example random design of doing that:

My code so far: (minimalistic without unecessary stuff)

IndexScreen.dart

import 'package:flutter/material.dart';

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

  @override
  State<IndexScreen> createState() => _IndexScreenState();
}

class _IndexScreenState extends State<IndexScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Padding(
        padding: const EdgeInsets.only(
            left: Dimens.spacingLarge,
            top: Dimens.spacingLarge,
            right: Dimens.spacingLarge,
            bottom: Dimens.spacingSmall),
        child: JoinBenefitsSlider(),
      ),
    );
  }
}


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

  @override
  State<JoinBenefitsSlider> createState() => _JoinBenefitsSlider();
}

class _JoinBenefitsSlider extends State<JoinBenefitsSlider> {
  final _controller = CarouselController();

  int _activeIndex = 0;

  @override
  Widget build(BuildContext context) {
    final items = _getItems();

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Flexible(
          child: CarouselSlider.builder(
            carouselController: _controller,
            itemCount: items.length,
            options: CarouselOptions(
              enlargeCenterPage: false,
              viewportFraction: 1,
              autoPlay: true,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: const Duration(milliseconds: 3000),
              onPageChanged: (index, reason) {
                setState(() {
                  _activeIndex = index;
                });
              },
            ),
            itemBuilder: (context, index, realIndex) => _ItemView(items[index]),
          ),
        ),
        const SizedBox(
          height: Dimens.spacingMedium,
        ),
        AnimatedSmoothIndicator(
          count: items.length,
          activeIndex: _activeIndex,
          onDotClicked: (index) {
            _controller.animateToPage(index);
          },
          effect: const JumpingDotEffect(
              dotColor: DlColorCommon.coreWhiteBase,
              dotHeight: Dimens.iconSizeExtraSmall * 1.25,
              dotWidth: Dimens.iconSizeExtraSmall * 1.25,
              activeDotColor: DlColorCommon.crimsonRed),
        ),
      ],
    );
  }

  List<BenefitListItem> _getItems() {
    return [
      const BenefitListItem(
        imageUrl:
        'https://as2.ftcdn.net/v2/jpg/03/19/46/65/1000_F_319466548_rEfnmlKYtzD1mWoeOC9NMiTz0mPsJJG1.jpg',
        header: 'Header 1',
        subHeader:
        'Transform Your Fitness Journey: Achieve Peak Health with Personalized Workouts, Nutrition Guidance, Progress Tracking, and Community Support - Elevate Your Well-Being Today!',
      ),
      const BenefitListItem(
        imageUrl:
        'https://media.self.com/photos/61bcd0e05aed92fc4251b026/16:9/w_5839,h_3284,c_limit/GettyImages-1213234926.jpeg',
        header: 'Header 2',
        subHeader:
        'Unlock Your Best Self: Elevate Fitness and Wellness with Tailored Workouts, Nutritional Guidance, Progress Insights, and a Supportive Community - Your Journey to a Healthier You Starts Here!',
      )
    ];
  }
}

@immutable
class BenefitListItem {
  final String imageUrl;
  final String header;
  final String subHeader;

  const BenefitListItem(
      {required this.imageUrl, required this.header, required this.subHeader});
}


class _ItemView extends StatelessWidget {
  final BenefitListItem _item;

  const _ItemView(this._item);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CachedNetworkImage(
          imageUrl: _item.imageUrl,
          height: 300,
          fit: BoxFit.contain,
          placeholder: (context, imageUrl) => SizedBox(
            width: MediaQuery.of(context).size.width,
            child: const LoadingIndicator(),
          ),
          errorWidget: (context, url, error) => Icon(
            Icons.error,
            color: AppColors.error500(context),
          ),
        ),
        const SizedBox(
          height: Dimens.spacingMedium,
        ),
        Text(
          _item.header,
          style:
          AppStyles.headingL(context, color: DlColorCommon.coreWhiteBase),
        ),
        const SizedBox(
          height: Dimens.spacingMedium,
        ),
        Text(
          _item.subHeader,
          style: AppStyles.bodyM(context, color: DlColorCommon.coreWhiteBase),
        ),
      ],
    );
  }
}

The text in my carousel is not shown but instead is bottom render overflown

I tried

1. Using Expanded – didn’t work
2. Using SizedBox with fixed height of 400 wrapping CarouselBuilder – didn’t work
3. Adding height 500 to CarouselOptions – partially worked.. Carousel used more space, text was shown but still bottom overflown.. I want the carousel to use all the space it needs! nothing more, nothing less for image + text as I have a scrollview and space is not an issue