How do you sync UI state with the URL in Flutter Web?
TL;DR: Store shareable state (filters, pagination, selected item) in URL query parameters so they survive page refresh and can be bookmarked/shared. Sync by: (1) initializing providers from URL params on load, (2) updating the URL when state changes via context.go().
Full Answer
Web apps have a unique requirement: state should be URL-encoded. Filters, search queries, and page numbers in the URL bar mean users can share, bookmark, and refresh without losing context.
URL as Source of Truth
The URL is the source of truth for shareable state. On initial load: parse URL params → set provider state. On user action: update provider state → update URL. Always keep them in sync.
For non-shareable state (hover, scroll position, animation state), keep it in local widget state or provider. Only put state in the URL that has meaning when shared.
Code Examples
// URL: /questions?category=bloc&difficulty=3 // Refresh: filter state restored from URL // Share URL: recipient sees same filtered view
Common Mistakes
- ✗Storing filter state only in memory — lost on page refresh, not shareable
- ✗Not updating URL after state changes — URL and UI go out of sync
Interview Tip
URL-as-state is a key web paradigm. Walk through the full cycle: URL → parse → provider → UI render → user action → update provider → update URL. This shows you understand web-specific state management.