PlutoGridMode

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);

  @override
  _EmptyScreenState createState() => _EmptyScreenState();
}

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

  late List<PlutoRow> rows;

  late PlutoGridStateManager stateManager;

  PlutoGridMode mode = PlutoGridMode.normal;

  @override
  void initState() {
    super.initState();

    final dummyData = DummyData(5, 5);

    columns = dummyData.columns;

    rows = dummyData.rows;
  }

  @override
  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) {
              print(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(),
          ),
        ),
      ),
    );
  }
}

PlutoGridMode

Comments

PlutoGrid

Shortcuts

More from this blog

The case of assigning the id of PlutoMenuItem.

Scrollbar and Scroll Behavior

PlutoMenuItemWidget

Shortcuts

Introduction to PlutoLayout

`normal` mode

`readOnly` mode

`select` or `selectWithOneTap` mode

`multiSelect` mode

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

Command Palette

Comments

PlutoGrid

Shortcuts

More from this blog

normal mode

readOnly mode

select or selectWithOneTap mode

multiSelect mode

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

`normal` mode

`readOnly` mode

`select` or `selectWithOneTap` mode

`multiSelect` mode

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