[Syncfusion_Flutter_Datagrid] headerRowHeight visual bug #1671
Closed
Description
Greetings.
I encountered an interesting behaivour in SfDataGrid stacked headers.
In my minimal example I have two colums with one header.
The problem lies in headerRowHeight propery. (Notice that headerGridLinesVisibility: GridLinesVisibility.none,
When I set headerRowHeight property to something round like 101 for example - everything looks fine:
As soon as I set headerRowHeight property to 101.5 ( almost anything with .5-.9 works) a strange white horizontal line appears.
Tested on Windows, using:
syncfusion_flutter_datagrid: ^24.2.6
syncfusion_flutter_core: ^24.2.6
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const StackedHeaderDataGrid(),
);
}
}
class StackedHeaderDataGrid extends StatelessWidget {
const StackedHeaderDataGrid({super.key});
List<GridColumn> _getColumns() {
List<GridColumn> columns;
columns = <GridColumn>[
GridColumn(
columnName: 'first_name',
label: Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.all(8.0),
child: const Center(
child: Text(
'First name',
overflow: TextOverflow.ellipsis,
),
),
)),
GridColumn(
columnName: 'last_name',
label: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.all(8.0),
child: const Center(
child: Text(
'Last Name',
overflow: TextOverflow.ellipsis,
),
),
)),
];
return columns;
}
List<StackedHeaderRow> _getStackedHeaderRows() {
List<StackedHeaderRow> stackedHeaderRows;
stackedHeaderRows = <StackedHeaderRow>[
StackedHeaderRow(cells: <StackedHeaderCell>[
StackedHeaderCell(
columnNames: <String>[
'first_name',
'last_name',
],
child: const Center(
child: Text("NAME"),
)),
])
];
return stackedHeaderRows;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGridTheme(
data: SfDataGridThemeData(
headerColor: Colors.blue,
),
child: SfDataGrid(
headerGridLinesVisibility: GridLinesVisibility.none,
/// CHANGE HERE
headerRowHeight: 101.5,
//headerRowHeight: 101,
/// !CHANGE HERE
columnWidthMode: ColumnWidthMode.fill,
source: CustomDataGridSource(),
columns: _getColumns(),
stackedHeaderRows: _getStackedHeaderRows(),
),
),
);
}
}
class CustomDataGridSource extends DataGridSource {
List<DataGridRow> data = [
const DataGridRow(cells: [
DataGridCell<String>(columnName: "first_name", value: "John"),
DataGridCell<String>(columnName: "last_name", value: "Smith"),
])
];
@override
List<DataGridRow> get rows => data;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row
.getCells()
.map((e) => Center(child: Text(e.value.toString())))
.toList());
}
}