PlutoGrid Documentation

The pluto_grid_export package allows you to export the metadata and content of a PlutoGrid instance into CSV or PDF formats. To use these features, you must have access to the PlutoGridStateManager (typically obtained via the onLoaded callback of the PlutoGrid widget).

import 'package:pluto_grid/pluto_grid.dart';
import 'package:pluto_grid_export/pluto_grid_export.dart' as pluto_grid_export;

// Access the stateManager from PlutoGrid's onLoaded callback
// and pass it to the export functions.

To change the launch screen image for the iOS version of your Flutter application, you can either replace the image files directly in the packages/pluto_grid_export/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

Using Xcode:

1. Open your Flutter project's iOS workspace using the command: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch images.

When using stateManager.setShowLoading(), you can specify the PlutoGridLoadingLevel to control how the loading indicator is displayed:

• PlutoGridLoadingLevel.grid: The entire grid becomes opaque and the indicator appears in the center. User interaction is disabled.
• PlutoGridLoadingLevel.rows: A LinearProgressIndicator appears at the top of the row area. User interaction remains possible.
• PlutoGridLoadingLevel.rowsBottomCircular: A CircularProgressIndicator appears at the bottom of the row area. User interaction remains possible.

PlutoGrid supports hierarchical data through group rows. A PlutoRow can have a parent reference if it is a child of a group row.

• isMain: Returns true if the row is a top-level row (has no parent).
• depth: Returns an integer representing how many levels deep the row is nested within groups.
• parent: Returns the PlutoRow that contains this row.

The mode property determines how the user interacts with the grid:

• PlutoGridMode.normal: Standard editing and movement mode.
• PlutoGridMode.readOnly: The grid is non-editable.
• PlutoGridMode.select: Enables row selection. Tapping or pressing Enter on a row returns information via onSelected. Requires a double tap if no row is currently selected.
• PlutoGridMode.selectWithOneTap: Similar to select, but onLoaded works when an unselected row is tapped once.
• PlutoGridMode.multiSelect: Enables multiple row selection.
• PlutoGridMode.popup: Specialized mode for popup interactions.

To prevent UI freezing when dealing with many rows and columns, pass an empty list to the rows parameter initially. Then, use the onLoaded callback to fetch and initialize rows asynchronously using PlutoGridStateManager.initializeRowsAsync.

Note: When using setShowLoading(true), you do not need to call stateManager.notifyListeners() because setShowLoading updates the grid state automatically.

PlutoGrid(
  columns: columns,
  rows: [], // Start with empty rows
  onLoaded: (PlutoGridOnLoadedEvent event) {
    final stateManager = event.stateManager;
    
    stateManager.setShowLoading(true);

    PlutoGridStateManager.initializeRowsAsync(
      columns,
      fetchedRows,
    ).then((value) {
      stateManager.refRows.addAll(value);
      stateManager.setShowLoading(false);
    });
  },
);

The PlutoGrid widget is the primary entry point for displaying a grid UI. It requires a list of PlutoColumn and PlutoRow objects.

Important Constraints:

• Each PlutoColumn.field must be unique.
• PlutoColumn.field must match the keys used in PlutoRow.cells maps.
• For large datasets, initializing rows synchronously can freeze the UI. Use PlutoGridStateManager.initializeRowsAsync to load rows asynchronously after the grid has loaded.

PlutoGrid(
  columns: [ 
    PlutoColumn(	itle: 'Name', field: 'name', type: PlutoColumnType.text()),
  ],
  rows: [
    PlutoRow(cells: {
      'name': PlutoCell(value: 'John Doe'),
    }),
  ],
);

To render the grid, use the PlutoGrid widget within your build method. You must provide the columns and rows lists. You can also hook into lifecycle and change events using onLoaded and onChanged.

• onChanged: Triggered when a cell value is modified. Receives a PlutoGridOnChangedEvent.
• onLoaded: Triggered when the grid is fully initialized. Receives a PlutoGridOnLoadedEvent.

@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);
          }
      ),
    ),
  );
}```