SfDataGrid doesn't take up all available space
I have used an SfDataGrid and everything works fine except when I attempt to make it use all the available space it fails. The columns on the right aren't visible even though the sfDataGrid has space for it.Any help would be appreciated
Thank you
SIGN IN To post a reply.
9 Replies
Thank you abinesh this helps solve my problem for the most part but right side border is missing
Here's my updated code
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'dart:convert';
class ListDialogWidget extends StatefulWidget {
const ListDialogWidget({
super.key,
});
@override
State<ListDialogWidget> createState() => _ListDialogWidgetState();
}
class _ListDialogWidgetState extends State<ListDialogWidget> {
List<Map<String, dynamic>> _rows = [];
@override
void initState() {
_loadRowData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Dialog(
child: Container(
padding: const EdgeInsets.all(8.0),
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
color: Theme.of(context).scaffoldBackgroundColor,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton.icon(
label: const Text("Filter"),
onPressed: () {},
icon: const Icon(Icons.sort),
),
],
),
const Divider(
color: Colors.black54,
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: SfDataGrid(
columnWidthMode: ColumnWidthMode.fill,
source: _JsonDataSource(
columnNames: _getColumns(), jsonData: _rows),
columns:
_getColumns().map<GridColumn>((String columnName) {
return GridColumn(
columnName: columnName,
label: Text(columnName.toUpperCase()));
}).toList(),
allowFiltering: true,
allowColumnsResizing: true,
),
),
],
),
),
],
),
),
);
}
Future<void> _loadRowData() async {
// Sample JSON data
String jsonString = '''
[
{"id": "Xyz", "salary":200, "testcolumn":"testvalue", "testcolumn2":"testvalue2"},
{"id": "y2", "salary":200, "testcolumn":"testvalue", "testcolumn2":"testvalue2"},
{"id": "X@%", "salary":200, "testcolumn":"testvalue", "testcolumn2":"testvalue2"},
{"id": "5612", "salary":200, "testcolumn":"testvalue", "testcolumn2":"testvalue2"}
]
''';
List<Map<String, dynamic>> jsonData =
json.decode(jsonString).cast<Map<String, dynamic>>();
setState(() {
_rows = jsonData;
});
}
List<String> _getColumns() {
if (_rows.isNotEmpty) {
// Extract column names from the first row of JSON data
Map<String, dynamic> firstRow = _rows.first;
return firstRow.keys.toList();
}
return [];
}
}
class _JsonDataSource extends DataGridSource {
final dynamic _data;
final List<String> columnNames;
_JsonDataSource({required this.columnNames, required dynamic jsonData})
: _data = jsonData;
@override
List<DataGridRow> get rows => generateRows();
List<DataGridRow> generateRows() {
return _data.map<DataGridRow>((data) {
return DataGridRow(
cells: columnNames.map<DataGridCell>((colName) {
return DataGridCell<dynamic>(columnName: colName, value: data[colName]);
}).toList());
}).toList();
}
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
// alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: GestureDetector(
child: Text(
dataGridCell.value.toString(),
style: const TextStyle(
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
color: Colors.blue),
overflow: TextOverflow.ellipsis,
)));
}).toList());
}
}
SIGN IN To post a reply.
