AreaChartWidget class

A modern area chart widget with gradient fills and smooth animations.

This widget displays one or more data series as filled areas with optional points and interactive tooltips. Area charts are useful for showing cumulative values over time and comparing multiple series.

Features

Multiple data series support with distinct colors
Smooth entrance animations with easing curves
Gradient area fills for visual appeal
Interactive point tapping with haptic feedback
Loading and error states with user-friendly messages
Full theme support (light/dark mode)
Glassmorphism and neumorphism effects
Optimized rendering with RepaintBoundary

Example

AreaChartWidget(
  dataSets: [
    ChartDataSet(
      color: Colors.blue,
      label: 'January',
      dataPoint: ChartDataPoint(x: 0, y: 100),
    ),
    ChartDataSet(
      color: Colors.blue,
      label: 'February',
      dataPoint: ChartDataPoint(x: 1, y: 150),
    ),
    ChartDataSet(
      color: Colors.blue,
      label: 'March',
      dataPoint: ChartDataPoint(x: 2, y: 200),
    ),
  ],
  theme: ChartTheme.light(),
  title: 'Active Users',
  subtitle: 'Monthly growth',
  onPointTap: (point, datasetIndex, pointIndex, position) {
    print('Tapped: ${point.y}');
    showContextMenu(position);
  },
)

Performance Tips

Use RepaintBoundary around multiple charts to isolate repaints
Cache data sets when possible to avoid unnecessary rebuilds
Consider using isLoading during data fetching

Constructors

AreaChartWidget({Key? key, required List<ChartDataSet> dataSets, double lineWidth = 3.0, bool showPoints = true, bool showGrid = true, bool showAxis = true, bool showLabel = true, String? title, String? subtitle, Widget? header, Widget? footer, ChartPointCallback? onPointTap, ChartTapCallback? onChartTap, bool isLoading = false, bool isError = false, double? height, EdgeInsets? padding, EdgeInsets? margin, ChartsConfig? config, int? xAxisLabelRotation, int? yAxisLabelRotation}): Creates an area chart widget.
const

Properties

config → ChartsConfig?: final
dataSets → List<ChartDataSet>: The data sets to display in the chart.
final
footer → Widget?: Optional widget displayed below the chart.
final
hashCode → int: The hash code for this object.
no setterinherited
header → Widget?: Optional widget displayed below the subtitle and above the chart.
final
height → double?: final
isError → bool: Whether the chart is in an error state.
final
isLoading → bool: Whether the chart is in a loading state.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
lineWidth → double: The width of the line connecting data points.
final
margin → EdgeInsets?: final
onChartTap → ChartTapCallback?: Callback invoked when the chart background (empty area) is tapped.
final
onPointTap → ChartPointCallback?: Callback invoked when a data point is tapped.
final
padding → EdgeInsets?: final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
showAxis → bool: Whether to show the axis lines.
final
showGrid → bool: Whether to show the grid lines.
final
showLabel → bool: Whether to show axis labels.
final
showPoints → bool: Whether to show data points on the chart.
final
subtitle → String?: The subtitle displayed below the title.
final
title → String?: The title displayed above the chart.
final
xAxisLabelRotation → int?: final
yAxisLabelRotation → int?: final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<AreaChartWidget>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited