circulito 0.6.0 circulito: ^0.6.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/donut chart for visualizing data using percentages and colors.
Features #
- Display circular wheel charts with customizable sections.
- Easily visualize data by providing amounts or percentages and corresponding colors.
- Gradient decoration on sections and background.
- Interactive sections:
hover
andonTap
events. - Animated sections.
Getting started #
Add the package to your pubspec.yaml file:
dependencies:
circulito: ^0.6.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.
);
Decoration #
The decoration
property is required for both the background and sections in Circulito to display something on the screen. While the background has a default value of grey when using CirculitoBackground()
, you can customize the decoration with either a color
or a gradient
.
Circulito(
background: CirculitoBackground(
// Implement decoration on background with color.
decoration: CirculitoDecoration.fromColor(
Colors.white,
hoverColor: Colors.grey,
),
),
sections: [
CirculitoSection(
value: 0.5,
// Implement decoration on a section with gradient.
decoration: CirculitoDecoration.fromGradient(
const LinearGradient(colors: [Colors.green, Colors.yellow]),
),
),
]
// ...other Circulito properties.
);
Section Interactivity #
To add Interactivity to sections or background just need to add onHover
or
onTap
properties to each CirculitoSection widget or CirculitoBackground widget:
Circulito(
sections: [
CirculitoSection(
...// required properties
onHover: _doHoverAction,
onTap: _doTapAction,
),
]
// ...other Circulito properties.
);
Parameters #
Name | 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.