Spinner

In ProgressDark modeRTL

A circular loading indicator.

7:21

Installation

Copy the component into your project using the CLI:

$ronakcn add spinner

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/spinner/spinner.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnSpinner Example')),
      body: Center(
        child: RcnSpinner(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Spinner ships with the following variants:

default

A medium-sized spinner.

7:21

with-label

Spinner with a loading label below.

7:21

Props

Prop	Type	Default	Description
`size`	`double`	`24`	Diameter of the spinner.
`color`	`Color?`	`null`	Color of the spinner.
`label`	`String?`	`null`	Optional text below.

Source files

lib/components/ui/spinner.dart

import 'package:flutter/material.dart';

class RcnSpinner extends StatelessWidget {
  const RcnSpinner({super.key, this.size = 24, this.color, this.label});
  final double size;
  final Color? color;
  final String? label;

  @override
  Widget build(BuildContext context) {
    final c = color ?? Theme.of(context).colorScheme.primary;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(width: size, height: size, child: CircularProgressIndicator(strokeWidth: size / 10, color: c)),
        if (label != null) ...[const SizedBox(height: 8), Text(label!, style: TextStyle(fontSize: 12, color: c))],
      ],
    );
  }
}

Version 0.1.0 · display category