Flutter's Smooth Page Indicator - PaintStyle

Question

I am trying to have the active dot be filled and the non active dots to be empty with a border around it Looks like 'PaintStyle' is an enum which would require more effort to customize this: (Widget goal:)

There's PaintingStyle.stroke, and PaintingStyle.fill, which seems to affect all the dots and not just the active one. Is there something inside the SmoothPageIndicator that would allow for some kind of border on the inactive dots? This is for Accessibility purposes

Answer 1

You can create a simple indicator like this:

class CustomPageIndicator extends StatelessWidget {
  final int itemCount;
  final int currentIndex;
  final double dotSize;
  final double spacing;
  final Color activeDotColor;
  final Color inactiveDotColor;
  final double borderWidth;
  final Color borderColor;

  CustomPageIndicator({
    required this.itemCount,
    required this.currentIndex,
    this.dotSize = 10.0,
    this.spacing = 8.0,
    this.activeDotColor = Colors.blue,
    this.inactiveDotColor = Colors.grey,
    this.borderWidth = 2.0,
    this.borderColor = Colors.black,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(itemCount, (index) {
        bool isActive = index == currentIndex;
        return Container(
          width: dotSize + borderWidth * 2,
          height: dotSize + borderWidth * 2,
          margin: EdgeInsets.symmetric(horizontal: spacing / 2),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: isActive ? activeDotColor : borderColor,
              width: borderWidth,
            ),
            color: isActive ? activeDotColor : inactiveDotColor,
          ),
        );
      }),
    );
  }
}