Progress

In ProgressDark modeRTL

A progress bar showing completion percentage.

7:21

Uploading...60%

Installing...33%

Processing...

Installation

Copy the component into your project using the CLI:

$ronakcn add progress

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

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

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

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

Variants

Progress ships with the following variants:

default

A basic progress bar.

7:21

Uploading...60%

with-label

Progress bar showing percentage label.

7:21

Uploading...60%

Installing...33%

indeterminate

An animating indeterminate progress bar.

7:21

Processing...

Props

Prop	Type	Default	Description
`value`	`double`	`0.0`	Progress from 0.0 to 1.0.
`max`	`double`	`1.0`	Maximum progress value.
`label`	`String?`	`null`	Text label shown on bar.

Source files

lib/components/ui/progress.dart

import 'package:flutter/material.dart';

class RcnProgress extends StatelessWidget {
  const RcnProgress({super.key, this.value = 0, this.max = 1, this.label});
  final double value;
  final double max;
  final String? label;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    final pct = (value / max).clamp(0.0, 1.0);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (label != null) ...[
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            Text(label!, style: TextStyle(fontSize: 13, color: colors.onSurface)),
            Text('${(pct * 100).round()}%', style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: colors.onSurface)),
          ]),
          const SizedBox(height: 6),
        ],
        ClipRRect(
          borderRadius: BorderRadius.circular(9999),
          child: LinearProgressIndicator(
            value: pct,
            minHeight: 8,
            backgroundColor: colors.secondary,
            valueColor: AlwaysStoppedAnimation(colors.primary),
          ),
        ),
      ],
    );
  }
}

Version 0.1.0 · display category