Priority: P0 (CRITICAL)
Guidelines
- Touch Targets: Min 44x44pt (iOS) / 48x48dp (Android). Add padding if needed.
- Safe Areas: Wrap content in
SafeArea/WindowInsets. Avoid notches. - Interactions: Use active states (no hover). Haptic feedback (short).
- Typography: Min 16sp body. Line height 1.5x.
- Keyboards: Auto-scroll inputs. Set
InputType(email/number) &Action.
Code Examples
- Correct:
IconButton(icon: Icon(Icons.close), padding: EdgeInsets.all(12)) - Avoid:
Icon(Icons.close, size: 16)(Touch target too small)
Review Workflow
- Test the smallest interactive element against 44pt iOS / 48dp Android.
- Test content, keyboard, and fixed actions with notch/home-indicator/window insets.
- Check pressed, loading, error, and disabled states; do not port desktop hover behavior.
- Verify platform conventions separately before calling the screen complete.
Anti-Patterns
- No Hover Effects: Mobile no cursor; use pressed/active states instead
- No Tiny Targets: All clickable elements must ≥44pt
- No Fixed Bottoms: Always account for Home Indicator and Keyboard safe areas
- No OS Mixing: Respect Material (Android) and Cupertino (iOS) conventions separately
Related Topics
mobile-accessibility | mobile-performance | flutter-design-system | react-native-dls