Syncfusion Data Grid Flutter

Muhammad Manan — Fri, 27 Jan 2023 12:32:43 +0000

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

Publish Flutter Package on pub.dev

Muhammad Manan — Tue, 24 Jan 2023 12:47:48 +0000

Preparing to publish

When publishing a package, it’s important to follow the pubspec format and package layout conventions. Some of these are required in order for others to be able to use your package. Others are suggestions to help make it easier for users to understand and work with your package. In both cases, pub tries to help you by pointing out what changes will help make your package play nicer with the Dart ecosystem. There are a few additional requirements for uploading a package:

You must include a LICENSE file. We recommend the BSD 3-clause license, which the Dart and Flutter teams typically use. However, you can use any license that’s appropriate for your package. You must also have the legal right to redistribute anything that you upload as part of your package.
Your package must be smaller than 100 MB after gzip compression. If it’s too large, consider splitting it into multiple packages, using a .pubignore file to remove unnecessary content, or cutting down on the number of included resources or examples.
Your package should depend only on hosted dependencies (from the default pub package server) and SDK dependencies (sdk: flutter). These restrictions ensure that dependencies of your packages cannot become unavailable in the future.
You must have a Google Account, which pub uses to manage package upload permissions. Your Google Account can be associated with a Gmail address or with any other email address.

Important files

Pub uses the contents of a few files to create a page for your package at pub.dev/packages/. Here are the files that affect how your package’s page looks:

README.md: The README.md file is the main content featured in your package’s page. The file’s contents are rendered as Markdown. For guidance on how to write a great README, see Writing package pages.
CHANGELOG.md: Your package’s CHANGELOG.md file, if found, is also featured in a tab on your package’s page, so that developers can read it right from pub.dev. The file’s contents are rendered as Markdown.
The pubspec: Your package’s pubspec.yaml file is used to fill out details about your package on the right side of your package’s page, like its description, homepage, etc.
Publishing your package
Use the dart pub publish command to publish your package for the first time, or to update it to a new version.

Performing a dry run

To test how dart pub publish will work, you can perform a dry run:

$ dart pub publish --dry-run

Hurray!! NOW FINALLY you can publish now.

Publishing

When you’re ready to publish your package, remove the --dry-run argument:

$ dart pub publish

You will receive and email of package published on pub.dev and u can now flex with your friends about the package u uploaded and saved developers life…

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

Forem: Muhammad Manan

Syncfusion Data Grid Flutter

Publish Flutter Package on pub.dev