如何使用資產/圖像在顫動中制作點指示器輪播滑塊？

Question

        CarouselSlider(
          options: CarouselOptions(
        
          ),
          items: [
   
            Image.asset('images/pizza.png'),
          ],
        ),

        DotsIndicator(
            dotsCount: 4,
            position: dotPosition.toDouble(),
//declare the position to autoplay
             
            ),
        ),

我不知道如何聲明 dotIndicator 以便點自動播放圖像。

Answer 1

您可以使用變量從onPageChanged跟蹤當前索引。

class _MyWidgetState extends State<MyWidget> {
  final items = [
    Image.asset('images/drumstick.png'),
    Image.asset('images/pizza.png')
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            CarouselSlider(
              options: CarouselOptions(
                autoPlay: true,
                aspectRatio: 2.0,
                enlargeCenterPage: true,
                onPageChanged: (index, reason) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
              items: items,
            ),
            DotsIndicator(
              dotsCount: items.length,
              position: currentIndex.toDouble(),
            )
          ],
        ),
      ),
    );
  }
}