Flutter中如何自定义flutter_carousel_widget轮播滑块外观？

我正在使用flutter_carousel_widget包实现轮播功能，当前代码如下：

FlutterCarousel(
  options: CarouselOptions(
    physics: const NeverScrollableScrollPhysics(),
    controller: _carouselController,
    onPageChanged: (index, reason) {
      currentView = index + 1;
      // 更新当前页面状态
      setState(() {});
    },
    height: 50.0,
    indicatorMargin: 10.0,
    showIndicator: true,
    slideIndicator: CircularWaveSlideIndicator(),
    viewportFraction: 0.9,
  ),
  items: swipeList.map((i) {
    return const Text('');
  }).toList(),
),

当前实现的轮播滑块效果：

我希望将轮播指示器修改为如下样式：

修改方案 #

要实现目标样式，只需将圆形波浪指示器替换为线性指示器，并调整相关参数：

FlutterCarousel(
  options: CarouselOptions(
    physics: const NeverScrollableScrollPhysics(),
    controller: _carouselController,
    onPageChanged: (index, reason) {
      currentView = index + 1;
      setState(() {});
    },
    height: 50.0,
    indicatorMargin: 5.0, // 缩小指示器与轮播内容的间距
    showIndicator: true,
    // 替换为线性指示器并配置样式
    slideIndicator: LinearSlideIndicator(
      indicatorHeight: 4, // 指示器高度
      indicatorWidth: 20, // 单个指示器宽度
      activeIndicatorColor: Colors.blue, // 激活态颜色
      indicatorColor: Colors.grey.shade300, // 非激活态颜色
      spacing: 4, // 指示器之间的间距
    ),
    viewportFraction: 0.9,
  ),
  items: swipeList.map((i) {
    return const Text('');
  }).toList(),
),

关键修改点 #

• 将CircularWaveSlideIndicator替换为LinearSlideIndicator，实现长条状的指示器样式
• 通过indicatorHeight和indicatorWidth控制指示器的尺寸，匹配目标效果的细长条形态
• 调整activeIndicatorColor和indicatorColor区分激活与未激活的指示器
• 修改indicatorMargin缩小指示器与轮播区域的间距，贴合目标布局

内容的提问来源于stack exchange，提问作者Adeeb K