Focus in Flutter: Tree, Accessibility and Keyboard

Michael Lazebny

22 Jul 2024 — 6 min read

Focus is a key system in Flutter that manages which element is active and directs keyboard input accordingly. It also enables easy navigation between elements, ensuring smooth tab traversal for better accessibility. In this article we will understand how all these works together.

Focus Tree

Focus nodes form a tree that sparsely mirrors the widget tree, representing all elements that can receive focus.

Additionally, there is the FocusScopeNode, that manages a stack of focused children, where the topmost element (i.e. last item in the array) is currently focused one. FocusScopeNode is automatically created in the root of the tree and called rootScope.

Other nodes are added to the tree via Focus and FocusScope widgets accordingly. During instantiation, they attach their BuildContext to the node, so that the node can find the correct ancestor to be reparented to (see reparent). When the widget is disposed, it calls detach method that removes the node from the tree.

Focus Manager

Focus manager is responsible for managing the focus tree, with the following responsibilities:

Keeping track of the current primary focus
Holding the root scope of the focus tree
Distributing keyboard events among nodes

Sticky headers in Flutter

If you’ve landed here, you likely already know what sticky headers are. But if not, here’s a quick GIF to show you what will build today: Simple and efficient sticky headersSimple and efficient sticky headers. GitHub Gist: instantly share code, notes, and snippets.Gist262588213843476 Sticky headers are great

Navigation in Flutter

This article provides insights into how Navigator and router-based packages work but sticks to the essentials. Along the way, I’ve also shared my personal thoughts and ideas on implementing navigation in Flutter, along with my vision for how it all comes together in practice. Table of Contents 1. Navigator

Authentication in Flutter with Supabase (OAuth included)

I’ve been working on a Flutter app for a while and recently decided to add authentication. Setting it up correctly is challenging, especially when it comes to managing backend infrastructure and administration. So, there are several common approaches to implementing authentication, including: 1. Building a custom authentication service 2.

UI Components, Adaptive and Responsive Design

This is the continuation of a series of articles Crafting Perfect UI Kit, where we talk about implementing a UI kit for the Flutter application. So far we've talked about theme (colors, typography) and created a few components - text field and buttons. In this part, we will