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

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 → Key?

Optional.

styleSpec → Key?

Optional.

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)

animate(AnimationConfig config)

constraints(BoxConstraintsMix value)

decoration(DecorationMix value)

margin(EdgeInsetsGeometryMix value)

padding(EdgeInsetsGeometryMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)