Overwrite Paste Event for TextFormField

Override Paste Event For TextFormField in Flutter

Problem: Developers may encounter the need to override or customize the paste event behavior in a `TextFormField` widget in Flutter. This can be useful when specific actions or logic are required when the user attempts to paste text into the field. Solution: There are a few approaches one can take to override the paste event in a `TextFormField`. Approach 1: Utilizing IgnorePointer and GestureDetector

This method involves wrapping the `TextFormField` inside an `IgnorePointer` widget, which prevents standard toolbar interaction, and then wrapping that within a `GestureDetector` to define custom behavior.

IgnorePointer(
  child: TextField(
    focusNode: _textfieldFocusNode,
    controller: _controller,
  ),
)

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {
    FocusScope.of(context).requestFocus(_textfieldFocusNode);
  },
  onLongPress: () {
    showMenu(____
  }
)

Approach 2: Creating Custom Selection Controls

Flutter provides the ability to customize the selection controls for text fields. By creating a custom `TextSelectionControls` widget, one can override the default paste behavior.

class AppCupertinoTextSelectionControls extends CupertinoTextSelectionControls {
  AppCupertinoTextSelectionControls({
    required this.onPaste,
  });
  ValueChanged<TextSelectionDelegate> onPaste;
  @override
  Future<void> handlePaste(final TextSelectionDelegate delegate) {
    onPaste(delegate);
    return super.handlePaste(delegate);
  }
}

class AppMaterialTextSelectionControls extends MaterialTextSelectionControls {
  AppMaterialTextSelectionControls({
    required this.onPaste,
  });
  ValueChanged<TextSelectionDelegate> onPaste;
  @override
  Future<void> handlePaste(final TextSelectionDelegate delegate) {
    onPaste(delegate);
    return super.handlePaste(delegate);
  }
}

Approach 3: Using contextMenuBuilder (Flutter 3.7+)

For Flutter versions 3.7 and above, developers can leverage the `contextMenuBuilder` property of `TextFormField` to customize the context menu, including the paste button behavior.

TextFormField(
  ...
  /// Override default input action toolbar to catch paste event
  contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
    return AdaptiveTextSelectionToolbar.editable(
      anchors: editableTextState.contextMenuAnchors,
      clipboardStatus: ClipboardStatus.pasteable,
      // to apply the normal behavior when click on copy (copy in clipboard close toolbar)
      // use an empty function `() {}` to hide this option from the toolbar
      onCopy: () => editableTextState.copySelection(SelectionChangedCause.toolbar),
      // to apply the normal behavior when click on cut
      onCut: () => editableTextState.cutSelection(SelectionChangedCause.toolbar),
      onPaste: () {
        // HERE will be called when the paste button is clicked in the toolbar
        // apply your own logic here

        // to apply the normal behavior when click on paste (add in input and close toolbar)
        editableTextState.pasteText(SelectionChangedCause.toolbar);
      },
      // to apply the normal behavior when click on select all
      onSelectAll: () => editableTextState.selectAll(SelectionChangedCause.toolbar),
    );
  },
  ...
)

Approach 4: Replacing the Paste Button with Copy

As an alternative solution, one can replace the paste button with a copy button, providing a custom `onPressed` handler.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TextField(
          contextMenuBuilder: (context, editableTextState) {
            final buttonItems = editableTextState.contextMenuButtonItems;
            final old = buttonItems
                .where((e) => e.type == ContextMenuButtonType.paste)
                .firstOrNull;
            if (old == null) {
              return AdaptiveTextSelectionToolbar.editableText(
                editableTextState: editableTextState,
              );
            }
            final current = old.copyWith(onPressed: () async {
              final data = await Clipboard.getData(Clipboard.kTextPlain);
              if (data == null) {
                return;
              }
              print('Clipboard text is ${data.text!}');
              editableTextState.hideToolbar();
            });
            buttonItems.remove(old);
            buttonItems.add(current);
            return AdaptiveTextSelectionToolbar.buttonItems(
              anchors: editableTextState.contextMenuAnchors,
              buttonItems: buttonItems,
            );
          },
        ),
      ),
    );
  }
}

Conclusion: Developers have multiple options to override the paste event in a `TextFormField` widget in Flutter. Each approach has its own implementation details and suitability depending on specific requirements and circumstances.