import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart'; void main() { runApp(const TestGridDragResize()); } class TestGridDragResize extends StatefulWidget { const TestGridDragResize({super.key}); @override State<TestGridDragResize> createState() => _TestGridDragResizeState(); } class _TestGridDragResizeState extends State<TestGridDragResize> { late _TestDataSource _dataSource; late List<GridColumn> _columns; @override void initState() { super.initState(); _columns = _buildColumns(); _dataSource = _TestDataSource(); } List<GridColumn> _buildColumns() { return <GridColumn>[ GridColumn( columnName: 'id', width: 80, label: Container( alignment: Alignment.center, padding: const EdgeInsets.all(8), child: const Text('ID', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'name', width: 140, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Name', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'designation', width: 140, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Designation', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'department', width: 130, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Department', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'email', width: 200, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Email', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'phone', width: 130, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Phone', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'salary', width: 110, label: Container( alignment: Alignment.centerRight, padding: const EdgeInsets.all(8), child: const Text('Salary', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'experience', width: 100, label: Container( alignment: Alignment.center, padding: const EdgeInsets.all(8), child: const Text('Exp (Yrs)', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'location', width: 130, label: Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.all(8), child: const Text('Location', overflow: TextOverflow.ellipsis), ), ), GridColumn( columnName: 'status', width: 100, label: Container( alignment: Alignment.center, padding: const EdgeInsets.all(8), child: const Text('Status', overflow: TextOverflow.ellipsis), ), ), ]; } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text('Test Drag & Drop + Resize'), ), body: Padding( padding: const EdgeInsets.all(16), child: Column( children: [ const Card( child: Padding( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Bug Reproduction Steps:', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), ), SizedBox(height: 8), Text('1. Try dragging column headers to reorder them'), Text('2. Try dragging column borders to resize them'), Text('3. Try combining both operations'), SizedBox(height: 8), Text('Settings:', style: TextStyle(fontWeight: FontWeight.bold)), Text('• allowColumnsDragging: true'), Text('• allowColumnsResizing: true'), ], ), ), ), const SizedBox(height: 16), Expanded( child: SfDataGrid( source: _dataSource, columns: _columns, // Enable column drag and drop allowColumnsDragging: true, // Enable column resizing allowColumnsResizing: true, // Callback for drag and drop onColumnDragging: (DataGridColumnDragDetails details) { if (details.action == DataGridColumnDragAction.dropped) { if (details.to == null) return true; final movedColumn = _columns[details.from]; _columns ..removeAt(details.from) ..insert(details.to!, movedColumn); setState(() {}); } return true; }, // Grid lines for better visualization gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, ), ), ], ), ), ), ); } } // Simple Data Source for testing class _TestDataSource extends DataGridSource { _TestDataSource() { _buildDataRows(); } List<DataGridRow> _dataRows = []; void _buildDataRows() { final departments = ['Engineering', 'Sales', 'Marketing', 'HR', 'Finance']; final locations = ['New York', 'San Francisco', 'London', 'Tokyo', 'Berlin']; final statuses = ['Active', 'On Leave', 'Remote']; _dataRows = List<DataGridRow>.generate( 25, (index) { final name = 'Employee ${index + 1}'; final designation = index % 3 == 0 ? 'Manager' : index % 3 == 1 ? 'Developer' : 'Designer'; return DataGridRow( cells: [ DataGridCell<int>(columnName: 'id', value: 1000 + index), DataGridCell<String>(columnName: 'name', value: name), DataGridCell<String>(columnName: 'designation', value: designation), DataGridCell<String>( columnName: 'department', value: departments[index % departments.length], ), DataGridCell<String>( columnName: 'email', value: 'employee${index + 1}@company.com', ), DataGridCell<String>( columnName: 'phone', value: '+1 555-${1000 + index}', ), DataGridCell<int>( columnName: 'salary', value: 50000 + (index * 2500), ), DataGridCell<int>( columnName: 'experience', value: 1 + (index % 15), ), DataGridCell<String>( columnName: 'location', value: locations[index % locations.length], ), DataGridCell<String>( columnName: 'status', value: statuses[index % statuses.length], ), ], ); }, ); } @override List<DataGridRow> get rows => _dataRows; @override DataGridRowAdapter buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map<Widget>((dataGridCell) { final columnName = dataGridCell.columnName; final alignment = columnName == 'id' || columnName == 'salary' || columnName == 'experience' || columnName == 'status' ? Alignment.center : Alignment.centerLeft; return Container( alignment: alignment, padding: const EdgeInsets.all(8), child: Text( dataGridCell.value.toString(), overflow: TextOverflow.ellipsis, ), ); }).toList(), ); } }