Flutter How to always hide keyboard when click on TextField but keep focus(Keep show cursor)

Question

I can't control keyboard show or hide, In my project I need to always hide keyboard but keep focused to display my custom keyboard(a widget).

This is I want

And this is my problem

import 'package:flutter/services.dart'; SystemChannels.textInput.invokeMethod('TextInput.hide'); — Kenneth Li, Mar 19 '19 at 05:27
@Kenneth Li `void initState() { focusNode.addListener(_changeFocus); SystemChannels.textInput.invokeMethod('TextInput.hide'); super.initState(); }` it not work — quyen phong tran vuong, Mar 19 '19 at 06:44
@Günter Zöchbauer this way is use solution custom a EditableText and add `SystemChannels.textInput.invokeMethod('TextInput.hide')` it work but wee can custom TextField and add this code in request keyboard ? — quyen phong tran vuong, Mar 19 '19 at 08:41
@quyenphongtranvuong Can you please let me know how did you get this functionality because I need the same thing. — Darshana, Oct 09 '19 at 05:40

score 87 · Answer 1 · answered Feb 07 '20 at 04:09

87

To hide keyboard and keep the cursor visible, set readOnly to true and showCursor to true.

TextFormField(
  showCursor: true,
  readOnly: true),

See flutter/issues/#16863

answered Feb 07 '20 at 04:09

Karen

1,423
8
16

one thing to note is that when readOnly is true, you cannot use AutofillHints. – Dan Archer Online Sep 17 '21 at 05:58

score 17 · Answer 2 · answered Sep 22 '21 at 07:43

17

FYI, TextInputType.none was introduced in #83974:

TextField( keyboardType: TextInputType.none, ... )

answered Sep 22 '21 at 07:43

Viral

297
3
11

score 4 · Answer 3 · answered Mar 20 '19 at 08:41

4

You can use custom focusNode

This prevents keyboard appearing only on first tap:

TextField(focusNode: FirstDisabledFocusNode(),)

class FirstDisabledFocusNode extends FocusNode {
  @override
  bool consumeKeyboardToken() {
    return false;
  }
}

This prevents always:

TextField(focusNode: AlwaysDisabledFocusNode())

class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

answered Mar 20 '19 at 08:41

Thank your answer @Defiant UA - In first way FirstDisabledFocusNode when you double tap on TextField keyboard still show In Second way I need show cursor. Have any way to disable keyboard still keep using TextField – quyen phong tran vuong Mar 20 '19 at 10:51
Sorry, I don't know another solutions. And yes - as I've written - my first solution works only with first tap on `TextField` – Mar 21 '19 at 07:12

score 3 · Answer 4 · answered Mar 20 '19 at 08:34

Insert NoKeyboardEditableText instead your TextField

class NoKeyboardEditableText extends EditableText {

  NoKeyboardEditableText({
    @required TextEditingController controller,
    TextStyle style = const TextStyle(),
    Color cursorColor = Colors.black,
    bool autofocus = false,
    Color selectionColor
  }):super(
      controller: controller,
      focusNode: NoKeyboardEditableTextFocusNode(),
      style: style,
      cursorColor: cursorColor,
      autofocus: autofocus,
      selectionColor: selectionColor,
      backgroundCursorColor: Colors.black
  );

  @override
  EditableTextState createState() {
    return NoKeyboardEditableTextState();
  }

}

class NoKeyboardEditableTextState extends EditableTextState {

  @override
  Widget build(BuildContext context) {
    Widget widget = super.build(context);
    return Container(
      decoration: UnderlineTabIndicator(borderSide: BorderSide(color: Colors.blueGrey)),
      child: widget,
    );
  }

  @override
  void requestKeyboard() {
    super.requestKeyboard();
    //hide keyboard
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }
}

class NoKeyboardEditableTextFocusNode extends FocusNode {
  @override
  bool consumeKeyboardToken() {
    // prevents keyboard from showing on first focus
    return false;
  }
}

Thanks! I get this way, but it don't have some property in TextField I need, ex: Move cursor to edit before word... Have any way to disable Keyboard of TextField when focus? — quyen phong tran vuong, Mar 20 '19 at 10:35
I think, for move cursor you can use `TextEditingController`. I don't know appropriate solution for `TextField`, but I'd recommended you to look in `EditableText` sources. In my example there are just few properties, but `EditableText` has quite a lot of them. So, maybe you can add all needed fields to you class, which extends `EditableText` and this'll be enough. — Andrii Turkovskyi, Mar 20 '19 at 13:43

score 2 · Answer 5 · answered Feb 05 '21 at 00:49

2

try use input_with_keyboard_control package

It helped me solve my problem, of receiving the text from a barcode scanner, without showing the keyboard

answered Feb 05 '21 at 00:49

Jean Lucas

284
1
9

link to the package? – Christian Apr 08 '22 at 19:39
this didn't help me. How did you do it, can you share with me? – VolkanUstekidag Jun 03 '22 at 14:36

Flutter How to always hide keyboard when click on TextField but keep focus(Keep show cursor)

5 Answers5

Linked

Related