Spinner

An animated loading spinner component for indicating ongoing processes.

Interactive preview

Resolving preview metadata...

When to use this

Loading states: Show that content or data is being loaded
Processing: Indicate that a background process is running
Async operations: Display during API calls or file uploads
Indeterminate progress: When the completion time is unknown

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class SpinnerExample extends StatelessWidget {
  const SpinnerExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      spacing: 16,
      children: [
        RemixSpinner(style: styleDefault),
        RemixSpinner(style: styleWithTrack),
        RemixSpinner(style: styleCustomColors),
      ],
    );
  }
 
  RemixSpinnerStyler get styleDefault {
    return RemixSpinnerStyler().indicatorColor(Colors.blue);
  }
 
  RemixSpinnerStyler get styleWithTrack {
    return RemixSpinnerStyler()
        .indicatorColor(Colors.green)
        .trackColor(Colors.green.withValues(alpha: 0.2));
  }
 
  RemixSpinnerStyler get styleCustomColors {
    return RemixSpinnerStyler()
        .indicatorColor(Colors.redAccent)
        .trackColor(Colors.red.withValues(alpha: 0.15))
        .duration(2.s);
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal base style


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalSpinnerExample extends StatelessWidget {
  const FortalSpinnerExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 16,
      children: [
        RemixSpinner(style: fortalSpinnerStyler(size: .size1)),
        RemixSpinner(style: fortalSpinnerStyler(size: .size2)),
        RemixSpinner(style: fortalSpinnerStyler(size: .size3)),
      ],
    );
  }
}

See the fortalSpinnerStyler source code for all available options.

Constructor


const RemixSpinner({
  Key? key,
  RemixSpinnerStyler style = const RemixSpinnerStyler.create(),
  RemixSpinnerSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixSpinnerStyler`	Optional. The style configuration for the spinner. Customize colors, sizing, stroke, and animation duration.
`styleSpec`	`RemixSpinnerSpec?`	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.

Style Methods

Method	Description
`size(double value)`	Sets the spinner size (width and height).
`indicatorColor(Color value)`	Sets the color of the spinning indicator.
`trackColor(Color value)`	Sets the color of the track (background ring).
`strokeWidth(double value)`	Sets the stroke width of the indicator.
`trackStrokeWidth(double value)`	Sets the stroke width of the track.
`duration(Duration value)`	Sets the duration of one full rotation.
`animate(AnimationConfig animation)`	Configures implicit animation for style transitions.
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.