Skip to content

Commit ea8a5ad

Browse files
author
LokeshPalani
committed
Added missed theme file for charts and sparkcharts
1 parent fd77b89 commit ea8a5ad

File tree

2 files changed

+876
-0
lines changed

2 files changed

+876
-0
lines changed

‎packages/syncfusion_flutter_charts/lib/src/charts/theme.dart

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:syncfusion_flutter_core/theme.dart';
3+
4+
/// Holds the value of [SfChartThemeData] color properties for
5+
/// material 2 theme based on the brightness.
6+
class SfChartThemeDataM2 extends SfChartThemeData {
7+
/// Creating an argument constructor of SfChartThemeDataM2 class.
8+
SfChartThemeDataM2(this.context);
9+
10+
/// Specifies the build context of the chart widgets.
11+
final BuildContext context;
12+
13+
/// Specifies the material app color scheme based on the brightness.
14+
late final ColorScheme colorScheme = Theme.of(context).colorScheme;
15+
16+
/// Specifies the material app theme data based on the brightness.
17+
late final TextTheme textTheme = Theme.of(context).textTheme;
18+
19+
@override
20+
Color? get backgroundColor => Colors.transparent;
21+
22+
List<Color> get palette => const <Color>[
23+
Color.fromRGBO(75, 135, 185, 1),
24+
Color.fromRGBO(192, 108, 132, 1),
25+
Color.fromRGBO(246, 114, 128, 1),
26+
Color.fromRGBO(248, 177, 149, 1),
27+
Color.fromRGBO(116, 180, 155, 1),
28+
Color.fromRGBO(0, 168, 181, 1),
29+
Color.fromRGBO(73, 76, 162, 1),
30+
Color.fromRGBO(255, 205, 96, 1),
31+
Color.fromRGBO(255, 240, 219, 1),
32+
Color.fromRGBO(238, 238, 238, 1)
33+
];
34+
35+
@override
36+
Color? get axisLabelColor => colorScheme.brightness == Brightness.light
37+
? const Color.fromRGBO(104, 104, 104, 1)
38+
: const Color.fromRGBO(242, 242, 242, 1);
39+
40+
@override
41+
Color? get axisTitleColor => colorScheme.brightness == Brightness.light
42+
? const Color.fromRGBO(66, 66, 66, 1)
43+
: const Color.fromRGBO(255, 255, 255, 1);
44+
45+
@override
46+
Color? get axisLineColor => colorScheme.brightness == Brightness.light
47+
? const Color.fromRGBO(181, 181, 181, 1)
48+
: const Color.fromRGBO(101, 101, 101, 1);
49+
50+
@override
51+
Color? get majorGridLineColor => colorScheme.brightness == Brightness.light
52+
? const Color.fromRGBO(219, 219, 219, 1)
53+
: const Color.fromRGBO(70, 74, 86, 1);
54+
55+
@override
56+
Color? get minorGridLineColor => colorScheme.brightness == Brightness.light
57+
? const Color.fromRGBO(234, 234, 234, 1)
58+
: const Color.fromRGBO(70, 74, 86, 1);
59+
60+
@override
61+
Color? get majorTickLineColor => colorScheme.brightness == Brightness.light
62+
? const Color.fromRGBO(181, 181, 181, 1)
63+
: const Color.fromRGBO(191, 191, 191, 1);
64+
65+
@override
66+
Color? get minorTickLineColor => colorScheme.brightness == Brightness.light
67+
? const Color.fromRGBO(214, 214, 214, 1)
68+
: const Color.fromRGBO(150, 150, 150, 1);
69+
70+
@override
71+
Color? get titleTextColor => colorScheme.brightness == Brightness.light
72+
? const Color.fromRGBO(66, 66, 66, 1)
73+
: const Color.fromRGBO(255, 255, 255, 1);
74+
75+
@override
76+
Color? get titleBackgroundColor => Colors.transparent;
77+
78+
@override
79+
Color? get legendTextColor => colorScheme.brightness == Brightness.light
80+
? const Color.fromRGBO(53, 53, 53, 1)
81+
: const Color.fromRGBO(255, 255, 255, 1);
82+
83+
@override
84+
Color? get legendBackgroundColor => Colors.transparent;
85+
86+
@override
87+
Color? get legendTitleColor => colorScheme.brightness == Brightness.light
88+
? const Color.fromRGBO(66, 66, 66, 1)
89+
: const Color.fromRGBO(255, 255, 255, 1);
90+
91+
Color get markerFillColor =>
92+
colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
93+
94+
Color get dataLabelBackgroundColor =>
95+
colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
96+
97+
@override
98+
Color? get plotAreaBackgroundColor => Colors.transparent;
99+
100+
@override
101+
Color? get plotAreaBorderColor => colorScheme.brightness == Brightness.light
102+
? const Color.fromRGBO(219, 219, 219, 1)
103+
: const Color.fromRGBO(101, 101, 101, 1);
104+
105+
@override
106+
Color? get crosshairLineColor => colorScheme.brightness == Brightness.light
107+
? const Color.fromRGBO(79, 79, 79, 1)
108+
: const Color.fromRGBO(255, 255, 255, 1);
109+
110+
@override
111+
Color? get crosshairBackgroundColor =>
112+
colorScheme.brightness == Brightness.light
113+
? const Color.fromRGBO(79, 79, 79, 1)
114+
: const Color.fromRGBO(255, 255, 255, 1);
115+
116+
@override
117+
Color? get crosshairLabelColor => colorScheme.brightness == Brightness.light
118+
? const Color.fromRGBO(255, 255, 255, 1)
119+
: const Color.fromRGBO(0, 0, 0, 1);
120+
121+
@override
122+
Color? get tooltipColor => colorScheme.brightness == Brightness.light
123+
? const Color.fromRGBO(0, 8, 22, 1)
124+
: const Color.fromRGBO(255, 255, 255, 1);
125+
126+
@override
127+
Color? get tooltipLabelColor => colorScheme.brightness == Brightness.light
128+
? const Color.fromRGBO(255, 255, 255, 1)
129+
: const Color.fromRGBO(0, 0, 0, 1);
130+
131+
@override
132+
Color? get tooltipSeparatorColor => colorScheme.brightness == Brightness.light
133+
? const Color.fromRGBO(255, 255, 255, 1)
134+
: const Color.fromRGBO(150, 150, 150, 1);
135+
136+
@override
137+
Color? get selectionRectColor => colorScheme.brightness == Brightness.light
138+
? const Color.fromRGBO(41, 171, 226, 0.1)
139+
: const Color.fromRGBO(255, 217, 57, 0.3);
140+
141+
@override
142+
Color? get selectionRectBorderColor =>
143+
colorScheme.brightness == Brightness.light
144+
? const Color.fromRGBO(41, 171, 226, 1)
145+
: const Color.fromRGBO(255, 255, 255, 1);
146+
147+
@override
148+
Color? get selectionTooltipConnectorLineColor =>
149+
colorScheme.brightness == Brightness.light
150+
? const Color.fromRGBO(79, 79, 79, 1)
151+
: const Color.fromRGBO(150, 150, 150, 1);
152+
153+
@override
154+
Color? get waterfallConnectorLineColor =>
155+
colorScheme.brightness == Brightness.light
156+
? const Color.fromRGBO(0, 0, 0, 1)
157+
: const Color.fromRGBO(255, 255, 255, 1);
158+
159+
@override
160+
TextStyle? get titleTextStyle => textTheme.bodyMedium?.copyWith(fontSize: 15);
161+
162+
@override
163+
TextStyle? get axisTitleTextStyle =>
164+
textTheme.bodyMedium?.copyWith(fontSize: 15);
165+
166+
@override
167+
TextStyle? get axisLabelTextStyle => textTheme.bodySmall;
168+
169+
@override
170+
TextStyle? get axisMultiLevelLabelTextStyle => textTheme.bodySmall;
171+
172+
@override
173+
TextStyle? get plotBandLabelTextStyle => textTheme.bodySmall;
174+
175+
@override
176+
TextStyle? get legendTitleTextStyle => textTheme.bodySmall;
177+
178+
@override
179+
TextStyle? get legendTextStyle => textTheme.bodySmall?.copyWith(fontSize: 13);
180+
181+
@override
182+
TextStyle? get dataLabelTextStyle => textTheme.bodySmall;
183+
184+
@override
185+
TextStyle? get tooltipTextStyle => textTheme.bodySmall;
186+
187+
@override
188+
TextStyle? get trackballTextStyle => textTheme.bodySmall;
189+
190+
@override
191+
TextStyle? get crosshairTextStyle => textTheme.bodySmall;
192+
193+
@override
194+
TextStyle? get selectionZoomingTooltipTextStyle => textTheme.bodySmall;
195+
}
196+
197+
/// Holds the value of [SfChartThemeData] color properties for material 3
198+
/// theme based on the brightness.
199+
class SfChartThemeDataM3 extends SfChartThemeData {
200+
/// Creating an argument constructor of SfChartThemeDataM3 class.
201+
SfChartThemeDataM3(this.context);
202+
203+
/// Specifies the build context of the chart widgets.
204+
final BuildContext context;
205+
206+
/// Specifies the material app color scheme based on the brightness.
207+
late final ColorScheme colorScheme = Theme.of(context).colorScheme;
208+
209+
/// Specifies the material app theme data based on the brightness.
210+
late final TextTheme textTheme = Theme.of(context).textTheme;
211+
212+
@override
213+
Color? get backgroundColor => Colors.transparent;
214+
215+
List<Color> get palette => colorScheme.brightness == Brightness.light
216+
? const <Color>[
217+
Color.fromRGBO(6, 174, 224, 1),
218+
Color.fromRGBO(99, 85, 199, 1),
219+
Color.fromRGBO(49, 90, 116, 1),
220+
Color.fromRGBO(255, 180, 0, 1),
221+
Color.fromRGBO(150, 60, 112, 1),
222+
Color.fromRGBO(33, 150, 245, 1),
223+
Color.fromRGBO(71, 59, 137, 1),
224+
Color.fromRGBO(236, 92, 123, 1),
225+
Color.fromRGBO(59, 163, 26, 1),
226+
Color.fromRGBO(236, 131, 23, 1)
227+
]
228+
: const <Color>[
229+
Color.fromRGBO(255, 245, 0, 1),
230+
Color.fromRGBO(51, 182, 119, 1),
231+
Color.fromRGBO(218, 150, 70, 1),
232+
Color.fromRGBO(201, 88, 142, 1),
233+
Color.fromRGBO(77, 170, 255, 1),
234+
Color.fromRGBO(255, 157, 69, 1),
235+
Color.fromRGBO(178, 243, 46, 1),
236+
Color.fromRGBO(185, 60, 228, 1),
237+
Color.fromRGBO(48, 167, 6, 1),
238+
Color.fromRGBO(207, 142, 14, 1)
239+
];
240+
241+
@override
242+
Color? get axisLabelColor => colorScheme.onSurfaceVariant;
243+
244+
@override
245+
Color? get axisTitleColor => colorScheme.onSurfaceVariant;
246+
247+
@override
248+
Color? get axisLineColor => colorScheme.brightness == Brightness.light
249+
? const Color.fromRGBO(202, 196, 208, 1)
250+
: const Color.fromRGBO(73, 69, 79, 1);
251+
252+
@override
253+
Color? get majorGridLineColor => colorScheme.brightness == Brightness.light
254+
? const Color.fromRGBO(231, 224, 236, 1)
255+
: const Color.fromRGBO(54, 50, 59, 1);
256+
257+
// TODO(Praveen): Need to update color
258+
@override
259+
Color? get minorGridLineColor => colorScheme.brightness == Brightness.light
260+
? const Color.fromRGBO(234, 234, 234, 1)
261+
: const Color.fromRGBO(70, 74, 86, 1);
262+
263+
@override
264+
Color? get majorTickLineColor => colorScheme.brightness == Brightness.light
265+
? const Color.fromRGBO(202, 196, 208, 1)
266+
: const Color.fromRGBO(73, 69, 79, 1);
267+
268+
// TODO(Praveen): Need to update color
269+
@override
270+
Color? get minorTickLineColor => colorScheme.brightness == Brightness.light
271+
? const Color.fromRGBO(214, 214, 214, 1)
272+
: const Color.fromRGBO(150, 150, 150, 1);
273+
274+
@override
275+
Color? get titleTextColor => colorScheme.onSurfaceVariant;
276+
277+
@override
278+
Color? get titleBackgroundColor => Colors.transparent;
279+
280+
@override
281+
Color? get legendTextColor => colorScheme.onSurfaceVariant;
282+
283+
@override
284+
Color? get legendBackgroundColor => Colors.transparent;
285+
286+
@override
287+
Color? get legendTitleColor => colorScheme.onSurfaceVariant;
288+
289+
Color get markerFillColor =>
290+
colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
291+
292+
Color get dataLabelBackgroundColor =>
293+
colorScheme.brightness == Brightness.light ? Colors.white : Colors.black;
294+
295+
@override
296+
Color? get plotAreaBackgroundColor => Colors.transparent;
297+
298+
@override
299+
Color? get plotAreaBorderColor => colorScheme.brightness == Brightness.light
300+
? const Color.fromRGBO(231, 224, 236, 1)
301+
: const Color.fromRGBO(54, 50, 59, 1);
302+
303+
@override
304+
Color? get crosshairLineColor => colorScheme.onSurfaceVariant;
305+
306+
@override
307+
Color? get crosshairBackgroundColor => colorScheme.inverseSurface;
308+
309+
@override
310+
Color? get crosshairLabelColor => colorScheme.onInverseSurface;
311+
312+
@override
313+
Color? get tooltipColor => colorScheme.inverseSurface;
314+
315+
@override
316+
Color? get tooltipLabelColor => colorScheme.onInverseSurface;
317+
318+
@override
319+
Color? get tooltipSeparatorColor => colorScheme.onInverseSurface;
320+
321+
@override
322+
Color? get selectionRectColor => colorScheme.brightness == Brightness.light
323+
? colorScheme.primary.withOpacity(0.1)
324+
: colorScheme.primary.withOpacity(0.3);
325+
326+
@override
327+
Color? get selectionRectBorderColor => colorScheme.primary;
328+
329+
@override
330+
Color? get selectionTooltipConnectorLineColor => colorScheme.onSurfaceVariant;
331+
332+
@override
333+
Color? get waterfallConnectorLineColor =>
334+
colorScheme.brightness == Brightness.light
335+
? const Color.fromRGBO(0, 0, 0, 1)
336+
: const Color.fromRGBO(255, 255, 255, 1);
337+
338+
@override
339+
TextStyle? get titleTextStyle => textTheme.bodyMedium!.copyWith(fontSize: 16);
340+
341+
@override
342+
TextStyle? get axisTitleTextStyle => textTheme.bodyMedium;
343+
344+
@override
345+
TextStyle? get axisLabelTextStyle => textTheme.bodySmall;
346+
347+
@override
348+
TextStyle? get axisMultiLevelLabelTextStyle => textTheme.bodySmall;
349+
350+
@override
351+
TextStyle? get plotBandLabelTextStyle => textTheme.bodySmall;
352+
353+
@override
354+
TextStyle? get legendTitleTextStyle => textTheme.bodySmall;
355+
356+
@override
357+
TextStyle? get legendTextStyle => textTheme.bodySmall;
358+
359+
@override
360+
TextStyle? get dataLabelTextStyle => textTheme.bodySmall;
361+
362+
@override
363+
TextStyle? get tooltipTextStyle => textTheme.bodySmall;
364+
365+
@override
366+
TextStyle? get trackballTextStyle => textTheme.bodySmall;
367+
368+
@override
369+
TextStyle? get crosshairTextStyle => textTheme.bodySmall;
370+
371+
@override
372+
TextStyle? get selectionZoomingTooltipTextStyle => textTheme.bodySmall;
373+
}

0 commit comments

Comments
 (0)