Flutter UI

Flutter UI

Screen construction extracted from the existing Flutter and Flutter UX skills. Sources remain Flutter's documentation and official agent skills (docs.flutter.dev and flutter/agent-plugins), the owner's responsive sizing rules, FlutterPro tips by Kamran Bekirov, ApparenceKit tips and the separately selected flutter_scale_kit package. Topic files preserve their source tags, official corrections and conflicting community views.

Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]

Selected references

• For forms, focus, keyboards, navigation behavior, scrolling, press feedback, haptics or a whole-app UX review, select the corresponding flutter-ux route. [existing flutter-ux, SKILL.md]
• For screen-reader semantics, contrast, tap targets or large-text acceptance, read flutter ACCESSIBILITY.md. For localized UI and directional layout, read flutter LOCALIZATION.md. [existing flutter, ACCESSIBILITY.md and LOCALIZATION.md]
• For state, data, app routing, platform integration, testing or measured rendering cost, select the corresponding flutter route. Custom render objects remain in flutter-render-objects. [existing flutter, SKILL.md]
• For painting and media recipes, read flutter-ux PAINTING-AND-MEDIA.md; shared visual-design review remains in anti-slop-ui. [existing flutter-ux, SKILL.md]

The rules

1. Base every layout decision on the available window space, read with MediaQuery.sizeOf(context) or LayoutBuilder: never on hardware type ("phone" vs "tablet"), Platform.isAndroid or orientation, and never portrait-lock the app. [existing flutter, SKILL.md; LAYOUT-AND-RESPONSIVE.md]
2. Keep component measurements local and fonts and spacing in theme tokens. Follow the owner's intrinsic, fluid, component, page-skeleton and safe-area order in RESPONSIVE-UNITS.md. [Owner's rule, RESPONSIVE-UNITS.md]
3. Build themes from one palette, keeping the palette and default text theme separate; retain the official API corrections alongside ApparenceKit's examples. ApparenceKit, THEMING.md
4. Images hold their space and arrive calmly: size the box before load (AspectRatio or width and height; fit: doesn't count), show a plain grey box, fade in, and show a subtle broken-image icon on failure, never a technical message; precache the icons the first screen shows during the splash. FlutterPro, FlutterPro, FlutterPro
5. Keep animation identity and triggers explicit: key an AnimatedSwitcher child on the changing value and compare the specific changed field in didUpdateWidget before starting its controller. ApparenceKit, ApparenceKit
6. Keep the tagged alternatives visible. Scale-kit device classification and proportional sizing differ from Flutter and owner rules; animation timing and spring preferences also have source-specific alternatives. Apply the recorded choice rather than silently replacing the existing rule. SCALE-KIT.md, ANIMATION.md

Gotchas

• Device orientation and hardware class do not describe the space a component receives. Use the window or parent constraints for the selected layout. LAYOUT-AND-RESPONSIVE.md
• A plain AnimationController clamps spring overshoot; the retained spring recipe requires AnimationController.unbounded for a bouncy simulation. FlutterPro
• Flutter's ThemeExtension<T> and a Dart extension on BuildContext are different concepts despite the community example's shared name. THEMING.md

Prove it

Run the selected topic's checks for the UI changed and report what was actually verified. For responsive layout, use LAYOUT-AND-RESPONSIVE.md; for themes, images, widgets and motion, use each selected file's Prove it section. Accessibility and localization checks apply when those routes are selected. Whole-app UX reviews and unrelated app release checks are separate scopes. [existing flutter and flutter-ux, selected topic Prove it sections]