An animated loading spinner component for indicating ongoing processes.

Interactive preview

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: .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 widgets

Remix includes a generated Fortal-themed widget for this component:

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: [
        FortalSpinner(size: FortalSpinnerSize.size2),
        FortalSpinner(size: FortalSpinnerSize.size3),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

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

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

Configures implicit animation for style transitions.

wrap(WidgetModifierConfig value)

Applies widget modifiers such as clipping, opacity, or scaling.

call()

Creates a RemixSpinner widget with this style applied.