How to add button on each slide of carousel slider - flutter

Question

I have been using flutter and the carousel slider package to create an image slider of 3 images
https://pub.dev/packages/carousel_slider
However, i want to add a button on each of those sliders on top of the images as you would see in e-commerce apps for example to "shop now" the sale etc.
like so:
class _MainScreenState extends State<MainScreen> {
final featuredImages = [
'lib/assets/images/elitefeatured.jpg',
'lib/assets/images/guabafeatured.jpg',
'lib/assets/images/eliteclubfeatured.jpg'
];
#override
Widget build(BuildContext context) { //extra non-relevant code in here
Padding(
padding: EdgeInsets.only(
top: 85,
),
child: SizedBox(
width: 450,
height: 300,
child: CarouselSlider(
options: CarouselOptions(
autoPlay: true,
),
items: featuredImages.map((featuredImage) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 7),
child: Image.asset(featuredImage),
);
}).toList(),
),
),
),
}

Answer 1

There are 2 important ideas:
Use a Stack widget to display your right and left arrows
Use a CarouselController to programmatically control your carousel
In code:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class _MainScreenState extends State<MainScreen> {
/// Create a controller to control the carousel programmatically
CarouselController carouselController = CarouselController();
final featuredImages = [
'lib/assets/images/elitefeatured.jpg',
'lib/assets/images/guabafeatured.jpg',
'lib/assets/images/eliteclubfeatured.jpg'
];
#override
Widget build(BuildContext context) {
//extra non-relevant code in here
Padding(
padding: EdgeInsets.only(
top: 85,
),
child: SizedBox(
width: 450,
height: 300,
child: Stack(
children: [
CarouselSlider(
carouselController: carouselController, // Give the controller
options: CarouselOptions(
autoPlay: true,
),
items: featuredImages.map((featuredImage) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 7),
child: Image.asset(featuredImage),
);
}).toList(),
),
Align(
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
// Use the controller to change the current page
carouselController.previousPage();
},
icon: Icon(Icons.arrow_back),
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
onPressed: () {
// Use the controller to change the current page
carouselController.nextPage();
},
icon: Icon(Icons.arrow_forward),
),
),
],
),
),
);
}
}