How to retrieve Text Input without Textfield in Flutter

Question

When I scan a barcode, the numbers are sent through the device as String (I guess). If I have a textfield, and it's selected/focused, the scan automatically fills in the number string. I don't want to put it on a textField, I want to catch it on a class, process it such that I can update my shop cart.

I tried with KeyboardListener, but it didn't work.

@override
  Widget build(BuildContext context) {
    return KeyboardListener(
        focusNode: FocusNode(),
        onKeyEvent: (event) {
          text = event.character.toString();
        },
        child: Scaffold(
            appBar: AppBar(
              title: const Text('Retrieve Text Input'),
            ),
            body: Center(
              child: Text(text),
            )));
  }
}

I also saw that there exists a class called TextInput which is a low-level interface to the system's text input control.

The documentation says

To start interacting with the system's text input control, call attach to establish a TextInputConnection between the system's text input control and a TextInputClient.

EditableTextState client = EditableTextState(); 
TextInputConfiguration configuration = TextInputConfiguration();

final TextInputConnection _textInputConnection =
        TextInput.attach(client, configuration);

But I didn't understand how to use this TextInputConnection to retrieve user input because there are no examples on the internet how to use these low-level classes.

user_4394170 · Answer

This is what I did where I want to hide TextField and just listen to text that user enters. Using Stack widget place other widget over the TextField so that it gets hided under other widget. On Tap of upper widget using focus of TextField get Focus on TextField. using FocusNode getFocus function.

You can try is just disable user interaction and apply some styling in TextField.

 style: TextStyle(color: Colors.transparent),
 autofocus: true,
 cursorColor: Colors.transparent,
 showCursor: false,
 autocorrect: false,
 enableSuggestions: false,
 maxLines: 1,
 enableInteractiveSelection: false,
 decoration: InputDecoration(border: InputBorder.none),

Using TextEditController you can get the text entered.

How to retrieve Text Input without Textfield in Flutter

1 Answers