> Markdown version of [/videos/2087-no-touch-no-gestures-can-you-still-build-a-great-ux](https://www.wearedevelopers.com/videos/2087-no-touch-no-gestures-can-you-still-build-a-great-ux). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# No touch. No gestures. Can you still build a Great UX?

Flutter's default focus traversal ruins Smart TV apps. Stop relying on it. Master custom spatial grouping and FocusManager to build a flawless D-pad experience.

- **Speakers:** [Vadym Pinchuk](https://www.wearedevelopers.com/@vadym-pinchuk)
- **Event:** World Congress 2026 Europe - Virtual Stage
- **Published:** July 2, 2026
- **Duration:** 38:56
- **URL:** https://www.wearedevelopers.com/videos/2087-no-touch-no-gestures-can-you-still-build-a-great-ux

## Summary

Adapting a mobile Flutter application for the "10-foot experience" of modern Smart TVs presents unique user interface challenges, specifically the shift from touch gestures to remote control D-pad navigation. Out of the box, Flutter relies on a default reading-order traversal policy that struggles with the uneven architectural grids typical of media applications, often resulting in erratic, jumping focus behaviors. To resolve this unpredictability, developers must move beyond default implementations and take deliberate control over the spatial rendering of the layout.

Understanding Flutter's underlying focus architecture is critical to building a custom navigation experience. At the foundation, a single FocusManager orchestrates the viewport, tracking non-visual FocusNodes that are attached to the UI via Focus widgets. By leveraging tools like FocusableActionDetector for combined input handling and `debugDumpFocusTree()` for deep troubleshooting, developers can map exactly how focus traverses through the widget hierarchy.

Creating a seamless, predictable TV user experience relies on a divide-and-conquer strategy combining boundaries and custom grouping logic. By wrapping distinct interface zones—such as side navigation menus and main content grids—in a FocusScope, developers prevent focus from bleeding unpredictably between functional areas. This spatial isolation is then paired with a FocusTraversalGroup to define custom programming rules, calculating the exact spatial relationship of tiles to ensure precise up, down, left, and right movements. Finally, applying robust visual feedback through scale, brightness, and distinct frames during state changes ensures the active element is always immediately apparent to the user cross-platform.

**Keywords:** flutter focus system, tv user experience design, 10-foot experience layout, cross-platform flutter architecture, focusnode implementation, focusmanager singleton, focustraversalgroup custom policies, focusscope boundaries, focusableactiondetector, d-pad interface navigation, spatial traversal logic, debugdumpfocustree, visual focus accessibility, widget traversal debugging

## Chapters

1. **Identifying TV navigation challenges in cross-platform frameworks** (00:15) — Porting mobile configurations to television interfaces reveals unpredictable jump behaviors during standard D-pad interactions.
1. **Structuring terminology and focus states for accessibility** (06:17) — Defining layout components clarifies the essential role of clear focus indicators for assistive technologies and diverse device inputs.
1. **Designing layouts for the ten-foot television experience** (10:16) — Adjusting text sizing, contrast ratios, and structural elements prevents visual exhaustion for distant viewing.
1. **Managing node states with core focus widgets** (13:24) — Attaching change notifiers to visible items provides callbacks for triggering responsive interface expansions and brightness adjustments.
1. **Orchestrating viewport elements with the focus manager singleton** (17:28) — The singleton instance automatically scans screen regions to compile logical navigation trees and dictate primary selections.
1. **Segmenting layout traversal using bounding focus scopes** (22:22) — Dividing discrete interface zones isolates keyboard events and prevents selection cursors from escaping bounded interactive regions.
1. **Resolving uneven grids with custom traversal groups** (27:17) — Replacing default reading-order sorting structures ensures directional commands reliably locate visually adjacent coordinate positions.
1. **Implementing predictive multi-directional grid traversal policies** (31:08) — Filtering background nodes optimizes coordinate sorting arrays to accurately pinpoint immediately visible items during directional shifts.
1. **Scaling spatial focus management across disparate environments** (35:43) — Establishing clear scope divisions and explicit visual feedback guarantees functional input handling across varying monitor proximities.

## Related Moments

- [Designing graphical leanback UI library features for Android TV](https://www.wearedevelopers.com/videos/553-android-beyond-mobile-cars-tvs-and-wearables) (from "Android beyond mobile: Cars, TVs, and Wearables")
- [Designing linear reading order and keyboard focus indicators](https://www.wearedevelopers.com/videos/804-preventing-accessibility-issues-instead-of-fixing-them) (from "Preventing Accessibility Issues Instead Of Fixing Them")
- [Overcoming challenges in building accessible interfaces](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")
- [Audience questions on accessibility and framework tradeoffs](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [Introduction to Flutter and cross-platform UI development](https://www.wearedevelopers.com/videos/555-flutter-packages-and-plugins-a-look-under-the-hood) (from "Flutter Packages and Plugins - A Look Under the Hood")
- [Best practices for building scalable Flutter applications](https://www.wearedevelopers.com/videos/456-writing-truly-cross-plattform-applications-using-flutter) (from "Writing truly cross plattform applications using flutter")

## Related Articles

- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Basic And Advanced Networking in Dart and Flutter](https://www.wearedevelopers.com/magazine/112-basic-and-advanced-networking-in-dart-and-flutter)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [iOS Engineer, Swift/SwiftUI/Combine (B2C Broker)](https://www.wearedevelopers.com/jobs/ext/1611832-ios-engineer-swift-swiftui-combine-b2c-broker) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**