Flutter carousel slider place text under image

Question

I am trying to place text under a image in my carousel slider but now the text appears on the image, not under.

It looks like this:

But I want it to look like this:

Here is my code:

final CarouselSlider autoPlayDemo = CarouselSlider(
  viewportFraction: 0.9,
  aspectRatio: 2.0,
  autoPlay: false,
  enlargeCenterPage: true,
  items: imgList.map(
    (child) {
      return Container(
        margin: EdgeInsets.all(10.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Stack(children: <Widget>[
          Image.asset(
            child,
            fit: BoxFit.cover,
            width: 1000.0,
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            child: Text(
            'Text',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ))
          ])),
      );
    },
  ).toList(),
);

What can I do to place the text under the image insted of on the image?

Stack(children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: 600,
      decoration: BoxDecoration(
        color: Color.fromRGBO(217,225,216,1),
      ),
      padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
          child: Text(
            'News',
            style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
    ),
    Padding(
            padding: EdgeInsets.symmetric(vertical: 50.0),
            child: Column(children: [
              autoPlayDemo,
            ])),
    ]),

Answer 1

This is complete working code with Image on top with text and dots. For this you need to use these two libraries:- " carousel_slider: ^4.1.1 ", "smooth_page_indicator: ^1.0.0+2", update them to the latest.

class MyItem {
  String itemName;
  String path;
  MyItem(this.itemName, this.path);
}

class craouselImage extends StatefulWidget {
  @override
  _craouselImage createState() => _craouselImage();
}

class _craouselImage extends State<craouselImage> {
  int activeIndex = 0;
  List<MyItem> items = [
    MyItem("item 1", 'assets/images/appiconlogo.png'),
    MyItem("item 2", 'assets/images/Mockup4.png'),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          CarouselSlider.builder(
            itemCount: items.length,
            options: CarouselOptions(
              height: 400,
              viewportFraction: 1,
              autoPlay: true,
              enlargeCenterPage: true,
              enlargeStrategy: CenterPageEnlargeStrategy.height,
              autoPlayInterval: const Duration(seconds: 1),
              onPageChanged: (index, reason) {
                setState(() {
                  activeIndex = index;
                });
              },
            ),
            itemBuilder: (context, index, realIndex) {
              final imgList = items[index];
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(child: buildImage(imgList.path, index)),
                  const SizedBox(
                    height: 15,
                  ),
                  buildText(imgList.itemName, index),
                ],
              );
            },
          ),
          const SizedBox(
            height: 22,
          ),
          buildIndicator(),
          const SizedBox(
            height: 22,
          ),

          //buildText(itemName, index),
          // buildText(),
        ],
      ),
    );
  }

  Widget buildImage(String imgList, int index) => Container(
        margin: const EdgeInsets.symmetric(horizontal: 12),
        color: Colors.transparent,
        child: Align(
          alignment: Alignment.center,
          child: Image.asset(
            imgList,
            fit: BoxFit.cover,
          ),
        ),
      );

  buildIndicator() => AnimatedSmoothIndicator(
        activeIndex: activeIndex,
        count: items.length,
        effect: const JumpingDotEffect(
            dotColor: Colors.black,
            dotHeight: 15,
            dotWidth: 15,
            activeDotColor: mRed),
      );

  buildText(String itemName, int index) => Align(
      alignment: FractionalOffset.bottomCenter,
      child: Text(
        itemName,
        style: const TextStyle(
            fontWeight: FontWeight.w700, fontSize: 23, color: mRed),
      ));
}

Answer 2

Wrapping them with a Stack widget is wrong. Stack is a widget that displays its children over each other. Instead, wrap them in a Column widget that displays its children in a horizontal manner under each other.

Also wrap the image with the ClipRRect to achieve your goal.

final CarouselSlider autoPlayDemo = CarouselSlider(
      viewportFraction: 0.9,
      aspectRatio: 2.0,
      autoPlay: false,
      enlargeCenterPage: true,
      items: imgList.map(
            (child) {
          return Container(
            margin: EdgeInsets.all(10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Image.asset(
                    child,
                    fit: BoxFit.cover,
                    width: 1000.0,
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding:
                    EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                    child: Text(
                      'Text',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ).toList(),
    );