Firebase, Android, Google I/O, Cloud computing How to Create a Flutter DataGrid in 10 Minutes
In this video you will see how to add the sync fusion flutter data grid package to a flutter project and add the datagrid widget to it. You will learn how to set a data source and columns to the grid. Then i will explain how to enable selection and sorting in the data grid. First open the vs code editor. You can also use an ide. You prefer, such as android studio or intellij. This computer was already set up with the flutter development environment, so i can directly create a new flutter project, open the command palette and create a new flutter project, choose a folder to create the project in name the project. My flutter app vs code creates the flutter project. For you first run this application choose the android simulator. You can also use the terminal to run the project. You can see the application with a button widget at the bottom and a text widget at the center. When you click the button, the click count is updated in the text widget. Now let me show you how to add a data grid in this app, replacing the text and button widgets to do so. First, i need to import the sync fusion flutter data grid package from the pub.dev website, so open the pub spec yml file and declare the dependencies infusion underscore flutter underscore data grid using the latest version. When you save the file, vs code runs the command flutter pub git to download the package.
The download is completed now next open the main.dart file import, the datagrid.dart library, so that you can use the data grid widget in this file. Let’S write the data grid related code within the my homepage state class, so remove the code in the my homepage state class for the sake of clarity, override the build method and within the build method, return a safe area widget to render the data grid within the Usable area to its child set a scaffold widget so that you can set the material design to your application to the scaffolds body set the sf data grid. Widget here you cannotice that the sf data grid requires the source and columns properties. So i need to define a data source first and then bind it to the sf data grid. Let me create simple employee data to show designation and salary, define a class named employee declare a field of typing and name it id then declare a string field to store the name of the employee and then a field for designation and salary create a constructor for This class that receives the parameters, id name, designation and salary. Next, i need to create a grid data source and bind it to the data grid. To do so define a method that returns a list of employee data, get employee data within it return a collection of employee details to set this data to the data grid. Widget in the my homepage, state class declare a field of type list of employee to initialize.
The employee’s collection override the init state method within it initialize the employee’s collection. By calling the method get employee data which will return the employee data collection. I have created the data next. You need to convert this data so that it can be recognized by the data grid. To achieve this, you need to inherit the data grid source class and convert each employee row. Data to data grid row, where each data grid row contains a collection of data grid cell that helps in sorting the data grid, source classes, rows property and build row method. Helps to achieve this data conversion so define an employee data source class that extends the data grid source class, override the rows property and assign a field to it. Declare the field as list of data grid row. Now i need to set this data grid rows field with values that i have created previously define a constructor for employee data source class and receive a parameter of type list of employee within the constructor set. The data grid rows field with the employees parameter call the map method with type data grid row, create a lambda function and define the data grid. Row set its cell’s property with a collection of data grid cell. Here i add the id column and set its value. I do the same for the other. Columns too, you can see. Grid rows were defined with data and returned as a list. Next, i need to override the build row method and create the widget required for each cell so return the datagrid rowadapter class and set the cells property with the parameter rows.
Getcells method. Here you need to map each cell with widget by passing the type as widget and defining a function that returns a container widget set its child with a text widget and set the data grid cell’s value as its data you can see. I have defined the row with a collection of cells built using container and text widgets. I also assigned values to it to assign this data source to the data grid. In the my home, page state class define a field of type employee data source and in the init state method, assign the employee data source field by calling the class employee data source by passing the employee’s collection. Once you run this app, you will find this raw employee data is converted to a data grid, understandable employee data source with rows and cells in the sf data grid, set the source property with the employee data source field, set the columns property with a collection of Grid column, you can add the desired fields that are available from the assign source collection. Here i will define all four fields to show the id field define a grid text column class, which is inherited from the grid column class set its column name property with id. This should match the name from the underlying data source to show the name in the grid’s column, header set the label property with a container widget, set its padding alignment and set a text widget to display the column title.
If the text overflows an ellipsis will be shown, i do the same for the other columns too now all is set. I restart the application. You can see the provided columns are displayed in the data grid. Let me align the grid cells in the build row method within the container widget set the padding property so that the values will be displayed with some breathing space. Since the id and salary columns are showing numbers set, the alignment to center right and for the others set it to center left, set the text’s overflow property with ellipsis, so that longer values will be shown appended with an ellipsis now refresh the app you can see. The cells are aligned as expected. Next, let me show you how to enable selection in the sf data grid set the selection mode property with the value multiple. You can also set the value for none, single and single deselect save the file. The hot reload feature loads. The application in the android emulator select some rows. You can see that multiple selection is performed. Also, you can enable sorting, by setting the allow sorting property to true save the file and tap the column header you can see. The grid is sorted that’s it. Let me summarize the main points of this video. We saw how to add the syncfusion flutter datagrid widget to a flutter project. We learned how to set a data source and columns to the grid. We also learned how to enable selection and sorting in the data grid.
You can download this working example from the github link in the video description below you can also check if you are eligible for our community license, which gives you a free license, key to use our flutter products.