Columns

You can listen for column move events with the PlutoGrid.onColumnsMoved callback. However, there is no event for hiding a column, adding a column, or deleting a column. I have attached the code below for these events.

import 'dart:async';

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;

  late StreamSubscription<PlutoNotifierEvent> notifierEvent;

  late final columnsNotifier = {
    stateManager.moveColumn.hashCode,
    stateManager.hideColumn.hashCode,
    stateManager.hideColumns.hashCode,
    stateManager.insertColumns.hashCode,
    stateManager.removeColumns.hashCode,
    stateManager.toggleFrozenColumn.hashCode,
  };

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

    final dummyData = DummyData(10, 100);

    columns = dummyData.columns;

    rows = dummyData.rows;
  }

  @override
  void dispose() {
    notifierEvent.cancel();

    super.dispose();
  }

  void _notifyListener(PlutoNotifierEvent event) {
    if (event.notifier.firstWhere((e) => columnsNotifier.contains(e)) != -1) {
      print('changed columns');
      // Column currently displayed
      print(stateManager.columns.length);
      // All columns including hidden columns
      print(stateManager.refColumns.originalList.length);
      // fixed left column
      print(stateManager.leftFrozenColumns.length);
      // non-fixed column
      print(stateManager.bodyColumns.length);
      // fixed right column
      print(stateManager.rightFrozenColumns.length);
      // The index of the column according to the order in which the columns are displayed List<int>
      // Assuming there is a column [0,1,2,3,4]
      // If number 3 is fixed to the left, [3,0,1,2,4]
      print(stateManager.columnIndexesByShowFrozen);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            columns: columns,
            rows: rows,
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
              notifierEvent = stateManager.streamNotifier.stream.listen(
                _notifyListener,
              );
            },
          ),
        ),
      ),
    );
  }
}

The renderer is a property that customizes the cell (row) of the corresponding column. Customizing column titles is possible with titleSpan .

/// You can customize the column title.
PlutoColumn(
 titleSpan: const TextSpan(
   children: [
     WidgetSpan(
       child: Text(
         '* ',
         style: TextStyle(color: Colors.red),
       ),
     ),
     TextSpan(text: 'column title'),
   ],
 ),
);