Flutter Responsive Implementations (v5.9.x / v3.1.x / v1.1.x)

Goal

Implement layout adaptability and responsive UI across varying device screens. This skill provides a decision matrix to choose the right responsiveness package and strict instructions on how to use flutter_screenutil, sizer, and responsive_framework natively.

Instructions

1. Package Decision Matrix

Before writing layout code, strictly evaluate the project's target platforms and design requirements to select the appropriate library:

• Scenario A (Strict Mobile UI Replication): The project targets only iOS/Android, and the designers have provided a strict Figma draft (e.g., 375x812) that must look exactly proportional on all phones (mini to pro max).
  • Decision: Use flutter_screenutil. (Math-based density scaling)
• Scenario B (Percentage-based Mobile UI): The project targets mobile, but layout is dictated by percentage of screen real estate rather than fixed Figma pixels.
  • Decision: Use sizer. (Percentage-based viewport scaling)
• Scenario C (True Cross-Platform / Web / Desktop): The project spans Mobile, Tablet, Web, and Desktop. UI components must fundamentally change their structure (e.g. BottomNav -> SideRail) based on available space, rather than just zooming in.
  • Decision: Use responsive_framework. (Breakpoint-based rendering)