Skip to Content
DocsRemixComponentsSpinner

An animated loading spinner component for indicating ongoing processes.

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

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),
      ],
    );
  }
 
  RemixSpinnerStyle get styleDefault {
    return RemixSpinnerStyle().indicatorColor(Colors.blue);
  }
 
  RemixSpinnerStyle get styleWithTrack {
    return RemixSpinnerStyle()
        .indicatorColor(Colors.green)
        .trackColor(Colors.green.withValues(alpha: 0.2));
  }
 
  RemixSpinnerStyle get styleCustomColors {
    return RemixSpinnerStyle()
        .indicatorColor(Colors.redAccent)
        .trackColor(Colors.red.withValues(alpha: 0.15))
        .duration(2.s);
  }
}

Interactive preview

Resolving preview metadata...

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: FortalSpinnerStyle.solid()),
        RemixSpinner(style: FortalSpinnerStyle.soft()),
      ],
    );
  }
}

See the FortalSpinnerStyle source code  for all available options.

Constructor

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

Properties

Widget Properties

style → RemixSpinnerStyle

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

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.

Last updated on
SliderSwitch