CODEWITHSUNDEEP
androidflutteriobarcode-scannertextinput
Yves Boutellier
Yves Boutellier

Reputation: 2034

How to retrieve Text Input without Textfield in Flutter

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.

Upvotes: 3

Views: 2359

Answers (1)

ashutosh
ashutosh

Reputation: 113

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.

Upvotes: 3

Related Questions