chart_components 1.0.1 copy "chart_components: ^1.0.1" to clipboard
chart_components: ^1.0.1 copied to clipboard

Two chart components for Flutter. Animated bar chart and animated calendar grid chart based on the github's one. Many properties to customize.

Chart_Components #

Animated bar chart for Flutter #

Customizable bar chart for Flutter. The component calculates min and max of data and resizes bars as needed.

bar chart

  • Add a data collection with the values to generate the bars.
  • Add a string collection with the labels to display below the items (optional)
  • Change bar size, margins and top corners as needed.
  • Change bar's color based on value. Callback, optional.
  • Enable/disable value on top of bar
  • Add an icon to the top of the bar based on item's value. Callback, optiona.
  • Enable/disable animation.
  • Change animation duration and curve through the properties

Animated calendar grid for Flutter #

calendar grid

  • Generates a grid for the selected month.
  • Changes day color through callback.
  • Animates changes. Animation curve and duration can be modified with the properties.

Demo #

Demo:

Usage #

To use plugin, just import package import 'package:chart_components/chart_components.dart';

Example #

Check de example directory to access the project that implements the image shown above.

        ........
                    CalendarGrid(
                            year: 2020,
                            month: 1,
                            getColorOfDay: DataRepository.getDayColor,
                            animationDuration: Duration(milliseconds: 1500),
                    ),

        ...........
                    child: BarChart(
                    data: data,
                    labels: labels,
                    dislplayValue: true,
                    reverse: true,
                    getColor: DataRepository.getColor,
                    getIcon: DataRepository.getIcon,
                    barWidth: 42,
                    barSeparation: 12,
                    animationDuration: Duration(milliseconds: 1800),
                    animationCurve: Curves.easeInOutSine,
                    itemRadius: 30,
                    iconHeight: 24,
                    footerHeight: 24,
                    headerValueHeight: 16,
                    roundValuesOnText: false,
                    lineGridColor: Colors.lightBlue,
                    ),
48
likes
130
pub points
73%
popularity

Publisher

unverified uploader

Two chart components for Flutter. Animated bar chart and animated calendar grid chart based on the github's one. Many properties to customize.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on chart_components