Navigation
54 bites tagged Navigation — interview questions with model answers, and 60-second explainers.
How do you pass data between Fragments with Jetpack Navigation?
Tests knowledge of modern, type-safe argument passing. A good answer defines the argument in the nav graph XML, uses the Safe Args plugin to generate Directions/Args classes, navigates with the action, and retrieves the data in the destination via `by…
How to pass data between Fragments with Jetpack Navigation?
This tests your knowledge of type-safe argument passing in Jetpack Navigation. A good answer defines the argument in XML, uses the Safe Args plugin to generate code, passes data via the Directions class, and retrieves it with the Args class.
Tree Testing: Validate Your Site's Navigation Structure
Tree testing validates your site's navigation by asking users to find items in a text-only hierarchy. It's used to test a proposed information architecture before any UI is built. The footgun is confusing it with card sorting, which creates a structure.
Bottom Tab Navigator: Core Mobile Navigation
A Bottom Tab Navigator is the classic mobile UI for switching between top-level app sections. It lazily loads screens, mounting them only when first focused to save memory. Use it for primary navigation.
Native Stack Navigator: Native Performance, Less Customization
Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.
Nested Navigators: Building Complex UI Flows
Think of nested navigators as UI building blocks, placing one navigator (like tabs) inside a screen of another (a stack). This creates flows like a main tab bar inside a stack for modals.
Drawer Navigator: Your App's Slide-Out Main Menu
A Drawer Navigator is your app's slide-out 'hamburger' menu. Use it for primary navigation between distinct sections like Home, Profile, and Settings. A common footgun is misconfiguring `backBehavior`, leading to non-intuitive back button actions for users.
Stack Navigator: JavaScript-based Screen Transitions
Stack Navigator treats your screens like a stack of cards: push a new screen on top, pop it off to go back. It’s ideal for standard navigation flows, but its JavaScript-based implementation means you trade the performance of a native solution for…
NavigationPath (SwiftUI)
NavigationPath is a type erased stack of navigation destinations that backs a SwiftUI NavigationStack, letting one path hold a mix of different hashable data types so you can push, pop and control deep, heterogeneous navigation flows programmatically.
NavigationSplitView: Adaptive Layouts for All Screen Sizes
NavigationSplitView is a responsive container for multi-column layouts. It shows a sidebar, content, and detail view on large screens but collapses to a stack on small ones. Use it for master-detail UIs like a mail app.
NavigationLink: Pushing Views in SwiftUI
NavigationLink is SwiftUI's declarative way to push a new view onto a navigation stack. You use it inside a `NavigationStack` to create drill-down UIs, like tapping a list item to see its details. The footgun is forgetting the parent `NavigationStack`.
NavigationStack: Programmatic Navigation in SwiftUI
Think of NavigationStack as a pile of views. You push new views onto the stack programmatically by appending to a path array. This is SwiftUI's modern, data-driven way to handle deep navigation, replacing the older, buggier `NavigationView`.
UINavigationController: Stack-Based Screen Management
UINavigationController manages screens like a deck of cards: you push new ones on top and pop them off to go back. It's standard for hierarchical navigation. The footgun is manually changing the stack; always use the provided push/pop methods.
Flutter Nested Navigation: Routers Within Routers
Nested Navigation is like having a mini-app with its own back button inside a single screen. It's used for UIs like a BottomNavigationBar where each tab needs its own navigation history. The footgun is calling the wrong Navigator's context.
Flutter's onGenerateRoute for Dynamic Routes
onGenerateRoute is Flutter's central switchboard for creating routes on the fly, especially when they need data. Use it to pass arguments to new screens or handle routes not statically defined in the `routes` map.
Deep Linking: URLs for Your App's Screens
Deep linking gives your app screens their own URLs, letting users jump directly to specific content from outside the app. Use it for email marketing, sharing content, or push notifications.
NavigatorObserver: Listening to Route Changes in Flutter
A NavigatorObserver acts like a flight traffic controller for your app's screens, letting you react to navigation events like `push` and `pop`. It's used for analytics or updating UI based on the current route.
PopScope: Guarding Your Flutter Routes
PopScope acts as a gatekeeper for back navigation in Flutter, letting you intercept and block attempts to leave a screen. Use it to show a confirmation dialog for unsaved changes. Its behavior differs on iOS; the swipe-back gesture won't trigger its callback.
PageRouteBuilder: Custom Routes Without the Boilerplate
PageRouteBuilder creates a custom page route on the fly, skipping the boilerplate of a full subclass. Just provide a `pageBuilder` for the screen's content and a `transitionsBuilder` for a unique animation.
Flutter Hero Animations: Guiding the User's Eye
A Hero animation makes a widget appear to fly from one screen to another, connecting two UIs. It's perfect for transitioning a thumbnail to a detail page, guiding the user's focus. The main footgun is using non-unique tags, which causes animations to fail.
Flutter's Router API: Declarative Navigation
The Router API treats navigation as state. You declare the page stack based on app state, giving you full control over URLs and the back button. This is vital for web/desktop apps but introduces significant boilerplate compared to simple push/pop navigation.
GoRouter: URL-Based Navigation for Flutter Apps
GoRouter treats your app's screens like web pages with URLs. This declarative approach simplifies deep linking and passing data via paths like `/users/123`. The footgun is forgetting its declarative nature and trying to manage state imperatively.
Flutter Named Routes: Navigate with Strings, Not Widgets
Think of named routes as URL paths for your app's screens. Instead of building a screen widget on the spot, you just tell Flutter "go to '/profile'". This is ideal for centralizing navigation in large apps and for enabling deep linking.
Imperative Navigation: Pushing and Popping Screens
Think of app screens as a stack of cards. You `push` a new screen onto the top to show it and `pop` it off to go back. It's ideal for linear flows like list-to-detail. The footgun: popping the last screen closes the app.
Get Navigation bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.