Progress Widget

Progress components in FlutKit are designed to visualize completion state, loading status, performance metrics, and task progress in dashboards and admin panels.
They support animation, percentage display, accessibility semantics, and multiple visual styles.

LinearProgress

LinearProgress displays progress in a horizontal bar format.
Ideal for task completion, upload progress, KPI tracking, and inline indicators.

Constructor

LinearProgress({
  Key? key,
  double? value,
  required Color color,
  double height = 10.0,
  BorderRadiusGeometry? borderRadius,
  BorderRadiusGeometry? innerBorderRadius,
  Color? backgroundColor,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.linear,
  String? semanticsLabel,
  bool showPercentage = false,
  TextStyle? percentageTextStyle,
})

LinearProgress({
  Key? key,
  double? value,
  required Color color,
  double height = 10.0,
  BorderRadiusGeometry? borderRadius,
  BorderRadiusGeometry? innerBorderRadius,
  Color? backgroundColor,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.linear,
  String? semanticsLabel,
  bool showPercentage = false,
  TextStyle? percentageTextStyle,
})

Parameters

• value
  Progress value between 0.0 and 1.0.
  If null, the indicator can represent an indeterminate state.
• color
  Color of the progress bar (required).
• height
  Thickness of the progress bar.
• borderRadius
  Outer border radius of the progress container.
• innerBorderRadius
  Border radius applied to the filled portion.
• backgroundColor
  Color of the unfilled track.
• isAnimated
  Enables animated progress transitions.
• animationDuration
  Duration of the animation when value changes.
• curve
  Animation curve used for progress transitions.
• semanticsLabel
  Accessibility label for screen readers.
• showPercentage
  Displays progress percentage text.
• percentageTextStyle
  Custom text style for the percentage label.

Example

LinearProgress(
  value: 0.7,
  color: kPrimaryColor,
  showPercentage: true,
)

LinearProgress(
  value: 0.7,
  color: kPrimaryColor,
  showPercentage: true,
)

ProgressCard

ProgressCard is a composite widget that combines progress visualization with contextual metadata.
Best suited for dashboard summaries, sprint progress, and workload tracking.

Constructor

ProgressCard({
  Key? key,
  required double value,
  required String label,
  String? timeLeft,
  required Color color,
  Color? cardColor,
})

ProgressCard({
  Key? key,
  required double value,
  required String label,
  String? timeLeft,
  required Color color,
  Color? cardColor,
})

Parameters

• value
  Progress value (0.0 – 1.0).
• label
  Title or description of the progress item.
• timeLeft
  Optional helper text (e.g. “3 days left”, “2h remaining”).
• color
  Primary progress color.
• cardColor
  Background color of the card.

Example

ProgressCard(
  value: 0.45,
  label: 'Project Completion',
  timeLeft: '5 days left',
  color: kSuccessColor,
)

ProgressCard(
  value: 0.45,
  label: 'Project Completion',
  timeLeft: '5 days left',
  color: kSuccessColor,
)

CircularProgress

CircularProgress displays progress in a circular format.
Useful for compact areas, statistics widgets, and status indicators.

Constructor

CircularProgress({
  Key? key,
  double? value,
  double? radius = 18,
  Color? color,
  double strokeWidth = 4.0,
  Color? backgroundColor,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.easeInOut,
  String? semanticsLabel,
  TextStyle? percentageTextStyle,
  bool showPercentage = false,
})

CircularProgress({
  Key? key,
  double? value,
  double? radius = 18,
  Color? color,
  double strokeWidth = 4.0,
  Color? backgroundColor,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.easeInOut,
  String? semanticsLabel,
  TextStyle? percentageTextStyle,
  bool showPercentage = false,
})

Parameters

• value
  Progress value (0.0 – 1.0).
• radius
  Radius of the circular indicator.
• color
  Stroke color of the progress arc.
• strokeWidth
  Thickness of the arc.
• backgroundColor
  Background track color.
• isAnimated
  Enables animated progress transitions.
• showPercentage
  Displays percentage text inside the circle.
• percentageTextStyle
  Text style for the percentage label.

Example

CircularProgress(
  value: 0.85,
  color: kInfoColor,
  showPercentage: true,
)

CircularProgress(
  value: 0.85,
  color: kInfoColor,
  showPercentage: true,
)

AdvancedCircularProgress

AdvancedCircularProgress extends CircularProgress with multiple visual styles, including segmented and solid indicators.
Designed for analytics dashboards and premium UI sections.

Constructor

AdvancedCircularProgress({
  Key? key,
  double? value,
  double? radius = 18,
  required Color color,
  double strokeWidth = 3,
  Color? backgroundColor,
  TextStyle? percentageTextStyle,
  bool showPercentage = false,
  CircularIndicatorStyle style = CircularIndicatorStyle.solid,
  int segmentCount = 16,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.easeInOut,
  String? semanticsLabel,
})

AdvancedCircularProgress({
  Key? key,
  double? value,
  double? radius = 18,
  required Color color,
  double strokeWidth = 3,
  Color? backgroundColor,
  TextStyle? percentageTextStyle,
  bool showPercentage = false,
  CircularIndicatorStyle style = CircularIndicatorStyle.solid,
  int segmentCount = 16,
  bool isAnimated = false,
  Duration animationDuration = const Duration(milliseconds: 5000),
  Curve curve = Curves.easeInOut,
  String? semanticsLabel,
})

Additional Parameters

• style
  Defines the visual style of the indicator.

  enum CircularIndicatorStyle {
    solid,
    segmented,
  }

  enum CircularIndicatorStyle {
    solid,
    segmented,
  }

• segmentCount
  Number of segments when using segmented style.

Example (Segmented)

AdvancedCircularProgress(
  value: 0.6,
  color: kPrimaryColor,
  style: CircularIndicatorStyle.segmented,
  segmentCount: 20,
  showPercentage: true,
)

AdvancedCircularProgress(
  value: 0.6,
  color: kPrimaryColor,
  style: CircularIndicatorStyle.segmented,
  segmentCount: 20,
  showPercentage: true,
)

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Progress section.

Base UI → Progress

Base UI → Progress

Best Practices

• Use LinearProgress for continuous tasks and lists.
• Use CircularProgress for compact summaries.
• Use AdvancedCircularProgress for analytics and premium dashboard sections.
• Avoid overly long animation durations for frequently updating values.
• Always provide semanticsLabel for accessibility-critical flows.

Summary

FlutKit progress components offer a scalable system for visualizing status and completion across dashboards.
From simple linear bars to advanced segmented circular indicators, they ensure clarity, consistency, and accessibility in enterprise-grade Flutter applications.