First things first before doing anything.
Add dependency
Add the Syncfusion Flutter DataGrid dependency to your pubspec.yaml file.
dependencies:
syncfusion_flutter_datagrid: ^latest_version
Get packages
Run the following command to get the required packages.
$ flutter pub get
Import package
Import the following package in your Dart code.
DART
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
Use whatever state management you want to use. I prefer provider so i am using that.
For this add the Provider dependency to your pubspec.yaml file.
dependencies:
provider: ^latest_version
Initialize the provider files in main.dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: multiProvider,
child: MaterialApp(
builder: (context, child) => MediaQuery(
data: MediaQuery.of(context).copyWith(
alwaysUse24HourFormat: true,
),
child: child!,
),
debugShowCheckedModeBanner: false,
title: 'Data Grid',
home: const Dashboard(),
),
);
}
}
I prefer a global file for holding all providers, So make multi_provider.dart file and add the following code:
import 'package:provider/provider.dart';
import '../screens/dashboard/controller/dash_controller.dart';
var multiProvider = [
/// DashProvider ///
ChangeNotifierProvider<DashProvider>(
create: (_) => DashProvider(),
lazy: true,
),
];
After that we need to add our variables to dashboard provider, i am using a rest api for the data u can use firebase as well.
Add the following code to provider file:
// Initialize ur api service class
ApiService apiService = ApiService();
final GlobalKey<SfDataGridState> key = GlobalKey<SfDataGridState>();
bool _isLoading = false;
bool get isLoading => _isLoading;
//Add u header columns
List<GridColumn> grid = [
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'Vehicle',
style: TextStyle(color: white),
overflow: TextOverflow.ellipsis,
))),
];
late ReportDetailData reportDetailData;
List<DataModel> _data = [];
List<DataModel> get data => _data;
Future<void> getData(BuildContext context) async {
_isLoading = true;
notifyListeners();
apiService.getData().then((response) {
List<dynamic> data = json.decode(response.body);
if (response.statusCode == 200 && data.toString() != "[]") {
_data = data.map((data) => DataModel.fromJson(data)).toList();
reportDetailData = ReportDetailData(data: _data);
_isLoading = false;
notifyListeners();
} else if (response.statusCode == 200 && data.toString() == "[]") {
_isLoading = false;
notifyListeners();
} else {
_isLoading = false;
notifyListeners();
}
});
}
After doing all that come to ur dashboard.dart file and call the api on initState.
Now Add the following code to initState:
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
context.read<DashProvider>().getData(context);
});
}
For the widget part add the following code:
// Add this to the Scaffold body
context.watch<DashProvider>().isLoading
? const Align(
alignment: Alignment.center,
child: Text("Loading....),
)
: SfDataGridTheme(
data: SfDataGridThemeData(headerColor: Colors.black),
child: SfDataGrid(
gridLinesVisibility: GridLinesVisibility.both,
rowsPerPage: 20,
key: context.read<DashProvider>().key,
source: context
.read<DashProvider>()
.reportDetailData,
allowSorting: true,
columnWidthMode: ColumnWidthMode.fill,
selectionMode: SelectionMode.multiple,
navigationMode: GridNavigationMode.cell,
columns: context.read<DashProvider>().grid),
)
And Finally don't forget to add the reportDetailData class..
Add the following code:
class ReportDetailData extends DataGridSource {
/// Creates the employee data source class with required details.
ReportDetailData({required List<DataModel> data}) {
_employeeData = data.map<DataGridRow>((DataModel e) {
return DataGridRow(cells: <DataGridCell>[
DataGridCell<String>(
columnName: 'ID',
value: e.id.toString() == "null" ? "N/A" : e.id.toString()),
}).toList();
}
List<DataGridRow> _employeeData = <DataGridRow>[];
@override
List<DataGridRow> get rows => _employeeData;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((DataGridCell cell) {
return Container(
alignment: Alignment.center,
child: Text(
cell.value.toString(),
style: TextStyle(fontSize: 15),
textAlign: TextAlign.center,
),
);
}).toList());
}
}
That's all u need to do run the app by using the following command.
$flutter run
Hurray u finally made a data grid using Syncfusion package flutter.
Final Result:
Keep sure to check out my packages and leave a suggestion:
https://pub.dev/packages/fancy_button_new
https://pub.dev/packages/fancy_field_new
Top comments (0)