Flutter carousel slider place text under image - flutter

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

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

Answer 2

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