manki kim
Pluto packages in Flutter


Pluto packages in Flutter



manki kim's photo
manki kim
·Oct 30, 2022·

2 min read

The modes of PlutoGrid are normal, readOnly, select, selectWithOneTap, multiSelect, and popup.
The popup mode is intended to be used by internal widgets.
The rest of the modes are used as follows according to the user's purpose.

normal mode

As a basic mode, there are no restrictions on editing and operation.

readOnly mode

In this mode, cell editing is restricted.

select or selectWithOneTap mode

This mode is for single row selection. When a row is selected, the PlutoGrid.onSelected callback is called.
In select mode, the PlutoGrid.onSelected callback is called only when the currently selected row is tapped or the enter key is pressed.
The selectWithOneTap mode will call the PlutoGrid.onSelected callback when a row is tapped, regardless of whether a row is currently selected or not.
The selected row is passed as the row, rowIdx,cellvalues ​​of theonSelected` callback.

multiSelect mode

This mode is for selecting multiple rows. You can select or deselect rows with a single tap.
You can also select rows with the keyboard shift + arrowUp/Down, shift + tap, control + tap, etc.
However, when selecting a row with the keyboard, the PlutoGrid.onSelected callback is called only when the enter key is pressed.
Selected rows are listed in the List<PlutoRow>? passed as the selectedRows value.
Typing escape will undo all selected rows. In this case, selectedRows returns null.

The mode can be changed to setState of StatefulWidget as shown below.

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

import '../dummy_data/development.dart';

class EmptyScreen extends StatefulWidget {
  static const routeName = 'empty';

  const EmptyScreen({Key? key}) : super(key: key);

  _EmptyScreenState createState() => _EmptyScreenState();

class _EmptyScreenState extends State<EmptyScreen> {
  late List<PlutoColumn> columns;

  late List<PlutoRow> rows;

  late PlutoGridStateManager stateManager;

  PlutoGridMode mode = PlutoGridMode.normal;

  void initState() {

    final dummyData = DummyData(5, 5);

    columns = dummyData.columns;

    rows = dummyData.rows;

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            mode: mode,
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
            createHeader: (s) => TextButton(
              onPressed: () {
                setState(() {
                  mode = mode.isNormal == true
                      ? PlutoGridMode.readOnly
                      : PlutoGridMode.normal;
              child: const Text('Change mode'),
            configuration: const PlutoGridConfiguration(),
Share this