diff --git a/README.md b/README.md
index ffe8cdd9e..9e01768eb 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,10 @@
# Syncfusion Flutter Widgets
-Syncfusion Flutter widgets libraries include high-quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
+Syncfusion Flutter widgets libraries include high-quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base. Please find the [supported platforms](https://help.syncfusion.com/flutter/system-requirements#supported-platforms) for our Flutter widgets.
**Disclaimer:** This is a commercial package. To use our packages, you need to have either the Syncfusion Commercial License or Syncfusion Community license. For more details, please check the [LICENSE](https://github.com/syncfusion/flutter-examples/blob/master/LICENSE) file.
-**Note:** Our packages are now compatible with Flutter for Web. However, this will be in Beta until Flutter for Web becomes stable.
-
diff --git a/packages/syncfusion_flutter_calendar/lib/src/calendar/theme.dart b/packages/syncfusion_flutter_calendar/lib/src/calendar/theme.dart
new file mode 100644
index 000000000..76df07964
--- /dev/null
+++ b/packages/syncfusion_flutter_calendar/lib/src/calendar/theme.dart
@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+/// [SfCalendarThemeDataM2] this class provides material2 themeData.
+/// SfCalendarThemeDataM2 class extends the 'SfCalendarThemeData' class and
+/// customize the appearance of a mapping component based on th color scheme
+/// obtained from the provided [BuildContext].
+class SfCalendarThemeDataM2 extends SfCalendarThemeData {
+ /// This a constructor that takes a [BuildContext] as a parameter.This context
+ /// is used for obtaining the color scheme of the current theme.
+ SfCalendarThemeDataM2(this.context);
+
+ /// Property that stores the provided [BuildContext]
+ /// context is later used to obtain the color scheme.
+ final BuildContext context;
+
+ /// A late-initialized property representing the color scheme obtained from
+ /// the current theme using the provided [BuildContext]
+ late final ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+ @override
+ Color? get backgroundColor => Colors.transparent;
+
+ @override
+ Color? get headerBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get agendaBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get activeDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get todayBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get trailingDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get leadingDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get viewHeaderBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get allDayPanelColor => Colors.transparent;
+
+ @override
+ Color? get weekNumberBackgroundColor =>
+ colorScheme.onSurface.withOpacity(0.04);
+
+ @override
+ Color? get cellBorderColor => colorScheme.onSurface.withOpacity(0.16);
+
+ @override
+ Color? get todayHighlightColor => colorScheme.primary;
+
+ @override
+ Color? get selectionBorderColor => colorScheme.primary;
+}
+
+/// [SfCalendarThemeDataM3] this class provides material3 themeData.
+/// SfCalendarThemeDataM3 class extends the 'SfCalendarThemeData' class and
+/// customize the appearance of a mapping component based on th color scheme
+/// obtained from the provided [BuildContext].
+class SfCalendarThemeDataM3 extends SfCalendarThemeData {
+ /// This a constructor that takes a [BuildContext] as a parameter.This context
+ /// is used for obtaining the color scheme of the current theme.
+ SfCalendarThemeDataM3(this.context);
+
+ /// Property that stores the provided [BuildContext]
+ /// context is later used to obtain the color scheme.
+ final BuildContext context;
+
+ /// A late-initialized property representing the color scheme obtained from
+ /// the current theme using the provided [BuildContext]
+ late final ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+ @override
+ Color? get backgroundColor => Colors.transparent;
+
+ @override
+ Color? get headerBackgroundColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(247, 242, 251, 1)
+ : const Color.fromRGBO(37, 35, 42, 1);
+
+ @override
+ Color? get agendaBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get activeDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get todayBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get trailingDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get leadingDatesBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get viewHeaderBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get allDayPanelColor => Colors.transparent;
+
+ @override
+ Color? get weekNumberBackgroundColor =>
+ colorScheme.onSurface.withOpacity(0.04);
+
+ @override
+ Color? get cellBorderColor => colorScheme.outlineVariant;
+
+ @override
+ Color? get todayHighlightColor => colorScheme.primary;
+
+ @override
+ Color? get selectionBorderColor => colorScheme.primary;
+}
diff --git a/packages/syncfusion_flutter_charts/lib/src/charts/theme.dart b/packages/syncfusion_flutter_charts/lib/src/charts/theme.dart
new file mode 100644
index 000000000..2468af49d
--- /dev/null
+++ b/packages/syncfusion_flutter_charts/lib/src/charts/theme.dart
@@ -0,0 +1,373 @@
+import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
+
+/// Holds the value of [SfChartThemeData] color properties for
+/// material 2 theme based on the brightness.
+class SfChartThemeDataM2 extends SfChartThemeData {
+ /// Creating an argument constructor of SfChartThemeDataM2 class.
+ SfChartThemeDataM2(this.context);
+
+ /// Specifies the build context of the chart widgets.
+ final BuildContext context;
+
+ /// Specifies the material app color scheme based on the brightness.
+ late final ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+ /// Specifies the material app theme data based on the brightness.
+ late final TextTheme textTheme = Theme.of(context).textTheme;
+
+ @override
+ Color? get backgroundColor => Colors.transparent;
+
+ List get palette => const [
+ Color.fromRGBO(75, 135, 185, 1),
+ Color.fromRGBO(192, 108, 132, 1),
+ Color.fromRGBO(246, 114, 128, 1),
+ Color.fromRGBO(248, 177, 149, 1),
+ Color.fromRGBO(116, 180, 155, 1),
+ Color.fromRGBO(0, 168, 181, 1),
+ Color.fromRGBO(73, 76, 162, 1),
+ Color.fromRGBO(255, 205, 96, 1),
+ Color.fromRGBO(255, 240, 219, 1),
+ Color.fromRGBO(238, 238, 238, 1)
+ ];
+
+ @override
+ Color? get axisLabelColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(104, 104, 104, 1)
+ : const Color.fromRGBO(242, 242, 242, 1);
+
+ @override
+ Color? get axisTitleColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(66, 66, 66, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get axisLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(181, 181, 181, 1)
+ : const Color.fromRGBO(101, 101, 101, 1);
+
+ @override
+ Color? get majorGridLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(219, 219, 219, 1)
+ : const Color.fromRGBO(70, 74, 86, 1);
+
+ @override
+ Color? get minorGridLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(234, 234, 234, 1)
+ : const Color.fromRGBO(70, 74, 86, 1);
+
+ @override
+ Color? get majorTickLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(181, 181, 181, 1)
+ : const Color.fromRGBO(191, 191, 191, 1);
+
+ @override
+ Color? get minorTickLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(214, 214, 214, 1)
+ : const Color.fromRGBO(150, 150, 150, 1);
+
+ @override
+ Color? get titleTextColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(66, 66, 66, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get titleBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get legendTextColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(53, 53, 53, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get legendBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get legendTitleColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(66, 66, 66, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ Color get markerFillColor =>
+ colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
+
+ Color get dataLabelBackgroundColor =>
+ colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
+
+ @override
+ Color? get plotAreaBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get plotAreaBorderColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(219, 219, 219, 1)
+ : const Color.fromRGBO(101, 101, 101, 1);
+
+ @override
+ Color? get crosshairLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(79, 79, 79, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get crosshairBackgroundColor =>
+ colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(79, 79, 79, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get crosshairLabelColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(255, 255, 255, 1)
+ : const Color.fromRGBO(0, 0, 0, 1);
+
+ @override
+ Color? get tooltipColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(0, 8, 22, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get tooltipLabelColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(255, 255, 255, 1)
+ : const Color.fromRGBO(0, 0, 0, 1);
+
+ @override
+ Color? get tooltipSeparatorColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(255, 255, 255, 1)
+ : const Color.fromRGBO(150, 150, 150, 1);
+
+ @override
+ Color? get selectionRectColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(41, 171, 226, 0.1)
+ : const Color.fromRGBO(255, 217, 57, 0.3);
+
+ @override
+ Color? get selectionRectBorderColor =>
+ colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(41, 171, 226, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ Color? get selectionTooltipConnectorLineColor =>
+ colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(79, 79, 79, 1)
+ : const Color.fromRGBO(150, 150, 150, 1);
+
+ @override
+ Color? get waterfallConnectorLineColor =>
+ colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(0, 0, 0, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ TextStyle? get titleTextStyle => textTheme.bodyMedium?.copyWith(fontSize: 15);
+
+ @override
+ TextStyle? get axisTitleTextStyle =>
+ textTheme.bodyMedium?.copyWith(fontSize: 15);
+
+ @override
+ TextStyle? get axisLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get axisMultiLevelLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get plotBandLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get legendTitleTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get legendTextStyle => textTheme.bodySmall?.copyWith(fontSize: 13);
+
+ @override
+ TextStyle? get dataLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get tooltipTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get trackballTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get crosshairTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get selectionZoomingTooltipTextStyle => textTheme.bodySmall;
+}
+
+/// Holds the value of [SfChartThemeData] color properties for material 3
+/// theme based on the brightness.
+class SfChartThemeDataM3 extends SfChartThemeData {
+ /// Creating an argument constructor of SfChartThemeDataM3 class.
+ SfChartThemeDataM3(this.context);
+
+ /// Specifies the build context of the chart widgets.
+ final BuildContext context;
+
+ /// Specifies the material app color scheme based on the brightness.
+ late final ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+ /// Specifies the material app theme data based on the brightness.
+ late final TextTheme textTheme = Theme.of(context).textTheme;
+
+ @override
+ Color? get backgroundColor => Colors.transparent;
+
+ List get palette => colorScheme.brightness == Brightness.light
+ ? const [
+ Color.fromRGBO(6, 174, 224, 1),
+ Color.fromRGBO(99, 85, 199, 1),
+ Color.fromRGBO(49, 90, 116, 1),
+ Color.fromRGBO(255, 180, 0, 1),
+ Color.fromRGBO(150, 60, 112, 1),
+ Color.fromRGBO(33, 150, 245, 1),
+ Color.fromRGBO(71, 59, 137, 1),
+ Color.fromRGBO(236, 92, 123, 1),
+ Color.fromRGBO(59, 163, 26, 1),
+ Color.fromRGBO(236, 131, 23, 1)
+ ]
+ : const [
+ Color.fromRGBO(255, 245, 0, 1),
+ Color.fromRGBO(51, 182, 119, 1),
+ Color.fromRGBO(218, 150, 70, 1),
+ Color.fromRGBO(201, 88, 142, 1),
+ Color.fromRGBO(77, 170, 255, 1),
+ Color.fromRGBO(255, 157, 69, 1),
+ Color.fromRGBO(178, 243, 46, 1),
+ Color.fromRGBO(185, 60, 228, 1),
+ Color.fromRGBO(48, 167, 6, 1),
+ Color.fromRGBO(207, 142, 14, 1)
+ ];
+
+ @override
+ Color? get axisLabelColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get axisTitleColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get axisLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(202, 196, 208, 1)
+ : const Color.fromRGBO(73, 69, 79, 1);
+
+ @override
+ Color? get majorGridLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(231, 224, 236, 1)
+ : const Color.fromRGBO(54, 50, 59, 1);
+
+ // TODO(Praveen): Need to update color
+ @override
+ Color? get minorGridLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(234, 234, 234, 1)
+ : const Color.fromRGBO(70, 74, 86, 1);
+
+ @override
+ Color? get majorTickLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(202, 196, 208, 1)
+ : const Color.fromRGBO(73, 69, 79, 1);
+
+ // TODO(Praveen): Need to update color
+ @override
+ Color? get minorTickLineColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(214, 214, 214, 1)
+ : const Color.fromRGBO(150, 150, 150, 1);
+
+ @override
+ Color? get titleTextColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get titleBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get legendTextColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get legendBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get legendTitleColor => colorScheme.onSurfaceVariant;
+
+ Color get markerFillColor =>
+ colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
+
+ Color get dataLabelBackgroundColor =>
+ colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
+
+ @override
+ Color? get plotAreaBackgroundColor => Colors.transparent;
+
+ @override
+ Color? get plotAreaBorderColor => colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(231, 224, 236, 1)
+ : const Color.fromRGBO(54, 50, 59, 1);
+
+ @override
+ Color? get crosshairLineColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get crosshairBackgroundColor => colorScheme.inverseSurface;
+
+ @override
+ Color? get crosshairLabelColor => colorScheme.onInverseSurface;
+
+ @override
+ Color? get tooltipColor => colorScheme.inverseSurface;
+
+ @override
+ Color? get tooltipLabelColor => colorScheme.onInverseSurface;
+
+ @override
+ Color? get tooltipSeparatorColor => colorScheme.onInverseSurface;
+
+ @override
+ Color? get selectionRectColor => colorScheme.brightness == Brightness.light
+ ? colorScheme.primary.withOpacity(0.1)
+ : colorScheme.primary.withOpacity(0.3);
+
+ @override
+ Color? get selectionRectBorderColor => colorScheme.primary;
+
+ @override
+ Color? get selectionTooltipConnectorLineColor => colorScheme.onSurfaceVariant;
+
+ @override
+ Color? get waterfallConnectorLineColor =>
+ colorScheme.brightness == Brightness.light
+ ? const Color.fromRGBO(0, 0, 0, 1)
+ : const Color.fromRGBO(255, 255, 255, 1);
+
+ @override
+ TextStyle? get titleTextStyle => textTheme.bodyMedium!.copyWith(fontSize: 16);
+
+ @override
+ TextStyle? get axisTitleTextStyle => textTheme.bodyMedium;
+
+ @override
+ TextStyle? get axisLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get axisMultiLevelLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get plotBandLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get legendTitleTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get legendTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get dataLabelTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get tooltipTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get trackballTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get crosshairTextStyle => textTheme.bodySmall;
+
+ @override
+ TextStyle? get selectionZoomingTooltipTextStyle => textTheme.bodySmall;
+}
diff --git a/packages/syncfusion_flutter_core/lib/src/theme/spark_charts_theme.dart b/packages/syncfusion_flutter_core/lib/src/theme/spark_charts_theme.dart
new file mode 100644
index 000000000..cfde765bc
--- /dev/null
+++ b/packages/syncfusion_flutter_core/lib/src/theme/spark_charts_theme.dart
@@ -0,0 +1,503 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import '../../theme.dart';
+
+/// Applies a theme to descendant Syncfusion spark chart widgets.
+///
+/// To obtain the current theme, use [SfSparkChartTheme.of].
+///
+/// ```dart
+/// Widget build(BuildContext context) {
+/// return Scaffold(
+/// body: SfSparkChartTheme(
+/// data: SfSparkChartThemeData(
+/// brightness: Brightness.light
+/// ),
+/// child: SfSparkLineChart(),
+/// ),
+/// );
+/// }
+/// ```
+///
+/// See also:
+///
+/// * [SfTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfTheme-class.html)
+/// and [SfThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfThemeData-class.html),
+/// for customizing the visual appearance of the spark chart widgets.
+///
+class SfSparkChartTheme extends InheritedTheme {
+ /// Initialize the class of SfSparkChartTheme
+ const SfSparkChartTheme({Key? key, required this.data, required this.child})
+ : super(key: key, child: child);
+
+ /// Specifies the color and typography values for descendant
+ /// spark chart widgets.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: SfSparkChartTheme(
+ /// data: SfSparkChartThemeData(
+ /// brightness: Brightness.light
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// );
+ /// }
+ /// ```
+
+ final SfSparkChartThemeData data;
+
+ /// Specifies a widget that can hold single child.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: SfSparkChartTheme(
+ /// data: SfSparkChartThemeData(
+ /// brightness: Brightness.light
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// );
+ /// }
+ /// ```
+ @override
+ final Widget child;
+
+ /// The data from the closest [SfSparkChartTheme] instance
+ /// that encloses the given context.
+ ///
+ /// Defaults to [SfSparkChartTheme.SparkChartThemeData]
+ /// if there is no [SfSparkChartTheme] in the given build context.
+ static SfSparkChartThemeData of(BuildContext context) {
+ final SfSparkChartTheme? sfSparkChartTheme =
+ context.dependOnInheritedWidgetOfExactType();
+ return sfSparkChartTheme?.data ?? SfTheme.of(context).sparkChartThemeData;
+ }
+
+ @override
+ bool updateShouldNotify(SfSparkChartTheme oldWidget) =>
+ data != oldWidget.data;
+
+ @override
+ Widget wrap(BuildContext context, Widget child) {
+ final SfSparkChartTheme? ancestorTheme =
+ context.findAncestorWidgetOfExactType();
+ return identical(this, ancestorTheme)
+ ? child
+ : SfSparkChartTheme(data: data, child: child);
+ }
+}
+
+/// Holds the color and typography values for a [SfSparkChartTheme].
+/// Applies a theme to descendant Syncfusion spark charts widgets.
+///
+/// To obtain the current theme, use [SfSparkChartTheme.of].
+///
+/// ```dart
+/// Widget build(BuildContext context) {
+/// return Scaffold(
+/// body: SfSparkChartTheme(
+/// data: SfSparkChartThemeData(
+/// brightness: Brightness.light
+/// ),
+/// child: SfSparkLineChart(),
+/// ),
+/// );
+/// }
+/// ```
+///
+/// See also:
+///
+/// * [SfTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfTheme-class.html)
+/// and [SfThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfThemeData-class.html),
+/// for customizing the visual appearance of the spark chart widgets.
+///
+@immutable
+class SfSparkChartThemeData with Diagnosticable {
+ /// Initialize the Sfspark chart theme data
+ const SfSparkChartThemeData({
+ this.backgroundColor,
+ this.color,
+ this.axisLineColor,
+ this.markerFillColor,
+ this.dataLabelBackgroundColor,
+ this.tooltipColor,
+ this.trackballLineColor,
+ this.tooltipLabelColor,
+ this.dataLabelTextStyle,
+ this.trackballTextStyle,
+ });
+
+ /// Create a [SfSparkChartThemeData] given a set of exact values.
+ /// All the values must be specified.
+ ///
+ /// This will rarely be used directly. It is used by [lerp] to
+ /// create intermediate themes based on two themes created with the
+ /// [SfSparkChartThemeData] constructor.
+ factory SfSparkChartThemeData.raw({
+ Brightness? brightness,
+ Color? backgroundColor,
+ Color? color,
+ Color? axisLineColor,
+ Color? markerFillColor,
+ Color? dataLabelBackgroundColor,
+ Color? tooltipColor,
+ Color? trackballLineColor,
+ Color? tooltipLabelColor,
+ TextStyle? dataLabelTextStyle,
+ TextStyle? trackballTextStyle,
+ }) {
+ brightness = brightness ?? Brightness.light;
+
+ return SfSparkChartThemeData(
+ backgroundColor: backgroundColor,
+ color: color,
+ axisLineColor: axisLineColor,
+ markerFillColor: markerFillColor,
+ dataLabelBackgroundColor: dataLabelBackgroundColor,
+ tooltipColor: tooltipColor,
+ trackballLineColor: trackballLineColor,
+ tooltipLabelColor: tooltipLabelColor,
+ dataLabelTextStyle: dataLabelTextStyle,
+ trackballTextStyle: trackballTextStyle,
+ );
+ }
+
+ /// Specifies the background color of spark chart widgets.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// appBar: AppBar(),
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// SparkChartThemeData: SfSparkChartThemeData(
+ /// backgroundColor: Colors.yellow
+ /// ),
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ ///}
+ /// ```
+ final Color? backgroundColor;
+
+ /// Specifies the color for axis line.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// axisLineColor: Colors.blue
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? axisLineColor;
+
+ /// Specifies the color of the spark chart.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// color: Colors.blue
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? color;
+
+ /// Specifies the color for chart marker.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// markerFillColor: Colors.red
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? markerFillColor;
+
+ /// Specifies the background color for data labels.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// dataLabelBackgroundColor: Colors.red
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? dataLabelBackgroundColor;
+
+ /// Specifies the color of the tooltip.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// tooltipColor: Colors.teal
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? tooltipColor;
+
+ /// Specifies the tooltip line color.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// trackballLineColor: Colors.red
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? trackballLineColor;
+
+ /// Specifies the text color of the tooltip.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// sparkChartThemeData: SfSparkChartThemeData(
+ /// tooltipLabelColor: Colors.amber
+ /// )
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ ///```
+
+ final Color? tooltipLabelColor;
+
+ /// Specifies the data label text style for spark chart label text.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// appBar: AppBar(),
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// SparkChartThemeData: SfSparkChartThemeData(
+ /// dataLabelTextStyle: TextStyle(color: Colors.blue)
+ /// ),
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ /// ```
+ final TextStyle? dataLabelTextStyle;
+
+ /// Specifies the trackball text style for spark chart label text.
+ ///
+ /// ```dart
+ /// Widget build(BuildContext context) {
+ /// return Scaffold(
+ /// appBar: AppBar(),
+ /// body: Center(
+ /// child: SfTheme(
+ /// data: SfThemeData(
+ /// SparkChartThemeData: SfSparkChartThemeData(
+ /// trackballTextStyle: TextStyle(color: Colors.blue)
+ /// ),
+ /// ),
+ /// child: SfSparkLineChart(),
+ /// ),
+ /// )
+ /// );
+ /// }
+ /// ```
+ final TextStyle? trackballTextStyle;
+
+ /// Creates a copy of this spark chart theme data object with the
+ /// matching fields
+ /// replaced with the non-null parameter values.
+ SfSparkChartThemeData copyWith({
+ Brightness? brightness,
+ Color? backgroundColor,
+ Color? color,
+ Color? axisLineColor,
+ Color? markerFillColor,
+ Color? dataLabelBackgroundColor,
+ Color? tooltipColor,
+ Color? trackballLineColor,
+ Color? tooltipLabelColor,
+ TextStyle? dataLabelTextStyle,
+ TextStyle? trackballTextStyle,
+ }) {
+ return SfSparkChartThemeData.raw(
+ brightness: brightness,
+ backgroundColor: backgroundColor ?? this.backgroundColor,
+ color: color ?? this.color,
+ axisLineColor: axisLineColor ?? this.axisLineColor,
+ markerFillColor: markerFillColor ?? this.markerFillColor,
+ dataLabelBackgroundColor:
+ dataLabelBackgroundColor ?? this.dataLabelBackgroundColor,
+ tooltipColor: tooltipColor ?? this.tooltipColor,
+ trackballLineColor: trackballLineColor ?? this.trackballLineColor,
+ tooltipLabelColor: tooltipLabelColor ?? this.tooltipLabelColor,
+ dataLabelTextStyle: dataLabelTextStyle ?? this.dataLabelTextStyle,
+ trackballTextStyle: trackballTextStyle ?? this.trackballTextStyle);
+ }
+
+ /// Returns the spark chart theme data
+ static SfSparkChartThemeData? lerp(
+ SfSparkChartThemeData? a, SfSparkChartThemeData? b, double t) {
+ if (a == null && b == null) {
+ return null;
+ }
+ return SfSparkChartThemeData(
+ backgroundColor: Color.lerp(a!.backgroundColor, b!.backgroundColor, t),
+ color: Color.lerp(a.color, b.color, t),
+ axisLineColor: Color.lerp(a.axisLineColor, b.axisLineColor, t),
+ markerFillColor: Color.lerp(a.markerFillColor, b.markerFillColor, t),
+ dataLabelBackgroundColor:
+ Color.lerp(a.dataLabelBackgroundColor, b.dataLabelBackgroundColor, t),
+ tooltipColor: Color.lerp(a.tooltipColor, b.tooltipColor, t),
+ trackballLineColor:
+ Color.lerp(a.trackballLineColor, b.trackballLineColor, t),
+ tooltipLabelColor:
+ Color.lerp(a.tooltipLabelColor, b.tooltipLabelColor, t),
+ dataLabelTextStyle:
+ TextStyle.lerp(a.dataLabelTextStyle, b.dataLabelTextStyle, t),
+ trackballTextStyle:
+ TextStyle.lerp(a.trackballTextStyle, b.trackballTextStyle, t),
+ );
+ }
+
+ @override
+ bool operator ==(Object other) {
+ if (identical(this, other)) {
+ return true;
+ }
+ if (other.runtimeType != runtimeType) {
+ return false;
+ }
+
+ return other is SfSparkChartThemeData &&
+ other.backgroundColor == backgroundColor &&
+ other.color == color &&
+ other.axisLineColor == axisLineColor &&
+ other.markerFillColor == markerFillColor &&
+ other.dataLabelBackgroundColor == dataLabelBackgroundColor &&
+ other.tooltipColor == tooltipColor &&
+ other.trackballLineColor == trackballLineColor &&
+ other.tooltipLabelColor == tooltipLabelColor &&
+ other.dataLabelTextStyle == dataLabelTextStyle &&
+ other.trackballTextStyle == trackballTextStyle;
+ }
+
+ @override
+ int get hashCode {
+ final List