Flutter TextFormField disable keyboard but allow accept input

user_5544901 0
Viewed 2492

I am writing a scanner app where the app will be installed on a Scanner that runs Android. Inside the app there is a TextFormField waiting the input scan or paste in the text inside to do other API call.

However I do not find any option for TextFormField to disable the soft keyboard but still can accept input text

Below is my scanner TextFormField widget code that I have tried.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class BuildScannerBar extends StatefulWidget {
  final Function onFieldSubmitted;
  final TextEditingController textFieldController;
  final String labelText, hintText;
  final bool disableKeyboard;

  BuildScannerBar({
    @required this.textFieldController,
    @required this.onFieldSubmitted,
    this.disableKeyboard = true,
    this.labelText = 'Barcode Scan',
    this.hintText = '',
  });

  @override
  _BuildScannerBarState createState() => _BuildScannerBarState();
}

class _BuildScannerBarState extends State<BuildScannerBar> {

  @override
  Widget build(BuildContext context) {

    return Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: 75,
        margin: EdgeInsets.only(top: 50),
        width: 300
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: ListTile(
          title: TextFormField(
              controller: widget.textFieldController,
              decoration: InputDecoration(
                border: InputBorder.none,
                labelText: widget.labelText,
                hintText: widget.hintText,
              onTap: () {
                SystemChannels.textInput.invokeMethod('TextInput.hide');
              },
              onFieldSubmitted: widget.onFieldSubmitted),
        ),
      ),
    );
  }
}
flutter
3 Answers
//Create a custom Textfield Widget extending editable:

//=====CUSTOM WIDGET TO HIDE KEYBOARD WHILE ACCEPTING VALUE FOR BARCODE CODE SCANNER DEVICE =====//
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class TextFieldWithNoKeyboard extends EditableText {
  TextFieldWithNoKeyboard(
      {@required TextEditingController controller,
      @required TextStyle style,
      @required Function onValueUpdated,
      @required Color cursorColor,
      bool autofocus = false,
      Color selectionColor})
      : super(
            controller: controller,
            focusNode: TextfieldFocusNode(),
            style: style,
            cursorColor: cursorColor,
            autofocus: autofocus,
            selectionColor: selectionColor,
            backgroundCursorColor: Colors.black,
            onChanged: (value) {
              onValueUpdated(value);
            });

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

//This is to hide keyboard when user tap on textfield.
class TextFieldEditableState extends EditableTextState {
  @override
  void requestKeyboard() {
    super.requestKeyboard();
    //hide keyboard
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }
}

// This hides keyboard from showing on first focus / autofocus
class TextfieldFocusNode extends FocusNode {
  @override
  bool consumeKeyboardToken() {
    return false;
  }
}
//  Use this custom widget in your screen by replacing TextField //with, TextFieldWithNoKeyboard

//=====Below is example to use in your screen ==//

class QRCodeScanner extends StatefulWidget {
  QRCodeScanner({Key key}) : super(key: key);

  @override
  _QRCodeScannerState createState() => _QRCodeScannerState();
}

class _QRCodeScannerState extends State<QRCodeScanner> {
  TextEditingController scanController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextFieldWithNoKeyboard(
          controller: scanController,
          autofocus: true,
          cursorColor: Colors.green,
          style: TextStyle(color: Colors.black),
          onValueUpdated: (value) {
            print(value);
          },
        ),
      ),
    );
  }
}
user_109543850

Just set readOnly to true, and keyboardType to TextInputType.none as shown in the code bellow :

TextFormField(
         keyboardType: TextInputType.none,
         readOnly: true,
         ....
user_120428980

Juste add

// readOnly: true

TextFormField(
    readOnly: true
    controller: widget.textFieldController,
    decoration: InputDecoration(
    border: InputBorder.none,
    labelText: widget.labelText,
    hintText: widget.hintText,
    onTap: () {
        SystemChannels.textInput.invokeMethod('TextInput.hide');
    },
    onFieldSubmitted: widget.onFieldSubmitted),
),
user_149251300
Related