Overwrite Paste Event for TextFormField

Question

I have a TextFormField. Usually you can use the selection toolbar to copy/paste/select all and so on using long tap/double tap.

I want to overwrite the Paste Event. It shouldn't simple insert the current clipboard data but open a popup with several options to insert.

Is it possible to catch and overwrite the Paste event in any way? I saw something like handlePaste() for SelectionControls, but I don't know how to add this to my TextFormField.

Thanks in advance!

Solution 1

AFAIK, you can't exactly 'intercept' the standard toolbar. However, what you can do is to prevent the standard toolbar and make your own.

You can use wrap the textfield/textformfield under IgnorePointer. It will hide any tap gestures on the text field. Below is the code snippet.

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

Now,you can wrap this IgnorePointer under GestureDetector and show your own menu. Like this :

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

This produces the result below and the sample implementation code is here

Solution 2

I search for this problem. I think there is no proper way to solve this problem. I read about the Textfield class and found two solutions for it.
if you check TextField widget you can find that it will use EditableText to show its simple Text input. EditableText has a selectionControls property. this property is used to render the selection toolbar. also, I found that material and Cupertino have different implementation of it.

1st Solution: you can create your own custom TextField that will use EditableText and pass your custom selectionControl to your widget. I think this gonna be a very hard job to do. create your own implementation of the widget, handling animations, and...

2nd Solution: You can simply copy all related files of TextField in a new file and update it as you want. for this solution, I create a repo in GitHub. you can checkout source code to understand how you can show a dialog in the paste option. and this is how the code should work.

note: I just simply update paste function of the Material implementation of selectionControls. if you want you can also update the Cupertino selectionControls too.

note: also I added documents in everywhere I change the code.

Comments

[GameLoading]

api.flutter.dev/flutter/widgets/TextSelectionControls/…

[S-Man]

@GameLoading Thanks, I already found this. But it is not clear to be how to use this with a TextFormField

[Payam Zahedi]

please explain more about what do you want to do? why do you wanna overwrite paste on textField? do you want to open a dialog when the user taps on paste button in textField toolbar?

[S-Man]

@PayamZahedi Yes exactly! The normal way is: Long Tab -> Selection Toolbar -> Paste -> Clipboard content will be pasted into text field. Instead of getting the content inserted directly, I want to open a dialog or popup menu with two options (maybe two different formats). So the user can chose which format should be taken to be pasted.

[S-Man]

It is now possible to create a complete custom text selection toolbar: ktuusj.medium.com/flutter-custom-selection-toolbar-3acbe7937‌​dd3

[S-Man]

Thanks for your work. However, in that case I need to implement the entire toolbar on my own, including copy, select all, ... Hm, I believe that could be a workaround, but it is not really what I am looking for.

[Sukhi]

I totally understand. I researched if the paste event can be hacked before sharing this workaround but didn’t get anything constructive. Implementing the standard toolbar (cur-copy-paste & co) is a small price you will need to pay :-( Besides the implementation is not large any way.

[S-Man]

Thanks, I'll have a look. Currently I am using a TextFormField instead of TextField. Do you think, this could be more problematic?

[Payam Zahedi]

TextFormField also uses TextField. in this case, instead TextField you should send CustomFormField to TextFormField. I just update my repo and add CustomTextFormField to it. check it out

[Sukhi]

IMO, the second/two solution won’t be future proof. A. It’ll require to implement the whole toolbar any way. And more importantly, B. when OP copy the files from standard TextField then he will not be able to use Flutter updates w.r.t. the TextField. So, in my humble opinion, this should be the last resort if there’s no solution possible otherwise. As against, the solution with IgnorePointer and GestureDetector is 100% standard. Just my two cents.

[S-Man]

I really appreciate your efforts. But nevertheless, I share @Sukhi's thoughts concerning the issues that this won't get any flutter internal updates anymore. This could raise more issues than it solves.