FocusWidget Key events

Key events can be listened to and handled using onKey attribute of the Focus widget. Key events start at the focus node with the primary focus. If that node doesn’t return KeyEventResult.handled, from this attribute callback, then its parent focus node is given the event and so on till the root of the Focus tree is encountered.

Following is the Focus widget that absorbs every key that its subtree doesn’t handle, without being able to be the primary focus.

@override
Widget build(BuildContext context) {
  return Focus(
    onKey: (FocusNode node, RawKeyEvent event) => KeyEventResult.handled,
    canRequestFocus: false,
    child: child,
  );
}

@override

Widget build(BuildContext context) {

return Focus(

onKey: (FocusNode node, RawKeyEvent event) => KeyEventResult.handled,

canRequestFocus: false,

child: child,

);

}

Focus key events are processed before text entry events, so handling a key event when the focus widget surrounds a text field prevents that key from being entered into the text field.
Here’s an example of a widget that won’t allow the letter a to be typed into the text field.

@override
Widget build(BuildContext context) {
  return Focus(
    onKey: (FocusNode node, RawKeyEvent event) {
      return (event.logicalKey == LogicalKeyboardKey.keyA)
          ? KeyEventResult.handled
          : KeyEventResult.ignored;
    },
    child: TextField(),
  );
}

@override

Widget build(BuildContext context) {

return Focus(

onKey: (FocusNode node, RawKeyEvent event) {

return (event.logicalKey == LogicalKeyboardKey.keyA)

? KeyEventResult.handled

: KeyEventResult.ignored;

child: TextField(),

);

}

If the intent is input validation, this example’s functionality would probably be better implemented using a TextInputFormatter, but the technique can still be useful: the Shortcuts widget uses this method to handle shortcuts before they become text input, for instance.

Controlling FocusWidget’s focus

Following methods are used to control how this node and its descendants participate in the focus process of the Focus widget.

If the skipTraversal attribute true, then this focus node doesn’t participate in focus traversal. It is still focusable if requestFocus is called on its focus node, but is otherwise skipped when the focus traversal system is looking for the next thing to focus on.

The canRequestFocus attribute, unsurprisingly, controls whether or not the focus node that this Focus widget manages can be used to request focus. If this attribute is false, then calling requestFocus on the node has no effect. It also implies that this node is skipped for focus traversal, since it can’t request focus.

The descendantsAreFocusable attribute controls whether the descendants of this node can receive focus, but still allows this node to receive focus. This attribute can be used to turn off focusability for an entire widget subtree. This is how the ExcludeFocus widget works: it’s just a Focus widget with this attribute set.

Autofocus in FocusWidget

As the name suggests, this attribute is beneficial when we want to automatically focus the UI element in the Focus tree which is focused. It is recommended that we only give one child to be auto-focusable in one Focus tree. Defining more than one then it is arbitrary which one receives the focus.

Obtaining the FocusNode

You can get the FocusNode by different methods.

You can pass it as an attribute to the Focus widget while obtaining it from ancestors.

You can access it using Focus.of(context) while obtaining it from descedents.

We can use Builder method when want the it from current context. Following example shows this method.

@override
Widget build(BuildContext context) {
  return Focus(
    child: Builder(
      builder: (BuildContext context) {
        final bool hasPrimary = Focus.of(context).hasPrimaryFocus;
        print('Building with primary focus: $hasPrimary');
        return const SizedBox(width: 100, height: 100);
      },
    ),
  );
}

@override

Widget build(BuildContext context) {

return Focus(

child: Builder(

builder: (BuildContext context) {

final bool hasPrimary = Focus.of(context).hasPrimaryFocus;

print('Building with primary focus: $hasPrimary');

return const SizedBox(width: 100, height: 100);

);

}

Timing

When focus is requested, it only takes effect after the current build phase completes. This means that focus changes are always delayed by one frame, because changing focus can cause arbitrary parts of the widget tree to rebuild, including ancestors of the widget currently requesting focus. Because descendants cannot dirty their ancestors, it has to happen between frames, so that any needed changes can happen on the next frame.

FocusScopeWidget

As like FocusWidget manages FocusNode, the FocusScopeWidget manages the FocusScopeNode. It is a special node in the focus tree that serves as a grouping mechanism for the focus nodes in a subtree. Focus traversal stays within a focus scope unless a node outside of the scope is explicitly focused. It also keeps track of the current focus and history of the nodes focused within its subtree. That way, if a node releases focus or is removed when it had focus, the focus can be returned to the node that had focus previously. Focus scopes also serve as a place to return focus to if none of the descendants have focus. This allows the focus traversal code to have a starting context for finding the next (or first) focusable control to move to.

That’s all for this Article 🎊 .

Conclusion

We learned about some Keyboard Focus in Flutter in this blog.

Visit the link for additional information on the Keyboard Focus in Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Keyboard Focus in Flutter

FocusWidget Key events

Controlling FocusWidget’s focus

Autofocus in FocusWidget

Change Notification FocusWidget

Obtaining the FocusNode

Timing

FocusScopeWidget

Conclusion

Leave a Comment Cancel Reply

Keyboard Focus in Flutter

FocusWidget Key events

Controlling FocusWidget’s focus

Autofocus in FocusWidget

Change Notification FocusWidget

Obtaining the FocusNode

Timing

FocusScopeWidget

Conclusion

Leave a Comment Cancel Reply

Message Sent!