RawKeyboardListener Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
RowKeyboard Listener
RowKeyboard Listener

In this article, we will walk through RawKeyboardListener Widget.

What is RawKeyboardListener Widget?

RawKeyboardListener Widget that calls a callback whenever the user presses or releases a key on a keyboard.

A RawKeyboardListener Widget is useful for listening to raw key events and hardware buttons that are represented as keys. Typically, used by games and other apps that use keyboards for purposes other than text entry.

For text entry, consider using an EditableText, which integrates with on-screen keyboards and input method editors (IMEs).

The Constructor for it will look like below :

RawKeyboardListener({
Key key,
@required FocusNode focusNode,
@required Widget child
bool autofocus: false,
ValueChanged<RawKeyEvent> onKey,
})

Properties :

  • autofocus: This autofocus attribute will be true if this widget will be selected as the initial focus when no other node in its scope is currently focused. Ideally, there is only one widget with autofocus set in each FocusScope. If there is more than one widget with an autofocus set, then the first one added to the tree will get focus.

  • focusNode: This focusNode attribute controls whether focusNode has keyboard focus. FocusNodes are persistent objects that form a focus tree that is a representation of the widgets in the hierarchy that are interested in focus. A focus node might need to be created if it is passed in from an ancestor of a Focus Widget to control the focus of the children from the ancestor, or a widget might need to host one if the widget subsystem is not being used, or if the Focus and FocusScope Widgets provide insufficient control.
  • bool includeSemantics: This includeSemantics attribute includes semantics information in this widget. If true, this widget will include a Semantics node that indicates the Semantics.focusable and Semantics.focused properties. It is not typical to set this to false, as that can affect the semantics information available to accessibility systems.

    The default value will be true.

  • onKey: It will be called whenever this widget receives a raw keyboard event.

  • child: child can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which has a children’s property and then provide the children to that widget.

How to use RawKeyboardListener Widget in Flutter?

The following code snippet tells us how to implement RawKeyboardListener Widget in Flutter.

FocusScope.of(context).requestFocus(_focusNode);
return  RawKeyboardListener
(
        focusNode: _textNode,
        onKey: (key) => handleKey(key.data),
        child: child,
);
  • The complete source code will look like below :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

class RawKeyboardListenerWidget extends StatefulWidget {
  RawKeyboardListenerWidget();

  @override
  _RawKeyboardListenerState createState() => new _RawKeyboardListenerState();
}

class _RawKeyboardListenerState extends State<RawKeyboardListenerWidget> {
  TextEditingController _controller = new TextEditingController();
  FocusNode _textNode = new FocusNode();

  @override
  initState() {
    super.initState();
  }

  //Handle when submitting
  void _handleSubmitted(String finalinput) {
    setState(() {
      SystemChannels.textInput
          .invokeMethod('TextInput.hide'); //hide keyboard again
      _controller.clear();
    });
  }

  handleKey(RawKeyEventDataAndroid key) {
    String _keyCode;
    _keyCode = key.keyCode.toString(); //keycode of key event (66 is return)

    print("why does this run twice $_keyCode");
  }

  _buildTextComposer() {
    TextField _textField = new TextField(
      controller: _controller,
      onSubmitted: _handleSubmitted,
    );
    FocusScope.of(context).requestFocus(_textNode);
    return  RawKeyboardListener(
        focusNode: _textNode,
        onKey: (key) => handleKey(key.data),
        child: _textField);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _buildTextComposer(),
    );
  }
}

Conclusion:

In this article, we have been through What is RawKeyboardListener Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Happy Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply