column resize does not work

[Teyyub Aliyev]

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

class Employee {
  final int id;
  final String name;
  final String designation;
  final double salary;

  Employee(this.id, this.name, this.designation, this.salary);
}

// SfDataGrid üçün DataSource
class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employees}) {
    _employees = employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
      DataGridCell<int>(columnName: 'id', value: e.id),
      DataGridCell<String>(columnName: 'name', value: e.name),
      DataGridCell<String>(columnName: 'designation', value: e.designation),
      DataGridCell<double>(columnName: 'salary', value: e.salary),
    ]))
        .toList();
  }

  List<DataGridRow> _employees = [];

  @override
  List<DataGridRow> get rows => _employees;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(cells: row.getCells().map<Widget>((cell) {
      return Container(
        alignment: cell.columnName == 'id' || cell.columnName == 'salary'
            ? Alignment.centerRight
            : Alignment.centerLeft,
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Text(cell.value.toString()),
      );
    }).toList());
  }
}

class GridPage extends StatefulWidget {
  const GridPage({super.key});

  @override
  State<GridPage> createState() => _GridPageState();
}

class _GridPageState extends State<GridPage> {
  late EmployeeDataSource _employeeDataSource;
  final List<Employee> _employees = [
    Employee(1, 'John Doe', 'Manager', 5000),
    Employee(2, 'Jane Smith', 'Developer', 4000),
    Employee(3, 'Mike Johnson', 'Designer', 3500),
  ];

  @override
  void initState() {
    super.initState();
    _employeeDataSource = EmployeeDataSource(employees: _employees);
  }

  late Map<String, double> columnWidths = {
    'id': double.nan,
    'name': double.nan,
    'designation': double.nan,
    'salary': double.nan
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Employee DataGrid')),
      body: SfDataGridTheme(
        data: SfDataGridThemeData(
          columnResizeIndicatorColor: Colors.orange,
          columnResizeIndicatorStrokeWidth: 2.0,
        ),
        child:
        SfDataGrid(
        source: _employeeDataSource,
        allowColumnsResizing: true,
        onColumnResizeUpdate: (ColumnResizeUpdateDetails details) {
          setState(() {
            columnWidths[details.column.columnName] = details.width;
          });
          return true;
        },
        onColumnResizeEnd: (ColumnResizeEndDetails details) {
          print('Column resizing is ended for the ${details.column.columnName}');
        },
        columns: [
          GridColumn(
            columnName: 'id',
            width: columnWidths['id']!,
              label: Container(
                  padding: EdgeInsets.all(16.0),
                  alignment: Alignment.center,
                  child: Text(
                    'ID',
                  )
              )
          ),
          GridColumn(
            columnName: 'name',
            width: columnWidths['name']!,
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Name')
              )
          ),
          GridColumn(
            columnName: 'designation',
            width: columnWidths['designation']!,
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text(
                    'Designation',
                    overflow: TextOverflow.ellipsis,
                  )
              )
          ),
          GridColumn(
            columnName: 'salary',
            width: columnWidths['salary']!,
              label: Container(
                  padding: EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  child: Text('Salary')
              )
          ),
        ],
      ),
      ),
    );
  }
} this my page and resize does not work, what i am missing ? 

[Gowtham Ravi]

Hi Teyyub,

 

After reviewing your code snippet, we updated it into a runnable sample (including the main method) and verified that column resizing works as expected.

 

On desktop platforms, to perform column resizing, you need to hover near the right edge of the column header until the resizing indicator appears. Once visible, you can click and drag to resize the column.

 

Similarly, on mobile platforms, the resizing indicator will appear when you long‑press the column header.

 

For more details on column resizing, please refer to the User Guide link below:

 

UG Link: Columns Resizing in Flutter DataGrid | Syncfusion | DataTable

 

We have also attached a sample and a video demonstration for your reference. Kindly review them for further guidance.

 

Regards,

Gowtham R

Attachment: SfDataGrid_1c905e8d.zip

[Teyyub Aliyev]

thank i get it on mobile i should press it and after that i could change 

[Gowtham Ravi]

Hi Teyyub,

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries. We are happy to help.

 

Regards,

Gowtham R