circulito 0.7.0

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 and onTap events.
• Animated sections.

Getting started

Add the package to your pubspec.yaml file:

dependencies:
  circulito: ^0.7.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.
);

Shadow

Add Shadow to the decoration for sections or background using shadow property:

decoration: const CirculitoDecoration.fromColor(
    Colors.grey,
    // Default grey shadow.
    shadow: CirculitoShadow(),
),

You can also customize the color, spreading and style of the shadow.

decoration: CirculitoDecoration.fromColor(
    Colors.grey,
    // Customized shadow.
    shadow: CirculitoShadow(
        color: Colors.blueGrey.withOpacity(.3),
        spreading: 16.0,
        blurStyle: BlurStyle.normal,
    ),
),

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.