implementing-responsive-layouts

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)

---

2. Implementing flutter_screenutil

Best for mathematically scaling a fixed design draft across different physical device sizes.

Setup (main.dart): Wrap the MaterialApp in ScreenUtilInit and provide the designSize from the design specs (Figma/AdobeXD).

Widget build(BuildContext context) {
  return ScreenUtilInit(
    designSize: const Size(375, 812), // The Figma draft size
    minTextAdapt: true,
    splitScreenMode: true,
    builder: (context, child) {
      return MaterialApp(
        // ...
      );
    },
  );
}

Usage Constraints:

• Width: Use .w (e.g., 100.w)
• Height: Use .h (e.g., 200.h)
• Square dimensions / Radius: Use .r (e.g., Radius.circular(16.r)) or 100.w for both width and height to prevent stretching. Do not use .h for width.
• Fonts: Use .sp (e.g., 16.sp). Note: sp changes with system accessibility font sizes.