circular_indicator

Demo

sample gif

  CircularIndicatorWidget(
    width: 200,
    height: 200,
    current: _value,
    maxStep: 100,
    widthLine: 2.5,
    heightLine: 20,
    curve: Curves.easeInOutCirc,
    gradientColor: const LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.cyan, Colors.orangeAccent],
  )
ParameterTypeDescriptionDefault
maxStepdoubleTotal number of step of the complete indicator.100
currentdoubleNumber of steps to underline, all the steps with index <= currentStep will have Color equal to selectedColor.0
widthLinedoubleThickness of the brick line.3
heightLinedoubleHeight of selected tile line. The height of the unselected line is equal to heightLine/220
heightdoubleHeight of the indicator's container.-
widthdoubleWidth of the indicator's container.-
selectedColorColorColor of the selected steps.Colors
unselectedColorColorColor of the unselected steps.Colors
gradientColorGradientApply a gradient color to the indicator.-
childWidgetWidget child contained inside the indicator.-
durationDurationAnimation duration to change state2 seconds
curveCurvesStatus change animationCurves.easeInOutQuint

Libraries

circular_indicator
circular_indicator_painter
circular_indicator_web
circular_indicator_widget