Skip to main content

AsLoadingCircular

A circular progress indicator component for showing determinate or indeterminate progress.

Import​

import 'package:alphasow_ui/alphasow_ui.dart';

Basic Usage (Indeterminate)​

AsLoadingCircular()

Progress Indicator (Determinate)​

AsLoadingCircular(
  value: 0.7, // 70% progress
)

API Reference​

Properties​

PropertyTypeDefaultDescription
valuedouble?nullProgress value (0.0 to 1.0). null for indeterminate
sizedouble?24Size of the indicator
colorColor?nullColor of the indicator
backgroundColorColor?nullBackground color
strokeWidthdouble?4.0Width of the progress stroke

Examples​

Progress Bar​

class ProgressExample extends StatefulWidget {
  @override
  _ProgressExampleState createState() => _ProgressExampleState();
}

class _ProgressExampleState extends State<ProgressExample> {
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AsLoadingCircular(
          value: _progress,
          size: 64,
        ),
        SizedBox(height: 16),
        Text('${(_progress * 100).round()}%'),
        SizedBox(height: 16),
        AsButton(
          onPressed: () {
            setState(() => _progress = (_progress + 0.1).clamp(0.0, 1.0));
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

See Also​