State ManagementAdvanced50 XP4 min read
How do you separate UI state from domain state?
TL;DR: UI state is screen-specific (loading spinners, form validation, selected tab). Domain state represents business data (user, orders, products). Keep them in separate models/providers to avoid coupling.
Full Answer
Mixing UI and domain concerns in one state class leads to tight coupling and hard-to-test code.
| Aspect | UI State | Domain State |
|---|---|---|
| Examples | isLoading, errorMessage, selectedIndex | User profile, cart items, product list |
| Scope | Screen or feature | App-wide or repository |
| Layer | Presentation layer | Domain/data layer |
| Testing | Widget tests | Unit tests without Flutter |
🎯
A good heuristic: domain state would exist even if you replaced Flutter with a command-line app. UI state only exists because of the GUI.
Code Examples
dartSeparate UI and domain state
Output
UI state (isLoading, errorMessage) lives in LoginNotifier; domain state (User) lives in UserRepository
Common Mistakes
- ✗Putting User object directly in screen state — creates coupling between UI and domain layers
- ✗Handling navigation in the state class — navigation is a UI concern
Interview Tip
💡
This answer shows you understand Clean Architecture applied to Flutter — a strong differentiator for senior roles.
#UI-state#domain-state#architecture#separation-of-concerns