flutter remove left side gap from CarouselSlider

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

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 :)