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

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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(),
        ),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

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

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.