Keyboard Focus in Flutter

Save

Keyboard Focus in Flutter as the name suggests, it manages the focus node. It is the most important and functioning part of the Flutter app development focus system. It manages the attaching and detaching of the focus node it owns from the focus tree, manages the attributes and callbacks of the focus node, and has static functions to enable the discovery of focus nodes attached to the widget tree.

This means that the Focus widget is the one that wraps all the children in the tree which you want to focus on. When the requestFocus method is called on the FocusNode passed to it, the tab traversal is done, the subtree can obtain the focus. Passing FocusNode is optional, if we pass it, we get extra features, if we do not then the Focus widget creates its own one. Most of the functionality of FocusNode is best accessed by changing the attributes of the Focus widget.

The following example shows how we can create our custom focusable widget. There is a text in the container which reacts to the focus events.

You can also check out our Flutter app development services for more Flutter app development.

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'Focus Sample';
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[MyCustomWidget(), MyCustomWidget()],
        ),
      ),
    );
  }
}
class MyCustomWidget extends StatefulWidget {
  const MyCustomWidget({Key? key}) : super(key: key);
@override
  State<MyCustomWidget> createState() => _MyCustomWidgetState();
}
class _MyCustomWidgetState extends State<MyCustomWidget> {
  Color _color = Colors.white;
  String _label = 'Unfocused';
@override
  Widget build(BuildContext context) {
    return Focus(
      onFocusChange: (bool focused) {
        setState(() {
          _color = focused ? Colors.black26 : Colors.white;
          _label = focused ? 'Focused' : 'Unfocused';
        });
      },
      child: Center(
        child: Container(
          width: 300,
          height: 50,
          alignment: Alignment.center,
          color: _color,
          child: Text(_label),
        ),
      ),
    );
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

static const String _title = 'Focus Sample';

@override

Widget build(BuildContext context) {

return MaterialApp(

title: _title,

home: Scaffold(

appBar: AppBar(title: const Text(_title)),

body: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: const <Widget>[MyCustomWidget(), MyCustomWidget()],

),

),

);

}

}

class MyCustomWidget extends StatefulWidget {

const MyCustomWidget({Key? key}) : super(key: key);

@override

State<MyCustomWidget> createState() => _MyCustomWidgetState();

}

class _MyCustomWidgetState extends State<MyCustomWidget> {

Color _color = Colors.white;

String _label = 'Unfocused';

@override

Widget build(BuildContext context) {

return Focus(

onFocusChange: (bool focused) {

setState(() {

_color = focused ? Colors.black26 : Colors.white;

_label = focused ? 'Focused' : 'Unfocused';

});

},

child: Center(

child: Container(

width: 300,

height: 50,

alignment: Alignment.center,

color: _color,

child: Text(_label),

),

),

);

}

}

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,
  );
}

1

2

3

4

5

6

7

8

@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(),
  );
}

1

2

3

4

5

6

7

8

9

10

11

@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.

Change Notification FocusWidget

onFocusChanged callback is used to listen to the focus changes, even if the change is for adding or removing widgets along with focus changes of course.

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);
      },
    ),
  );
}

1

2

3

4

5

6

7

8

9

10

11

12

@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.

Parveen Baghel 28 April 2023

. . .

Discuss on Helpdesk

Leave a Comment Cancel Reply

Be the first to comment.