circular_progress_bar_with_lines

Description:

circular progress bar with lines

Simple configurable circular progress bar built out of the lines.


    

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
copied to clipboard
Import #
import 'package:circular_progress_bar_with_lines/circular_progress_bar_with_lines.dart';
copied to clipboard
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,
)
],
),
),
);
}
}

copied to clipboard