circulito 0.4.0
circulito: ^0.4.0 copied to clipboard
Circulito provides a simple circular wheel/donut chart for visualizing data using percentages and colors.
Circulito #
Circulito provides a simple circular wheel chart for visualizing data using percentages and colors.
![example circle wheel](https://user-images.githubusercontent.com/138328831/263871505-d39bc60c-261f-448f-91a6-5605ad1e4f2d.png)
Features #
- Display circular wheel charts with customizable sections.
- Easily visualize data by providing percentages and corresponding colors.
Getting started #
Add the package to your pubspec.yaml file:
dependencies:
circulito: ^0.4.0
Usage #
Use the Circulito widget in your Flutter app:
Circulito(
maxSize: 480,
padding: 20.0,
strokeWidth: 80,
startPoint: StartPoint.left,
background: CirculitoBackground(),
strokeCap: CirculitoStrokeCap.round,
direction: CirculitoDirection.clockwise,
sectionValueType: SectionValueType.percentage,
sections: [
// Male percentage.
CirculitoSection(
value: .35,
color: Colors.blue,
hoverColor: Colors.blueAccent,
),
// Female percentage.
CirculitoSection(
value: .40,
color: Colors.pink,
hoverColor: Colors.pinkAccent,
),
],
);
Amount values
If you want to use amount values instead of percentages just add sectionValueType
property. The library will automatically calculate the percentages.
Circulito(
sectionValueType: SectionValueType.amount,
sections: [
CirculitoSection(
value: 535, // Amount values instead of percentages.
color: Colors.blue,
),
//...other sections with amount values.
]
// ...other Circulito properties.
)
Animation
To add Animation simply add animation
property:
Circulito(
animation: CirculitoAnimation(),
// ...other Circulito properties.
)
You can also configure duration and curve of the animation like this:
Circulito(
animation: CirculitoAnimation(
duration: 200,
curve: Curves.easeInOut,
),
// ...other Circulito properties.
)
Parameters #
Parameter | Type | Description |
---|---|---|
animation |
Animation |
The animation to be applied to the wheel. |
background |
CirculitoAnimation? |
The background of the wheel to be painted. |
child |
Widget |
The widget to be shown over the wheel. |
direction |
CirculitoDirection |
Determines the direction of the wheel. |
isCentered |
bool |
Whether the widget should be centered or not inside the parent widget. |
maxSize |
double |
The maximum size the widget can grow inside its parent. |
padding |
double? |
The padding to be applied to the widget. |
sections |
List<CirculitoSection> |
A list of CirculitoSection objects representing each chart section. |
sectionValueType |
SectionValueType |
Type of the value of each section (amount or percentage ) |
startPoint |
StartPoint |
Determines the start point of the wheel. |
strokeCap |
CirculitoStrokeCap |
The type of cap to use for the stroke (round or butt ). |
strokeWidth |
double |
The width of the stroke that defines the chart's outline. |
License #
This project is licensed under the MIT License - see the LICENSE file for details.