flutter remove left side gap from CarouselSlider - flutter

Question

I am using CarouselSlider to slide my containers but issue is its showing lot of padding on the left side.
My code
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
double statusbar = MediaQuery.of(context).padding.top;
final DateTime now = DateTime.now();
final DateFormat formatter = DateFormat('E, MMM d, y');
final String formatted = formatter.format(now);
print(formatted); // something like 2013-04-20
return Scaffold(
backgroundColor: Color(0xFF612c58),
body: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
child: Container(
color: Colors.white,
height: height * 0.52,
child: Column(
children: <Widget>[
SizedBox(
height: statusbar * 2,
),
Container(
padding: EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Popular',
style: TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
),
Text("$formatted")
],
),
),
CarouselSlider(
options: CarouselOptions(height: height * 0.39,
enableInfiniteScroll: false,
),
items: [0, 1, 2, 3, 4].map((i) {
return Builder(
builder: (BuildContext context) {
return _popular(i);
},
);
}).toList(),
),
Container(
height: height * 0.006,
width: width * 0.1,
color: Colors.grey,
),
],
),
),
),
SizedBox(height: height * 0.02,),
Container(
padding: EdgeInsets.only(left: 20),
width: double.infinity,child: Text('Recent Stories', style: TextStyle(color: Colors.white, fontSize: 21, fontWeight: FontWeight.bold),))
],
),
);
}
Widget _popular(int index) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
double statusbar = MediaQuery.of(context).padding.top;
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: height * 0.02,),
ClipRRect(
borderRadius: BorderRadius.circular(70.0),
child: Container(
height: height * 0.25,
width: width * 0.7,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/1.png',
),
),
),
),
),
SizedBox(height: height * 0.01,),
Container(
padding: EdgeInsets.only(left: 15),
width: double.infinity,
child: Text(
'Amazing lesson Story',
style: TextStyle(fontWeight: FontWeight.bold),
)),
SizedBox(height: height * 0.01,),
Container(
padding: EdgeInsets.only(left: 15),
width: double.infinity,
child: Text(
'Post By Marco - 10 min',
)),
],
));
}
}
As you can see its showing gap on left side i need to remove this and need to set padding between the slides. I also check the documentation but there is no option showing for padding or i maybe its have any option but i am not able to find it. Can any one please tell how can i just remove the padding and add gap between sldies Thanks :)

Answer 1

CarouselOptions has padEnds attribute which you can set to false to remove the padding from both ends of the list.
Source: a possible duplicate of this question

Answer 2

One option could be adding alignment to the container that wraps your child in the itemBuilder :
#override
Widget build(BuildContext context) {
return CarouselSlider.builder(
carouselController: carouselController,
options: CarouselOptions(
disableCenter: false,
viewportFraction: 0.8,
enlargeCenterPage: false,
height: getProportionateScreenHeight(defaultCarouselHeight),
enableInfiniteScroll: false,
initialPage: 0,
onPageChanged: onPageChanged,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
itemCount: model.topNewsList.length,
itemBuilder: (context, index, realindex) => Container(
alignment: const Alignment(-1.5, -1.0),
child: CarouselCell(
news: model.topNewsList[index],
onNewsPress: () => Get.to(
() => DetailScreen(),
arguments: model.topNewsList[index],
),
),
),
);
}
as you see, I added the alignment to -1,5 for the left - right, and -1 for the top - bottom, according to this explanation : https://youtu.be/g2E7yl3MwMk
I know this is not the cleanest way to do that, so if anybody else finds another solution, that would be helpful for all :)

Answer 3

try adding these options to CarouselOptions
aspectRatio: 2.0,
disableCenter: true,
viewportFraction: 1,
enlargeCenterPage: false,
If you want to show a small part of a next image on the right try reducing the viewportFraction to 0.95.
You can see all the options that can be passed to the CarouselOptions by ctrl+click on CarouselOptions in VSCODE