📱 Responsiveness & Adaptivity Standards for Flutter

Core Standards

Responsive Design

1. Use flutter_screenutil for responsive sizing with .h and .w extensions
2. Use UI helper constants from ui_helper.dart for consistent spacing
3. Implement proper breakpoints for different screen sizes
4. Use flexible layouts with Expanded, Flexible, and responsive widgets

Adaptive Design

1. Use platform-specific widgets when needed (Cupertino vs Material)
2. Implement proper orientation handling for landscape and portrait
3. Use MediaQuery for screen size detection and adaptation
4. Implement proper keyboard handling for different screen sizes

Common Violations

❌ DO NOT Violate These Rules

1. Don't use hardcoded dimensions - Use flutter_screenutil for responsive sizing
2. Don't ignore different screen sizes - Always test on different devices
3. Don't use fixed spacing - Use UI helper constants from ui_helper.dart
4. Don't forget orientation changes - Handle landscape and portrait modes
5. Don't ignore keyboard appearance - Handle keyboard overlay properly
6. Don't use platform-specific widgets unnecessarily - Use adaptive widgets when possible

✅ ALWAYS Follow These Rules

1. Use flutter_screenutil with .h and .w extensions for responsive sizing
2. Use UI helper constants from ui_helper.dart for consistent spacing and padding
3. Implement proper breakpoints for different screen sizes (mobile, tablet, desktop)
4. Use flexible layouts with Expanded, Flexible, and responsive widgets
5. Handle orientation changes properly for landscape and portrait modes
6. Use MediaQuery for screen size detection and adaptive behavior
7. Implement proper keyboard handling for different screen sizes and orientations
8. Use adaptive widgets when platform-specific behavior is needed
9. Test on different devices to ensure proper responsiveness
10. Use proper responsive patterns for consistent user experience across devices