Copy and Paste not working in TextFormField & TextField in Flutter

user_13139719 0
Viewed 3575

Solved: COPY & PASTE Not Working in TextFormField

Found out that I was using Listener's onPointerDown Method to remove focus if the user clicks anywhere else in the App. But this was causing the error.

But the problem is now how to remove focus if anyone clicks somewhere else.

Listener(
    onPointerDown: (_) {
       FocusScopeNode currentFocus = FocusScope.of(context);
       if (!currentFocus.hasPrimaryFocus &&
       currentFocus.focusedChild != null) {
       currentFocus.focusedChild.unfocus();
      }
  },)

I'm trying to have Copy & Paste feature in the TextFormField in my Flutter app. I tried many ways but still, it's not working.

Here is my Code

Widget textFormWidget(
   String label, TextEditingController controller, bool enabled) {
return Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    enabled: true,
    enableInteractiveSelection: true,
    readOnly: false,
    toolbarOptions:
        ToolbarOptions(paste: true, cut: true, selectAll: true, copy: true),
    textAlign: TextAlign.center,
    cursorColor: Colors.white,
    cursorWidth: 3,
    controller: controller,
    style: bold.copyWith(fontSize: 18),
    decoration: InputDecoration(
        focusColor: Colors.white,
        hoverColor: Colors.white,
        labelText: label,
        alignLabelWithHint: true,
        labelStyle: normal),
   ),
 );
}

Calling this as textFormWidget('Name', nameController, true),

If you need more code or information, please comment.

flutter-textinputfield flutter-layout flutter
2 Answers

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.

user_84800690

I was also getting the same issue and was not able to copy and paste. So I removed

FocusScopeNode currentFocus = FocusScope.of(context);
       if (!currentFocus.hasPrimaryFocus &&
       currentFocus.focusedChild != null) {
       currentFocus.focusedChild.unfocus();
      }

part from onPointerDown , and to remove focus if anyone clicks somewhere else I wrap my MaterialApp with GestureDetector and added this :

 onTap: () => FocusManager.instance.primaryFocus?.unfocus(),

code :

GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: MaterialApp(
       //your code
      ),
    );
user_7446800
Related