Progress

A progress indicator component for showing task completion status.

When to use this

Loading states: Show progress of data loading or file uploads
Task completion: Display progress of multi-step processes
Form completion: Indicate how much of a form has been filled out
Goal tracking: Visualize progress toward goals or milestones

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class ProgressExample extends StatelessWidget {
  const ProgressExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return RemixProgress(
      value: 0.3,
      style: style,
    );
  }
 
  RemixProgressStyle get style {
    return RemixProgressStyle()
        .wrapClipRRect(borderRadius: BorderRadius.circular(10))
        .trackColor(Colors.grey.shade300)
        .indicatorColor(Colors.grey.shade900)
        .width(300)
        .height(10);
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalProgressExample extends StatelessWidget {
  const FortalProgressExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        RemixProgress(
          value: 0.6,
          style: FortalProgressStyle.solid(),
        ),
        RemixProgress(
          value: 0.4,
          style: FortalProgressStyle.soft(),
        ),
      ],
    );
  }
}

See the FortalProgressStyle source code for all available options.

Constructor


const RemixProgress({
  Key? key,
  required double value,
  RemixProgressStyle style = const RemixProgressStyle.create(),
  RemixProgressSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixProgressStyle`	Optional. The style configuration for the progress indicator. Customize colors, sizing, and track appearance.
`styleSpec`	`RemixProgressSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`value`	`double`	Required. The progress value between 0 and 1. This value determines how much of the progress bar is filled. A value of 0 means empty, while 1 means completely filled.

Style Methods

Method	Description
`height(double value)`	Sets progress height
`trackColor(Color value)`	Sets track color
`width(double value)`	Sets progress width
`indicatorColor(Color value)`	Sets fill color
`track(BoxStyler value)`	Sets track styling
`indicator(BoxStyler value)`	Sets fill styling
`trackContainer(BoxStyler value)`	Sets outer container styling
`alignment(Alignment value)`	Sets container alignment
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`animate(AnimationConfig config)`	Configures implicit animation for style transitions.
`constraints(BoxConstraintsMix value)`	Sets size constraints on the component.
`decoration(DecorationMix value)`	Sets the container decoration.
`margin(EdgeInsetsGeometryMix value)`	Sets the container margin.
`padding(EdgeInsetsGeometryMix value)`	Sets the container padding.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.