onChange Listener on PlutoCell that listens when the text is changing

[ShawermaBox]

is there a way to listen when a user start editing a cell?
for example:
when a user start typing on a row cell an overlay widget appears under the cell containing a list that he can choose from, the overlay list is being filtered while the user is typing on the cell, when he selects an item on the list from the overlay list and presses enter it'll be added as a PlutoCell, this is achievable if I can listen when the user start typing, the textfield widget has it under the name of onChange,
is there a way to achieve this in pluto_grid Package?

[bosskmk]

This is an example of listening to cell edit status and text input.
Please refer to the example below to implement it.

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;

  bool _editing = false;

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

    columns = [
      PlutoColumn(
        title: 'column1',
        field: 'column1',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column2',
        field: 'column2',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column3',
        field: 'column3',
        type: PlutoColumnType.text(),
      ),
    ];

    rows = DummyData.rowsByColumns(length: 10, columns: columns);
  }

  @override
  void dispose() {
    stateManager.removeListener(listener);
    super.dispose();
  }

  void listener() {
    if (_editing != stateManager.isEditing) {
      if (stateManager.isEditing) {
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
          stateManager.textEditingController!.addListener(textListener);
        });
      } else {
        stateManager.textEditingController!.removeListener(textListener);
      }
    }

    _editing = stateManager.isEditing;
  }

  void textListener() {
    print(stateManager.textEditingController?.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print(event);
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
              stateManager.addListener(listener);
              _editing = stateManager.isEditing;
            },
            configuration: const PlutoGridConfiguration(),
          ),
        ),
      ),
    );
  }
}

[ShawermaBox]

is there a way to access the cell or the textfield widget?
i'm trying to use CompositedTransformFollower or the portal package, but can't find a way to link the overlay table with the cell

[bosskmk]

You can access the current TextEditingController and TextField.

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;

  bool _editing = false;

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

    columns = [
      PlutoColumn(
        title: 'column1',
        field: 'column1',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column2',
        field: 'column2',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'column3',
        field: 'column3',
        type: PlutoColumnType.text(),
      ),
    ];

    rows = DummyData.rowsByColumns(length: 10, columns: columns);
  }

  @override
  void dispose() {
    stateManager.removeListener(_listener);

    super.dispose();
  }

  void _listener() {
    if (stateManager.isEditing == _editing) return;

    if (stateManager.isEditing == true && stateManager.currentCell != null) {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        // text controller.
        print(stateManager.textEditingController?.text);
        if (FocusScope.of(context).focusedChild?.descendants != null) {
          for (final child
              in FocusScope.of(context).focusedChild!.descendants) {
            final found =
                child.context?.findAncestorWidgetOfExactType<TextField>();
            if (found != null) {
              // TextField.
              print(found);
              break;
            }
          }
        }
      });
    }

    _editing = stateManager.isEditing;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print(event);
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
              stateManager.addListener(_listener);
              _editing = stateManager.isEditing;
            },
            configuration: const PlutoGridConfiguration(),
          ),
        ),
      ),
    );
  }
}