Simple configurable circular progress bar built out of the lines.

An animated image of the iOS in-app purchase UI     

Configuration

Param Description Type Default value
linesLength Defines how long will lines in loader be double 50
radius Defines radius between center of circle and start point of each line double 100
percent Defines progress, min value is 0, max value is 100 double required field
linesAmount Defines how many lines progress bar contains int 60
linesWidth Defines width for each line double 2
linesColor Defines lines' color Color Colors.black
centerWidgetBuilder Builder for widget that will be placed in center of progress bar Widget Function(BuildContext)? optional field

Getting started

Installing

dependencies:
  circular_progress_bar_with_lines: ^0.0.5

Import

import 'package:circular_progress_bar_with_lines/circular_progress_bar_with_lines.dart';

Example

class _HomePageState extends State<HomePage> {
  double _percent = 0;

  void _updateValue(double newValue) {
    setState(() {
      _percent = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Flexible(
              child: CircularProgressBarWithLines(
                percent: _percent,
                centerWidgetBuilder: (context) => Text(
                  '${_percent.round()}',
                ),
              ),
            ),
            Slider(
              value: _percent.toDouble(),
              min: 0,
              max: 100,
              onChanged: _updateValue,
            )
          ],
        ),
      ),
    );
  }
}

Libraries

circular_progress_bar_with_lines