Skip to content

Commit 16073f5

Browse files
Changes has added
1 parent 61e2ae9 commit 16073f5

File tree

2 files changed

+161
-121
lines changed

2 files changed

+161
-121
lines changed

lib/main.dart

Lines changed: 156 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import 'dart:math';
2+
23
import 'package:flutter/material.dart';
3-
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
44
import 'package:syncfusion_flutter_core/theme.dart';
5+
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
56

67
void main() {
78
runApp(MyApp());
@@ -13,8 +14,7 @@ class MyApp extends StatelessWidget {
1314
Widget build(BuildContext context) {
1415
return MaterialApp(
1516
title: 'Syncfusion DataGrid Demo',
16-
theme: ThemeData(
17-
primarySwatch: Colors.blue, visualDensity: VisualDensity.standard),
17+
theme: ThemeData(primarySwatch: Colors.blue),
1818
home: MyHomePage(),
1919
);
2020
}
@@ -23,34 +23,20 @@ class MyApp extends StatelessWidget {
2323
/// The home page of the application which hosts the datagrid.
2424
class MyHomePage extends StatefulWidget {
2525
/// Creates the home page.
26-
MyHomePage({Key key}) : super(key: key);
26+
MyHomePage({Key? key}) : super(key: key);
2727

2828
@override
2929
_StackedHeaderDataGridState createState() => _StackedHeaderDataGridState();
3030
}
3131

3232
class _StackedHeaderDataGridState extends State<MyHomePage> {
33-
_StackedHeaderDataGridSource _stackedHeaderDataGridSource;
34-
35-
StackedHeaderRow orderRow;
33+
late _StackedHeaderDataGridSource stackedHeaderDataGridSource;
3634

37-
List<Product> _productData = [];
38-
final Random _random = Random();
35+
final Random random = Random();
3936

40-
StackedHeaderRow stackedHeaderRow = StackedHeaderRow(cells: [
41-
StackedHeaderCell(
42-
columnNames: ['customerName', 'city'],
43-
child: Container(
44-
color: const Color(0xFFF1F1F1),
45-
child: Center(child: Text('Customer Details')))),
46-
StackedHeaderCell(
47-
columnNames: ['productId', 'product'],
48-
child: Container(
49-
color: const Color(0xFFF1F1F1),
50-
child: Center(child: Text('Product Details'))))
51-
]);
37+
List<Product> productData = [];
5238

53-
final List<String> _product = <String>[
39+
final List<String> product = <String>[
5440
'Lax',
5541
'Chocolate',
5642
'Syrup',
@@ -82,7 +68,7 @@ class _StackedHeaderDataGridState extends State<MyHomePage> {
8268
'Gum',
8369
];
8470

85-
final List<String> _cities = <String>[
71+
final List<String> cities = <String>[
8672
'Bruxelles',
8773
'Rosario',
8874
'Recife',
@@ -93,7 +79,7 @@ class _StackedHeaderDataGridState extends State<MyHomePage> {
9379
'Resende',
9480
];
9581

96-
final List<int> _productId = <int>[
82+
final List<int> productId = <int>[
9783
3524,
9884
2523,
9985
1345,
@@ -125,7 +111,7 @@ class _StackedHeaderDataGridState extends State<MyHomePage> {
125111
4932,
126112
];
127113

128-
final List<DateTime> _orderDate = <DateTime>[
114+
final List<DateTime> orderDate = <DateTime>[
129115
DateTime.now(),
130116
DateTime(2002, 8, 27),
131117
DateTime(2015, 7, 4),
@@ -141,7 +127,7 @@ class _StackedHeaderDataGridState extends State<MyHomePage> {
141127
DateTime(2013, 10, 22),
142128
];
143129

144-
List<String> _names = [
130+
List<String> names = [
145131
'Kyle',
146132
'Gina',
147133
'Irene',
@@ -169,87 +155,134 @@ class _StackedHeaderDataGridState extends State<MyHomePage> {
169155
'Zeke'
170156
];
171157

158+
StackedHeaderRow? orderRow;
159+
172160
List<Product> _generateProductData(int count) {
173161
final List<Product> productData = <Product>[];
174162
for (int i = 0; i < count; i++) {
175163
productData.add(
176164
Product(
177165
i + 1000,
178-
_productId[i < _productId.length
166+
productId[i < productId.length
179167
? i
180-
: _random.nextInt(_productId.length - 1)],
181-
_product[
182-
i < _product.length ? i : _random.nextInt(_product.length - 1)],
183-
_random.nextInt(count),
184-
70.0 + _random.nextInt(100),
185-
_cities[
186-
i < _cities.length ? i : _random.nextInt(_cities.length - 1)],
187-
1700 + _random.nextInt(100),
188-
_orderDate[_random.nextInt(_orderDate.length - 1)],
189-
_names[i < _names.length ? i : _random.nextInt(_names.length - 1)]),
168+
: random.nextInt(productId.length - 1)],
169+
product[
170+
i < product.length ? i : random.nextInt(product.length - 1)],
171+
random.nextInt(count),
172+
70.0 + random.nextInt(100),
173+
cities[i < cities.length ? i : random.nextInt(cities.length - 1)],
174+
1700 + random.nextInt(100),
175+
orderDate[random.nextInt(orderDate.length - 1)],
176+
names[i < names.length ? i : random.nextInt(names.length - 1)]),
190177
);
191178
}
192-
193179
return productData;
194180
}
195181

182+
Color _getHeaderCellBackgroundColor() {
183+
return const Color(0xFFF1F1F1);
184+
}
185+
186+
StackedHeaderRow stackedHeaderRow = StackedHeaderRow(cells: [
187+
StackedHeaderCell(
188+
columnNames: ['customerName', 'city'],
189+
child: Container(
190+
color: const Color(0xFFF1F1F1),
191+
child: Center(child: Text('Customer Details')))),
192+
StackedHeaderCell(
193+
columnNames: ['productId', 'product'],
194+
child: Container(
195+
color: const Color(0xFFF1F1F1),
196+
child: Center(child: Text('Product Details'))))
197+
]);
198+
196199
List<StackedHeaderRow> _getStackedHeaderRows() {
197200
final List<StackedHeaderRow> stackedHeaderCollection = [];
198201
stackedHeaderCollection.add(stackedHeaderRow);
199202
if (orderRow != null) {
200-
stackedHeaderCollection.insert(0, orderRow);
203+
stackedHeaderCollection.insert(0, orderRow!);
201204
}
202205
return stackedHeaderCollection;
203206
}
204207

205-
Color _getHeaderCellBackgroundColor() {
206-
return const Color(0xFFF1F1F1);
207-
// : const Color(0xFF3A3A3A);
208+
SfDataGridTheme _buildDataGrid() {
209+
return SfDataGridTheme(
210+
data: SfDataGridThemeData(
211+
headerColor: _getHeaderCellBackgroundColor(),
212+
),
213+
child: SfDataGrid(
214+
gridLinesVisibility: GridLinesVisibility.vertical,
215+
headerGridLinesVisibility: GridLinesVisibility.both,
216+
source: stackedHeaderDataGridSource,
217+
columns: [
218+
GridTextColumn(
219+
columnName: 'customerName',
220+
width: 140,
221+
label: Container(
222+
alignment: Alignment.centerLeft,
223+
padding: EdgeInsets.all(8.0),
224+
child: Text(
225+
'Customer Name',
226+
overflow: TextOverflow.ellipsis,
227+
),
228+
color: _getHeaderCellBackgroundColor(),
229+
)),
230+
GridTextColumn(
231+
columnName: 'city',
232+
width: 100,
233+
label: Container(
234+
alignment: Alignment.centerLeft,
235+
padding: EdgeInsets.all(8.0),
236+
child: Text(
237+
'City',
238+
overflow: TextOverflow.ellipsis,
239+
),
240+
color: _getHeaderCellBackgroundColor(),
241+
)),
242+
GridTextColumn(
243+
columnName: 'product',
244+
width: 100,
245+
label: Container(
246+
alignment: Alignment.centerLeft,
247+
padding: EdgeInsets.all(8.0),
248+
child: Text(
249+
'Product',
250+
overflow: TextOverflow.ellipsis,
251+
),
252+
color: _getHeaderCellBackgroundColor(),
253+
)),
254+
GridTextColumn(
255+
columnName: 'productId',
256+
width: 100,
257+
label: Container(
258+
alignment: Alignment.centerRight,
259+
padding: EdgeInsets.all(8.0),
260+
child: Text(
261+
'Product ID',
262+
overflow: TextOverflow.ellipsis,
263+
),
264+
color: _getHeaderCellBackgroundColor(),
265+
)),
266+
],
267+
stackedHeaderRows: _getStackedHeaderRows(),
268+
));
208269
}
209270

210271
@override
211272
void initState() {
212273
super.initState();
213-
_productData = _generateProductData(15);
214-
_stackedHeaderDataGridSource = _StackedHeaderDataGridSource(_productData);
215-
}
216-
217-
SfDataGridTheme _buildDataGrid() {
218-
return SfDataGridTheme(
219-
data: SfDataGridThemeData(
220-
headerStyle: DataGridHeaderCellStyle(
221-
backgroundColor: _getHeaderCellBackgroundColor())),
222-
child: SfDataGrid(
223-
gridLinesVisibility: GridLinesVisibility.vertical,
224-
headerGridLinesVisibility: GridLinesVisibility.both,
225-
source: _stackedHeaderDataGridSource,
226-
columnWidthMode: ColumnWidthMode.lastColumnFill,
227-
columns: [
228-
GridTextColumn(
229-
mappingName: 'customerName',
230-
columnWidthMode: ColumnWidthMode.header,
231-
headerText: 'Customer Name'),
232-
GridTextColumn(
233-
mappingName: 'city', width: 100, headerText: 'City'),
234-
GridTextColumn(
235-
mappingName: 'product', width: 100, headerText: 'Product'),
236-
GridNumericColumn(
237-
mappingName: 'productId',
238-
width: 110,
239-
headerText: 'Product ID'),
240-
],
241-
stackedHeaderRows: _getStackedHeaderRows()));
274+
productData = _generateProductData(30);
275+
stackedHeaderDataGridSource =
276+
_StackedHeaderDataGridSource(productData: productData);
242277
}
243278

244279
@override
245280
Widget build(BuildContext context) {
246281
return Scaffold(
247-
appBar: AppBar(
248-
title: Text('Syncfusion DataGrid Demo'),
249-
),
282+
appBar: AppBar(title: Text('Stacked Header Demo')),
250283
body: Column(
251284
children: [
252-
FlatButton(
285+
MaterialButton(
253286
color: Colors.blue[200],
254287
onPressed: () {
255288
orderRow = StackedHeaderRow(cells: [
@@ -296,48 +329,57 @@ class Product {
296329
final String customerName;
297330
}
298331

299-
class _StackedHeaderDataGridSource extends DataGridSource<Product> {
300-
_StackedHeaderDataGridSource(List<Product> productData) {
301-
_productData = productData;
332+
class _StackedHeaderDataGridSource extends DataGridSource {
333+
_StackedHeaderDataGridSource({required List<Product> productData}) {
334+
_productData = productData.map<DataGridRow>((e) {
335+
return DataGridRow(cells: [
336+
DataGridCell(columnName: 'customerName', value: e.customerName),
337+
DataGridCell(columnName: 'city', value: e.city),
338+
DataGridCell(columnName: 'product', value: e.product),
339+
DataGridCell(columnName: 'productId', value: e.productId),
340+
]);
341+
}).toList(growable: false);
302342
}
303-
304-
List<Product> _productData;
343+
late List<DataGridRow> _productData;
305344

306345
@override
307-
List<Product> get dataSource => _productData;
346+
List<DataGridRow> get rows => _productData;
347+
308348
@override
309-
Object getValue(Product product, String columnName) {
310-
switch (columnName) {
311-
case 'orderId':
312-
return product.orderId;
313-
break;
314-
case 'product':
315-
return product.product;
316-
break;
317-
case 'productId':
318-
return product.productId;
319-
break;
320-
case 'unitPrice':
321-
return product.unitPrice;
322-
break;
323-
case 'quantity':
324-
return product.quantity;
325-
break;
326-
case 'city':
327-
return product.city;
328-
break;
329-
case 'customerId':
330-
return product.customerId;
331-
break;
332-
case 'orderDate':
333-
return product.orderDate;
334-
break;
335-
case 'customerName':
336-
return product.customerName;
337-
break;
338-
default:
339-
return 'empty';
340-
break;
341-
}
349+
DataGridRowAdapter buildRow(DataGridRow row) {
350+
return DataGridRowAdapter(cells: [
351+
Container(
352+
alignment: Alignment.centerLeft,
353+
padding: EdgeInsets.all(8.0),
354+
child: Text(
355+
row.getCells()[0].value,
356+
overflow: TextOverflow.ellipsis,
357+
),
358+
),
359+
Container(
360+
alignment: Alignment.centerLeft,
361+
padding: EdgeInsets.all(8.0),
362+
child: Text(
363+
row.getCells()[1].value,
364+
overflow: TextOverflow.ellipsis,
365+
),
366+
),
367+
Container(
368+
alignment: Alignment.centerRight,
369+
padding: EdgeInsets.all(8.0),
370+
child: Text(
371+
row.getCells()[2].value,
372+
overflow: TextOverflow.ellipsis,
373+
),
374+
),
375+
Container(
376+
alignment: Alignment.centerLeft,
377+
padding: EdgeInsets.all(8.0),
378+
child: Text(
379+
row.getCells()[3].value.toString(),
380+
overflow: TextOverflow.ellipsis,
381+
),
382+
),
383+
]);
342384
}
343385
}

0 commit comments

Comments
 (0)