flutter 从 CarouselSlider 中删除左侧间隙

Question

我正在使用 CarouselSlider 来滑动我的容器，但问题是它在左侧显示大量填充。

我的代码

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',
            )),

      ],
    ));
  }
}

正如您所看到的，它在左侧显示间隙，我需要删除它并需要在幻灯片之间设置填充。我还检查了文档，但没有显示填充选项，或者我可能有任何选项，但我找不到它。任何人都可以告诉我如何删除填充并在幻灯片之间添加间隙谢谢:)

Answer 1

CarouselOptions有padEnds一个属性，您可以设置该属性false以删除列表两端的填充。

options: CarouselOptions(
 padEnds : false
);

来源：这个问题的可能重复

Answer 2

尝试将这些选项添加到 CarouselOptions

aspectRatio: 2.0,
disableCenter: true,
viewportFraction: 1,
enlargeCenterPage: false,

如果您想在右侧显示下一张图像的一小部分，请尝试将 viewportFraction 减小到 0.95。

在VSCODE中ctrl+点击CarouselOptions就可以看到所有可以传递给CarouselOptions的选项