RowKeyboard Listener

RawKeyboardListener Widget – Flutter Widget Guide By Flutter Agency

 

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,
bool autofocus = false,
bool includeSemantics = true,
ValueChanged? onKey,
required Widget child}
)

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 {
 final TextEditingController _controller = TextEditingController();
 final FocusNode _textNode = FocusNode();
 @override
  initState() {
    super.initState();
  }
  //Handle when submitting
  void _handleSubmitted(String finalinput) {
    setState(() {
      SystemChannels.textInput
          .invokeMethod('TextInput.hide'); //hide keyboard again
      _controller.clear();
    });
  }
 
  handleKey(RawKeyEventData key) {
    String _keyCode;
    _keyCode = key.keyLabel.toString(); //keycode of key event (66 is return)
  }
 
  _buildTextComposer() {
    TextField _textField = TextField(
      decoration: const InputDecoration(hintText: "Enter name"),
      controller: _controller,
      onSubmitted: _handleSubmitted,
    );
    FocusScope.of(context).requestFocus(_textNode);
    return RawKeyboardListener(
        focusNode: _textNode,
        onKey: (key) => handleKey(key.data),
        child: Center(
            child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: _textField,
        )));
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("RowKeyBoard example"),
      ),
      body: _buildTextComposer(),
    );
  }
}

Output

RawKeyboardListener Widget
RawKeyboardListener Widget

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.

Abhishek Dhanani

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.

Leave a comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on