Skip to the content.

PlutoGrid for flutter - v2.6.1

codecov


PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web.
Of course, it works well on Android and IOS.


Demo Web

You can try out various functions and usage methods right away.
All features provide example code.


Pub.Dev

Check out how to install from the official distribution site.


Documentation

The documentation has more details.


ChangeLog

Please note the changes when changing the version of PlutoGrid you are using.


Issue

Report any questions or errors.


Screenshots

Frozen columns on the left and right.

PlutoGrid Nomal


PlutoGrid Select Popup


PlutoGrid Select Date


Cell renderer.

PlutoGrid Cell renderer


Multi select. (Cells or Rows)

PlutoGrid Multi select


Dual grid. (Moving between grids.)

PlutoGrid Dual grid


A Dark mode.

PlutoGrid Dual grid


Example

Generate the data to be used in the grid.


List<PlutoColumn> columns = [
  /// Text Column definition
  PlutoColumn(
    title: 'text column',
    field: 'text_field',
    type: PlutoColumnType.text(),
  ),
  /// Number Column definition
  PlutoColumn(
    title: 'number column',
    field: 'number_field',
    type: PlutoColumnType.number(),
  ),
  /// Select Column definition
  PlutoColumn(
    title: 'select column',
    field: 'select_field',
    type: PlutoColumnType.select(['item1', 'item2', 'item3']),
  ),
  /// Datetime Column definition
  PlutoColumn(
    title: 'date column',
    field: 'date_field',
    type: PlutoColumnType.date(),
  ),
  /// Time Column definition
  PlutoColumn(
    title: 'time column',
    field: 'time_field',
    type: PlutoColumnType.time(),
  ),
];

List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value1'),
      'number_field': PlutoCell(value: 2020),
      'select_field': PlutoCell(value: 'item1'),
      'date_field': PlutoCell(value: '2020-08-06'),
      'time_field': PlutoCell(value: '12:30'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value2'),
      'number_field': PlutoCell(value: 2021),
      'select_field': PlutoCell(value: 'item2'),
      'date_field': PlutoCell(value: '2020-08-07'),
      'time_field': PlutoCell(value: '18:45'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value3'),
      'number_field': PlutoCell(value: 2022),
      'select_field': PlutoCell(value: 'item3'),
      'date_field': PlutoCell(value: '2020-08-08'),
      'time_field': PlutoCell(value: '23:59'),
    },
  ),
];

Create a grid with the data created above.

  @override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('PlutoGrid Demo'),
    ),
    body: Container(
      padding: const EdgeInsets.all(30),
      child: PlutoGrid(
          columns: columns,
          rows: rows,
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          onLoaded: (PlutoGridOnLoadedEvent event) {
            print(event);
          }
      ),
    ),
  );
}


Pluto series

develop packages that make it easy to develop admin pages or CMS with Flutter.


Support

Buy me a coffee


License

MIT