Introduction to PlutoGrid in Flutter

7 min readDec 24, 2024

Suppose you are making an application and you want to include table layout then what comes to your mind is Flutter’s DataTable widget, but this is used for making basic tables and lacks advanced features like inline editing, infinite scrolling or custom column types. And users have to manually implement these functionality that will be very time consuming. So we will use the PlutoGrid widget and the advantage of using this is that it shows your data in grid-type UI and you can do inline editing, sorting and filtering the data and can implement pagination within the grid.

What is PlutoGrid

PlutoGrid is an open source package used in flutter that renders data in a structured manner in a grid and allows users to easily display, manage and edit large amounts of data with the keyboard and it provides advanced functionalities that make it easy to include dashboards, admin panels and real-time data management systems.

Features of PlutoGrid

Customizable columns and cells
Drag the column to move it
Column filtering and sorting
Column grouping
Automatically adjust column width
Move by dragging a row
Row pagination
Select mode for select type data

Now if you want to create different types of column in PlutoGrid then:-

Include plutoGrid dependency in your pubspec.yaml file:-

dependencies:
  pluto_grid: ^8.0.0 # Replace with a compatible version

Now let us make a table that contains rows and columns:-

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

void main() {
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define the columns with default filtering capabilities
    final columns = [
      PlutoColumn(
        title: 'ID',
        field: 'id',
        type: PlutoColumnType.text(),
        enableSorting: true, // Enable sorting
      ),
      PlutoColumn(
        title: 'Name',
        field: 'name',
        type: PlutoColumnType.text(),
        enableSorting: true, // Enable sorting
      ),
      PlutoColumn(
        title: 'Age',
        field: 'age',
        type: PlutoColumnType.number(),
        enableSorting: true, // Enable sorting
      ),
    ];    // Define the rows
    final rows = List.generate(
      10,
      (index) => PlutoRow(
        cells: {
          'id': PlutoCell(value: 'ID-$index'),
          'name': PlutoCell(value: 'Name $index'),
          'age': PlutoCell(value: 20 + index),
        },
      ),
    );    return MaterialApp(
      title: 'PlutoGrid Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PlutoGrid Sorting & Filtering'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: PlutoGrid(
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print('Cell value changed: ${event.value}');
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              final stateManager = event.stateManager;              // Enable filtering functionality
              stateManager.setShowColumnFilter(true);
            },
            configuration: PlutoGridConfiguration(
              style: PlutoGridStyleConfig(
                gridBorderColor: Colors.grey,
                activatedBorderColor: Colors.blue,
                activatedColor: Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Description of above code:-

title: The header text displayed for the column.
Field: It is unique and defined in every column that is used to match data in rows.
Type: This specifies which type of data you want to enter in the column like text, number, date, time etc.
enableSorting: If it sets to true then PlutoGrid will sort the rows based on the values in that particular column.
Each PlutoRow has data in a particular column and we specify the column using a field identifier that is unique for each column.
Keys (‘id’, ‘name’, ‘age’) in PlutoRow correspond to the field values in the column.
stateManager.setShowColumnFilter(true); this will allow the user to filter the data according to the value that they provide.
You can style your grid using PlutoGridStyleConfig.
Here if you want your column to non-modifiable read mode then use PlutoColumn(readOnly: true).

Here is output you will get:-

Properties in PlutoGridStyleConfig to style PlutoGrid

Rows Styling:

rowColor: Set background color in row.
rowBorderColor: Set border color for row.
activatedColor: Change the background color for the active row.

Cells Styling:

cellTextStyle: Set style for cell text.
cellColorInEditState: Set background color of cell when the cell is in edit state.
cellPadding: Set the cell padding.

Column Header Styling:

columnTextStyle: Style the column text.
columnBackgroundColor: It sets the background color of the column.
columnHoverBackgroundColor: It will change background color when users hover over the column headers.
columnFilterTextStyle: This will set the text style when users enter something to filter the column.

Grid Border Styling:

gridBorderColor: Set the grid’s outer border color.
gridBorderRadius: Set the outer radius of the grid.

Scrollbars Styling:

scrollbarRadius: Set the radius of scrollbars.
scrollbarWidth: Set the width of scrollbars.
scrollbarColor: Set color of scrollbars.
scrollbarHoverColor: Set color of the scrollbar when users hover.

Grid Borders and Dividers Styling:

borderColor: Color of the grid’s internal borders.
activatedBorderColor: The activated cell or row will have different color borders.

CheckBox Styling:

checkedColor: Set color of the checkbox when selected.
uncheckedColor: Set color of the checkbox when not selected.
disabledCheckboxColor: Set color of the checkbox when disabled.

Selection Styling:

gridBackgroundColor: This will set the background color of the entire grid.
activatedColor: Set color for the activated or focused grid cell.

Focus Indicators Styling:

iconColor: If any icons is present in headers like sort or filter icons, then it sets the color of icons.
iconSize: Set size of icons in headers.

Here is example for above styling properties:-

PlutoGridConfiguration(
  style: PlutoGridStyleConfig(
    gridBorderColor: Colors.grey.shade300,
    gridBorderRadius: BorderRadius.circular(10),
    columnTextStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
    columnBackgroundColor: Colors.Grey,
    columnHoverBackgroundColor: Colors.blue,
    activatedColor: Colors.blue.shade100,
    rowColor: Colors.white,
    rowBorderColor: Colors.grey.shade300,
    cellTextStyle: TextStyle(fontSize: 14, color: Colors.black),
    cellPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
    scrollbarRadius: Radius.circular(8),
    scrollbarWidth: 6,
    scrollbarColor: Colors.blueGrey,
    activatedBorderColor: Colors.blue,
  ),
);

Types of Column

Text Column:

Text column allows you to enter and edit text. For this you have to provide a type: PlutoColumnType.Text().

Number Column:

This column allows numbers to enter and edit. For this you have to provide a type: PlutoColumnType.number().

PlutoColumn(
  title: 'Age',
  field: 'age',
  type: PlutoColumnType.number(
    negative: false,
    format: '#,###',
    applyFormatOnInit: true,
  ),
),

here negative: false, determines that negative numbers are not allowed by default it is true.

format determines the format in which numbers are displayed (According to NumberFormat from Intl package).

applyFormatOnInit determines whether values are initialized according to format when a row is first added.

Select column:

This is a column where you can select one out of many options. The user can select one item from the range of items.

PlutoColumn(
  title: 'Items',
  field: 'item',
  type: PlutoColumnType.select(
    <String>[
      'Chair',
      'Table',
      'Bookshelf',
    ],
  ),
),

Date column:

This is a column where you can enter or edit the date.

PlutoColumn(
  title: 'Supply Date',
  field: 'supplyDate',
  type: PlutoColumnType.date(
    startDate: DateTime(2024, 12, 01),
    endDate: DateTime(2025, 12, 01),
    format: 'yyyy-MM-dd',
    headerFormat: 'yyyy-MM',
  ),
),

startDate limits the starting range of dates. If not set, then there will be no limit to the starting range.

endDate set the range for ending date. If not set, there will be no limit to the ending range.

format set the format for date (According to DateFormat in Intl package).

headerFormat set the format for displaying the year and month at the top of date picker.

Time column:

This is a column where time can be entered or edited. When user click the a popup appear from where they can select the hour and minute (00:00).

PlutoColumn(
  title: 'Entry time',
  field: 'entryTime',
  type: PlutoColumnType.time(),
),

Shortcuts used in PlutoGrid

ArrowKeys: The current focus will move to another cell up, down, left or right.
Shift + ArrowKeys: Used for selecting the cell or row and moving up, down, left or right.
F2: This key sets the cell to the edit state.
F3: This works only when the user enables the column filtering with stateManager.setshowColumnFilter If pressed then the focus will move to the column filter of the current cell.

PlutoGrid vs DataTable in Flutter

PlutoGrid allows infinite scroll when there is a large amount of data while in DataTable users have to manage pagination manually.
PlutoGrid has the ability to edit the cells directly while in DataTable users have to separately handle the logic for inline editing.
PlutoGrid has highly customizable cell rendering capabilities while in DataTable there are predefined widgets that handle rendering and also it is very limited.
PlutoGrid has the built-in property to sort and filter the data in a particular column while in DataTable the user has to manually write the code for sorting functionality.
Instead of interacting with the table using a mouse PlutoGrid has advanced keyboard navigation properties like you can use keyboard arrow keys, tab, enter to interact with the table while DataTable has limited custom gestures for navigation.

Conclusion

So conclusion is that if you want advance feature for creating table for your application then use PlutoGrid that provide lot of features like sorting, filtering and editing you can style the grid as per your choice using PlutoGridConfiguration and PlutoGridStyleConfig. It is free to use and customizable for any project requirements.

About the Author

Pragya Tripathi is a Software Development Engineer with a keen interest in Flutter and Node.js. She is eager to learn and grow her skills in software development, exploring new technologies and working on exciting projects to enhance her knowledge.

About CodeStax.Ai

At CodeStax.AI, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But what is the real magic? It’s our tech tribe behind the scenes. If you have a knack for innovation and a passion for redefining the norm, we have the perfect tech playground for you. CodeStax. Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us and be part of the revolution that’s redefining the enterprise tech landscape.