Spinner

Starting Flutter example…

Live Flutter from this checkout’s component catalog. Examples include Fortal styling; the source tab shows the catalog code, not a standalone application.

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

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

  SpinnerStyler get styleDefault {
    return SpinnerStyler().indicatorColor(Colors.blue);
  }

  SpinnerStyler get styleWithTrack {
    return SpinnerStyler()
        .indicatorColor(Colors.green)
        .trackColor(Colors.green.withValues(alpha: 0.2));
  }

  SpinnerStyler get styleCustomColors {
    return SpinnerStyler()
        .indicatorColor(Colors.redAccent)
        .trackColor(Colors.red.withValues(alpha: 0.15))
        .duration(2.s);
  }
}

Fortal widgets

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

Fortal widget

import 'package:flutter/material.dart';
import 'ui/ui.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),
      ],
    );
  }
}

See the fortalSpinnerStyle source code for all available options.

Constructor

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

RemixSpinner remixSpinnerConstructor({
  Key? key,
  String? semanticsLabel,
  String? semanticsValue,
  SpinnerStyler style = const SpinnerStyler.create(),
  SpinnerSpec? styleSpec,
}) => throw UnimplementedError();