✨ UX Patterns & Best Practices Standards for Flutter

Core Standards

User Experience Requirements

1. Use FocusNode management for proper text field focus control
2. Implement SafeArea to avoid system UI overlaps on all pages
3. Hide keyboard when tapping outside input fields using GestureDetector
4. Use proper hints and labels for all input fields
5. Implement proper loading states with progress indicators
6. Use proper error states with clear error messages and recovery actions

Form & Input Patterns

1. Implement proper form validation with clear error messages
2. Use proper input decorations with hints and labels
3. Implement proper keyboard types for different input scenarios
4. Use proper text input actions for form navigation (next, done, search)
5. Implement proper auto-focus management for multi-field forms
6. Use proper input formatters for format-specific inputs

Navigation & Feedback Patterns

1. Use proper navigation transitions for smooth user experience
2. Implement proper back navigation handling with confirmation dialogs when needed
3. Use proper loading feedback for async operations
4. Implement proper success feedback for user actions
5. Use proper snackbars for non-intrusive notifications
6. Implement proper confirmation dialogs for destructive actions

Common Violations

❌ DO NOT Violate These Rules

1. Don't forget SafeArea - Always wrap content with SafeArea to avoid system UI overlaps
2. Don't ignore keyboard dismissal - Always hide keyboard when tapping outside input fields
3. Don't forget focus management - Always manage FocusNode lifecycle properly
4. Don't skip input hints - Always provide clear hints and labels for all inputs
5. Don't ignore loading states - Always show loading indicators for async operations
6. Don't forget error handling - Always provide clear error messages and recovery actions
7. Don't use inconsistent feedback - Always use consistent feedback patterns
8. Don't ignore form validation - Always validate inputs before submission
9. Don't forget confirmation dialogs - Always confirm destructive actions
10. Don't use confusing navigation - Always provide clear navigation patterns

✅ ALWAYS Follow These Rules

1. Use SafeArea on all pages to avoid system UI overlaps
2. Implement keyboard dismissal with GestureDetector on tap outside inputs
3. Manage FocusNode lifecycle properly with dispose methods
4. Provide clear hints and labels for all input fields
5. Show loading indicators for all async operations
6. Handle errors gracefully with clear messages and recovery options
7. Use consistent feedback patterns for similar actions
8. Validate form inputs before submission with clear error messages
9. Confirm destructive actions with proper dialog confirmation
10. Test keyboard behavior on different screen sizes and orientations
11. Use proper keyboard types for different input scenarios
12. Implement proper text input actions for form navigation
13. Handle auto-focus properly in multi-field forms
14. Use proper input formatters for format-specific inputs
15. Provide proper navigation feedback for all navigation actions