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

  ProgressStyler get style {
    return ProgressStyler()
        .wrap(.clipRRect(borderRadius: BorderRadiusGeometryMix.circular(10)))
        .trackColor(Colors.grey.shade300)
        .indicatorColor(Colors.grey.shade900)
        .width(300)
        .height(10);
  }
}

Fortal widgets

The application-owned Fortal preset provides a themed widget for this component:

import 'package:flutter/material.dart';
import 'ui/ui.dart';

class FortalProgressExample extends StatelessWidget {
  const FortalProgressExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        FortalProgress.surface(
          value: 0.6,
        ),
        FortalProgress.soft(
          value: 0.4,
        ),
      ],
    );
  }
}

Constructor

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

RemixProgress remixProgressConstructor({
  Key? key,
  required double value,
  String? semanticsLabel,
  String? semanticsValue,
  ProgressStyler style = const ProgressStyler.create(),
  ProgressSpec? styleSpec,
}) => throw UnimplementedError();

Properties

Widget Properties

style → ProgressStyler

Optional. The style configuration for the progress indicator. Customize colors, sizing, and track appearance.

styleSpec → ProgressSpec?

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.

semanticsLabel → String?

Optional. The accessible name for a non-decorative progress indicator. When omitted, the progress indicator remains decorative.

semanticsValue → String?

Optional. The accessible progress value used with semanticsLabel. When omitted, Remix announces the rounded 0–100 value.

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 value)

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.

call({Key? key, required double value, String? semanticsLabel, String? semanticsValue})

Creates a RemixProgress widget with this style applied.