Responsive Design Mastery for Flutter: Media Query and Scaling Configuration

Discover the ultimate solution for Flutter app development with our streamlined and dependency-free toolkit. Seamlessly resize your app's UI with precision, ensuring optimal performance on a myriad of devices. Our comprehensive media query and scaling configuration empower you to effortlessly create a consistent and seamless user experience across diverse screen sizes. Elevate your Flutter applications to the next level with this indispensable tool for responsive design.

Screenshots

Left one without this package
Right one with this package

Web

Mobile

iPad

Usage

import 'package:flutter/material.dart';
import 'package:flutter_size_matters/flutter_size_matters.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    ScallingConfig().init(context);
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!',style: TextStyle(fontSize: ScallingConfig.moderateScale(14)),),
        ),
      ),
    );
  }
}

Others Functions

Function	Type	Description
scale	`func`	Method for scaling a given size based on the shorter dimension of the screen and the guidelineBaseWidth
verticalScale	`func`	Method for scaling a given size based on the longer dimension of the screen and the guidelineBaseHeight
moderateScale	`func`	Method that applies a moderate scaling factor to a given size, considering both width and height
moderateScaleVertical	`func`	Method that applies a moderate scaling factor to a given size, considering only the height.

Additional information

This package will support Windows, macOS, Linux, Android, iOS, and all modern browsers.