How to set rounded corners to the Flutter DataGrid.

In this article, you can learn about how to set the rounded corners to the Flutter DataGrid.

Initialize the SfDataGrid widget with all the required properties and wrap the DataGrid as a child of the Container widget. Set the required BoxDecoration with the borders borderRadius to the Container.decoration property and set the Containers clipBehavior as antiAlias.

 List<employee> employees = <employee>[];
 late EmployeeDataSource employeeDataSource;

 @override
 void initState() {
   super.initState();
   employees = getEmployeeData();
   employeeDataSource = EmployeeDataSource(employeeData: employees);
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Syncfusion Flutter DataGrid'),
     ),
     body: Center(
       child: Container(
         clipBehavior: Clip.antiAlias,
         height: 400,
         width: 700,
         decoration: BoxDecoration(
           border: Border.all(color: Colors.red, width: 2),
           borderRadius: BorderRadius.circular(20),
           color: Colors.white,
         ),
         child: SfDataGrid(
           source: employeeDataSource,
           gridLinesVisibility: GridLinesVisibility.both,
           headerGridLinesVisibility: GridLinesVisibility.both,
           columnWidthMode: ColumnWidthMode.fill,
           columns: <gridcolumn>[
             GridColumn(
                 columnName: 'id',
                 label: Container(
                     padding: const EdgeInsets.all(16.0),
                     alignment: Alignment.center,
                     child: const Text(
                       'ID',
                     ))),
             GridColumn(
                 columnName: 'name',
                 label: Container(
                     padding: const EdgeInsets.all(8.0),
                     alignment: Alignment.center,
                     child: const Text('Name'))),
             GridColumn(
                 columnName: 'designation',
                 label: Container(
                     padding: const EdgeInsets.all(8.0),
                     alignment: Alignment.center,
                     child: const Text(
                       'Designation',
                       overflow: TextOverflow.ellipsis,
                     ))),
             GridColumn(
                 columnName: 'salary',
                 label: Container(
                     padding: const EdgeInsets.all(8.0),
                     alignment: Alignment.center,
                     child: const Text('Salary'))),
           ],
         ),
       ),
     ),
   );
 }