fixed_responsive 1.0.2

A mobile-first scaling extension that calculates sizes based on the shortest screen side, preventing layout breaks on rotation while scaling perfectly for tablets.

Fixed Responsive

A lightweight, professional mobile-first scaling extension for Flutter.

Unlike standard responsive packages that scale based on the current width of the screen, fixed_responsive scales based on the shortest side of the device.

This solves the most common layout bug in Flutter: Preventing layouts from exploding when users rotate their phones to landscape, while still scaling up perfectly for iPads, Tablets, and Desktop screens.

The Problem It Solves

If you use standard percentage-based widths (like MediaQuery.of(context).size.width or standard screen utilization packages), rotating a phone from Portrait to Landscape doubles the width of the screen. This causes your fonts, paddings, and buttons to become massively bloated.

fixed_responsive locks the mathematical scaling to the physical device type, not the orientation.

Installation

Add it to your pubspec.yaml:

dependencies:
  fixed_responsive: ^1.0.2

Or type this in the cmd :- flutter pub add fixed_responsive

Usage

Simply import the package and append .fw (Fixed Width) or .fsp (Fixed Scalable Pixels) to your numbers. It assumes a base design width of 390dp (standard modern smartphone). code

import 'package:fixed_responsive/fixed_responsive.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Padding scales cleanly on tablets, stays static on phone rotation
      padding: EdgeInsets.all(16.fw), 
      
      // Fixed height to prevent flex overflows
      height: 60.fw, 
      
      child: Text(
        'Responsive Typography',
        style: TextStyle(
          // Font size stays readable and proportioned
          fontSize: 18.fsp, 
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

When to use .fw vs .fsp

Use .fw for Margins, Paddings, Heights, Widths, and Border Radius . Use .fsp for Font Sizes and Icon Sizes.

(Under the hood, both use the same calculation, but separating them keeps your codebase semantic and easy to read for other developers).