Skip to content

Commit 794a8b4

Browse files
VijayakumarMariappanVijayakumarMariappan
committed
Added color & border sample and modified shader samples UI
1 parent 59efd43 commit 794a8b4

11 files changed

Lines changed: 351 additions & 76 deletions

‎lib/main.dart‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
22

33
import 'samples/boder_gradient.dart';
4+
import 'samples/color_border.dart';
45
import 'samples/custom_series_renderer.dart';
56
import 'samples/customize_segment.dart';
67
import 'samples/gradient.dart';
@@ -25,18 +26,19 @@ class MainApp extends StatefulWidget {
2526

2627
class _MainAppState extends State<MainApp> {
2728
late Map<String, Widget> _routes;
28-
late Widget _content;
29+
late String _content;
2930
late ScrollController _scrollController;
3031

3132
void _handlePageContentChange(String route) {
3233
setState(() {
33-
_content = _routes[route]!;
34+
_content = route;
3435
});
3536
}
3637

3738
@override
3839
void initState() {
3940
_routes = {
41+
'Color & Border Color': const ColorAndBorderSample(),
4042
'Point Color Mapper': const ColorMapperSample(),
4143
'Gradient': const FillGradientSample(),
4244
'Border Gradient': const BorderGradientSample(),
@@ -46,7 +48,7 @@ class _MainAppState extends State<MainApp> {
4648
'Customize Segment': const CustomSegmentSample(),
4749
'Custom Series Rendering': const CustomSeriesSample(),
4850
};
49-
_content = const ColorMapperSample();
51+
_content = 'Color & Border Color';
5052
_scrollController = ScrollController();
5153
super.initState();
5254
}
@@ -70,7 +72,7 @@ class _MainAppState extends State<MainApp> {
7072
Expanded(
7173
child: Padding(
7274
padding: const EdgeInsets.all(10.0),
73-
child: _content,
75+
child: _routes[_content]!,
7476
),
7577
),
7678
Scrollbar(
@@ -88,13 +90,11 @@ class _MainAppState extends State<MainApp> {
8890
child: ActionChip(
8991
label: Text(key),
9092
labelPadding: const EdgeInsets.all(5.0),
91-
backgroundColor: _content == _routes[key]
92-
? themeData.primaryColor
93-
: null,
93+
backgroundColor:
94+
_content == key ? themeData.primaryColor : null,
9495
labelStyle: TextStyle(
95-
color: _content == _routes[key]
96-
? Colors.white
97-
: Colors.black,
96+
color:
97+
_content == key ? Colors.white : Colors.black,
9898
),
9999
onPressed: () => _handlePageContentChange(key),
100100
),

‎lib/model.dart‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,38 @@ List<ChartData> numericData = [
1919
ChartData(10, 100),
2020
];
2121

22+
List<ChartData> categoryMidData1 = [
23+
ChartData('Jan 20', 12),
24+
// ChartData('Feb', 7),
25+
ChartData('Mar', 4),
26+
// ChartData('Apr', 9),
27+
ChartData('May', 16),
28+
// ChartData('Jun', 25),
29+
ChartData('Jul', 36),
30+
// ChartData('Aug', 49),
31+
ChartData('Sep', 64),
32+
// ChartData('Oct', 81),
33+
ChartData('Nov', 92),
34+
// ChartData('Dec', 100),
35+
ChartData('Jan 21', 100),
36+
];
37+
38+
List<ChartData> categoryMidData2 = [
39+
ChartData('Jan 20', 45),
40+
// ChartData('Feb', 23),
41+
ChartData('Mar', 78),
42+
// ChartData('Apr', 56),
43+
ChartData('May', 32),
44+
// ChartData('Jun', 19),
45+
ChartData('Jul', 67),
46+
// ChartData('Aug', 88),
47+
ChartData('Sep', 41),
48+
// ChartData('Oct', 55),
49+
ChartData('Nov', 70),
50+
// ChartData('Dec', 29),
51+
ChartData('Jan 21', 29),
52+
];
53+
2254
List<ChartData> categoryData = [
2355
ChartData('Jan', 12),
2456
ChartData('Feb', 7),
@@ -34,17 +66,32 @@ List<ChartData> categoryData = [
3466
ChartData('Dec', 100),
3567
];
3668

69+
List<ChartData> categoryDataLine = [
70+
ChartData('Jan', 45),
71+
ChartData('Feb', 23),
72+
ChartData('Mar', 78),
73+
ChartData('Apr', 56),
74+
ChartData('May', 32),
75+
ChartData('Jun', 19),
76+
ChartData('Jul', 67),
77+
ChartData('Aug', 88),
78+
ChartData('Sep', 41),
79+
ChartData('Oct', 55),
80+
ChartData('Nov', 70),
81+
ChartData('Dec', 29),
82+
];
83+
3784
List<ChartData> dateTimeData = [
38-
ChartData(DateTime(2020, 1, 1), 12),
39-
ChartData(DateTime(2020, 2, 1), 7),
40-
ChartData(DateTime(2020, 3, 1), 4),
85+
ChartData(DateTime(2020, 1, 1), 52),
86+
ChartData(DateTime(2020, 2, 1), 17),
87+
ChartData(DateTime(2020, 3, 1), 34),
4188
ChartData(DateTime(2020, 4, 1), -9),
4289
ChartData(DateTime(2020, 5, 1), -31),
4390
ChartData(DateTime(2020, 6, 1), -25),
4491
ChartData(DateTime(2020, 7, 1), -36),
4592
ChartData(DateTime(2020, 8, 1), 49),
4693
ChartData(DateTime(2020, 9, 1), 64),
47-
ChartData(DateTime(2020, 10, 1), 81),
48-
ChartData(DateTime(2020, 11, 1), 92),
49-
ChartData(DateTime(2020, 12, 1), 100),
94+
ChartData(DateTime(2020, 10, 1), 42),
95+
ChartData(DateTime(2020, 11, 1), 81),
96+
ChartData(DateTime(2020, 12, 1), 79),
5097
];

‎lib/samples/boder_gradient.dart‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ class BorderGradientSample extends StatefulWidget {
1313
class _BorderGradientSampleState extends State<BorderGradientSample> {
1414
@override
1515
Widget build(BuildContext context) {
16-
final ThemeData themeData = Theme.of(context);
1716
return Scaffold(
1817
body: SfCartesianChart(
1918
primaryXAxis: const CategoryAxis(),
@@ -22,21 +21,25 @@ class _BorderGradientSampleState extends State<BorderGradientSample> {
2221
),
2322
series: <CartesianSeries<ChartData, String>>[
2423
ColumnSeries(
25-
dataSource: categoryData,
24+
dataSource: <ChartData>[
25+
ChartData('2020', 20),
26+
ChartData('2021', 100),
27+
],
2628
xValueMapper: (ChartData data, int index) => data.x,
2729
yValueMapper: (ChartData data, int index) => data.y,
28-
color: Colors.pink[50],
29-
borderWidth: 2,
30+
color: const Color.fromARGB(255, 227, 252, 251),
31+
borderWidth: 3,
3032
borderRadius: BorderRadius.circular(10),
31-
borderGradient: LinearGradient(
33+
borderGradient: const LinearGradient(
3234
colors: <Color>[
33-
themeData.colorScheme.primary,
34-
themeData.colorScheme.surface,
35+
Colors.red,
36+
Colors.blue,
3537
],
3638
begin: Alignment.topCenter,
3739
end: Alignment.bottomCenter,
38-
stops: const <double>[0, 1],
40+
stops: <double>[0, 1],
3941
),
42+
dataLabelSettings: const DataLabelSettings(isVisible: true),
4043
),
4144
],
4245
),

‎lib/samples/color_border.dart‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:syncfusion_flutter_charts/charts.dart';
3+
4+
import '../model.dart';
5+
6+
class ColorAndBorderSample extends StatefulWidget {
7+
const ColorAndBorderSample({super.key});
8+
9+
@override
10+
State<ColorAndBorderSample> createState() => _ColorAndBorderSampleState();
11+
}
12+
13+
class _ColorAndBorderSampleState extends State<ColorAndBorderSample> {
14+
@override
15+
Widget build(BuildContext context) {
16+
return Scaffold(
17+
body: GridView.count(
18+
crossAxisCount: 3,
19+
childAspectRatio: 1.6,
20+
mainAxisSpacing: 25,
21+
children: [
22+
SfCartesianChart(
23+
primaryXAxis: const CategoryAxis(
24+
labelPlacement: LabelPlacement.onTicks,
25+
axisLine: AxisLine(width: 0),
26+
),
27+
primaryYAxis: const NumericAxis(
28+
axisLine: AxisLine(width: 0),
29+
maximum: 120,
30+
interval: 20,
31+
),
32+
series: <CartesianSeries<ChartData, String>>[
33+
SplineSeries(
34+
dataSource: categoryMidData1,
35+
xValueMapper: (ChartData data, int index) => data.x,
36+
yValueMapper: (ChartData data, int index) => data.y,
37+
color: Colors.green,
38+
width: 2,
39+
markerSettings: const MarkerSettings(isVisible: true),
40+
),
41+
],
42+
),
43+
SfCartesianChart(
44+
plotAreaBorderWidth: 0,
45+
primaryXAxis: const CategoryAxis(
46+
axisLine: AxisLine(width: 0),
47+
),
48+
primaryYAxis: const NumericAxis(
49+
axisLine: AxisLine(width: 0),
50+
maximum: 120,
51+
interval: 20,
52+
),
53+
series: <CartesianSeries<ChartData, String>>[
54+
BarSeries(
55+
dataSource: categoryMidData2,
56+
xValueMapper: (ChartData data, int index) => data.x,
57+
yValueMapper: (ChartData data, int index) => data.y,
58+
color: Colors.indigo.withOpacity(0.2),
59+
borderColor: Colors.indigo,
60+
borderWidth: 2,
61+
),
62+
],
63+
),
64+
SfCartesianChart(
65+
plotAreaBorderWidth: 0,
66+
primaryXAxis: const CategoryAxis(
67+
plotOffset: 5,
68+
labelPlacement: LabelPlacement.onTicks,
69+
axisLine: AxisLine(width: 0),
70+
),
71+
primaryYAxis: const NumericAxis(
72+
axisLine: AxisLine(width: 0),
73+
),
74+
series: <CartesianSeries<ChartData, String>>[
75+
ScatterSeries(
76+
dataSource: categoryMidData1,
77+
xValueMapper: (ChartData data, int index) => data.x,
78+
yValueMapper: (ChartData data, int index) => data.y,
79+
color: Colors.teal.withOpacity(0.2),
80+
borderColor: Colors.teal,
81+
borderWidth: 2,
82+
),
83+
],
84+
),
85+
SfCartesianChart(
86+
primaryXAxis: const CategoryAxis(
87+
labelPlacement: LabelPlacement.onTicks,
88+
axisLine: AxisLine(width: 0),
89+
),
90+
primaryYAxis: const NumericAxis(
91+
axisLine: AxisLine(width: 0),
92+
),
93+
series: <CartesianSeries<ChartData, String>>[
94+
AreaSeries(
95+
dataSource: categoryMidData1,
96+
xValueMapper: (ChartData data, int index) => data.x,
97+
yValueMapper: (ChartData data, int index) => data.y,
98+
color: Colors.pink.withOpacity(0.2),
99+
borderColor: Colors.pink,
100+
borderWidth: 2,
101+
borderDrawMode: BorderDrawMode.top,
102+
),
103+
],
104+
annotations: [
105+
CartesianChartAnnotation(
106+
x: 'Jul',
107+
y: 113,
108+
widget: ColoredBox(
109+
color: Theme.of(context).colorScheme.surface,
110+
child: const Text(
111+
'Border Draw Mode: Top',
112+
style: TextStyle(
113+
fontWeight: FontWeight.w600,
114+
),
115+
),
116+
),
117+
coordinateUnit: CoordinateUnit.point,
118+
),
119+
],
120+
),
121+
SfCartesianChart(
122+
plotAreaBorderWidth: 0,
123+
primaryXAxis: const CategoryAxis(
124+
plotOffset: 1.5,
125+
labelPlacement: LabelPlacement.onTicks,
126+
axisLine: AxisLine(width: 0),
127+
),
128+
primaryYAxis: const NumericAxis(
129+
axisLine: AxisLine(width: 0),
130+
),
131+
series: <CartesianSeries<ChartData, String>>[
132+
SplineAreaSeries(
133+
dataSource: categoryMidData1,
134+
xValueMapper: (ChartData data, int index) => data.x,
135+
yValueMapper: (ChartData data, int index) => data.y,
136+
color: Colors.purple.withOpacity(0.2),
137+
borderColor: Colors.purple,
138+
borderWidth: 2,
139+
borderDrawMode: BorderDrawMode.excludeBottom,
140+
),
141+
],
142+
annotations: [
143+
CartesianChartAnnotation(
144+
x: 'Jul',
145+
y: 113,
146+
widget: ColoredBox(
147+
color: Theme.of(context).colorScheme.surface,
148+
child: const Text(
149+
'Border Draw Mode: excludeBottom',
150+
style: TextStyle(
151+
fontWeight: FontWeight.w600,
152+
),
153+
),
154+
),
155+
coordinateUnit: CoordinateUnit.point,
156+
),
157+
],
158+
),
159+
SfCartesianChart(
160+
plotAreaBorderWidth: 0,
161+
primaryXAxis: const CategoryAxis(
162+
plotOffset: 1.5,
163+
labelPlacement: LabelPlacement.onTicks,
164+
axisLine: AxisLine(width: 0),
165+
),
166+
primaryYAxis: const NumericAxis(
167+
plotOffset: 1.5,
168+
axisLine: AxisLine(width: 0),
169+
maximum: 120,
170+
interval: 20,
171+
),
172+
series: <CartesianSeries<ChartData, String>>[
173+
StepAreaSeries(
174+
dataSource: categoryMidData2,
175+
xValueMapper: (ChartData data, int index) => data.x,
176+
yValueMapper: (ChartData data, int index) => data.y,
177+
color: Colors.blue.withOpacity(0.2),
178+
borderColor: Colors.blue,
179+
borderWidth: 2,
180+
borderDrawMode: BorderDrawMode.all,
181+
),
182+
],
183+
annotations: [
184+
CartesianChartAnnotation(
185+
x: 'Jul',
186+
y: 113,
187+
widget: ColoredBox(
188+
color: Theme.of(context).colorScheme.surface,
189+
child: const Text(
190+
'Border Draw Mode: all',
191+
style: TextStyle(
192+
fontWeight: FontWeight.w600,
193+
),
194+
),
195+
),
196+
coordinateUnit: CoordinateUnit.point,
197+
),
198+
],
199+
),
200+
],
201+
),
202+
);
203+
}
204+
}

0 commit comments

Comments
 (0)