Preserve Tab State When Switching Between Tabs
Using Flutter's StatefulShellRoute, each tab branch maintains its own Navigator stack and widget state independently. A peer mentor who has typed a search query in the Contacts tab and then switches to the Add tab to begin registering an activity will find their Contacts search exactly as they left it when they switch back. This is particularly critical for field workers who frequently alternate between Contacts and Add during a single peer support session.
User Story
Acceptance Criteria
- Given the user has scrolled partway down a list in a tab, when they switch to another tab and return, then the scroll position is exactly where they left it
- Given the user has entered a search query in the Contacts tab, when they navigate to the Add tab and back, then the search query and filtered results are still visible
- Given the user has an in-progress multi-step wizard open in a tab (e.g., Add), when they switch to Notifications and return, then the wizard is still open at the same step with all entered data intact
- Given the user taps the Home tab icon while already on Home, when there is nested navigation within Home, then the Home stack is popped back to the root Home screen
- Given five concurrent tab branches are active, when the user rapidly switches between tabs, then each tab renders its preserved state without visible flicker or reload
Business Value
Tab state preservation directly prevents data loss for peer mentors working in the field, who frequently switch between looking up a contact's details and filling in an activity registration. Losing in-progress form data causes frustration and underreporting — the primary problem identified across all three organizations. This feature eliminates a key source of friction that causes users to abandon registrations mid-flow.
Components
- Navigation Shell Widget ui
- App Router Service service
- Navigation State Store data