如何在颤动中创建带有点指示器的图像滑块？

【问题标题】：How to create image slider with Dot Indicator in flutter?如何在颤动中创建带有点指示器的图像滑块？
【发布时间】：2021-03-10 18:57:34
【问题描述】：

Example image with dot indicator

我有多个图像，每个图像都有自己的重定向链接。目前，这在使用列表视图构建显示手势检测器内的图像时效果很好。

不过，我想添加一个点指示符来显示正在查看的图像。如何获取正在显示的图像的索引？或者在向左或向右滑动时增加/减少计数器。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您应该发布您所做的代码，以便人们可以看到您的确切问题。

如果您使用 ListView.builder，您可以从 itemBuilder 获取索引。然后在与列表交互时创建一个变量来保存该索引的值

int currentIndex;

itemCount: list.length,
itemBuilder: (context, index) {
  currentIndex = index;
}

然后在listView下面，添加一个自定义的点指示器列表。

Row(
  children: [
    for(int i = 0; i < list.length; i++)
      Container(
        height: 10, width: 10,
        decoration: BoxDecoration(
          color: i == currentIndex ? Colors.white : Colors.grey,
          borderRadius: BorderRadius.circular(5)
        )
      )
  ]
)

【讨论】：