Size Setter #

Unlocking design adaptability, the size_setter package for Flutter elegantly recalibrates pixels into responsive percentages, revolutionizing cross-device aesthetics with minimal effort. To learn more about this, please visit the following article size_setter

Why Behind Using the size_setter Package #

• It converts pixel sizes to percentages, utilizing the source device width as a reference
• The result is layouts that seamlessly adapt to various devices.
• Based on the device, convert your numerical numbers to percentages.
• Calculate your screen status bar sizes based on devices in a simple manner.

Installation ⬇️ #

Add to pubspec.yaml.

dependencies:
  ...
  size_setter: ^1.0.0

Parameters #

• .h - It Converts pixels into dynamic percentage based on source device height
• .w - It Converts pixels into dynamic percentage based on source device width
• .ph - Returns a percentage value of screen height
• .pw - Returns a percentage value of screen width
• .px - Returns a calculated pixel based on the device for fonts
• .sp - Returns a calculated sp based on the device for fonts
• .heightBox - Returns a calculated SizedBox with height
• .widthBox - Returns a calculated SizedBox with width
• .pWidthBox - Returns a calculated SizedBox with percentage of screenSize Width
• .pWeightBox - Returns a calculated SizedBox with percentage of screenSize Height

Usage 💻 #

Add the following import to your Dart code: #

import 'package:size_setter/size_setter.dart';

Wrap MaterialApp with size_setter widget #

SizeSetter(
      child:MaterialApp(),     
 )

If you're developing your application using designs created in tools like Figma,Convert your pixels into percenage based on source device size, #

The default source device is iphone14 pro max , device width is 430 px and height 932 px.

If your source device is different add size in size_setter

SizeSetter(
    sourcewidth:430,
    sourceheight:840,
      child:MaterialApp(),   
 )

If you prefer not to wrap your MaterialApp in SizeSetter, you can follow these instructions. #

Convert Your MaterialApp to StateFul Widget Add following code

 @override
  void didChangeDependencies() {
   SizeSetterUtils.setSourceDeviceSize(
        context: context,);

    super.didChangeDependencies();
  }

If You want to setup your souce device size

 @override
  void didChangeDependencies() {
    SizerUtils.setSourceDeviceSize(
        context: context,sourceWidth: 300,  sourceHeight: 700);

    super.didChangeDependencies();
  }

Widget Size 🕓 #

    Container(
      width: 20.w,    //It will take a 20% of screen width
      height:30.h     //It will take a 30% of screen height
    )

what if you have pixels and how to calculate percentage #

SizedBox(
      width: 200.pw,    //It will convert pixels into adaptive percentage based on source device width
      height:30.ph     //It will convert pixels into adaptive percentage based on source device width
    )

Font size #

    Text(
      'Hello World',style: TextStyle(fontSize: 15.sp),
    );
    //or
Text(
      'Hello World',style: TextStyle(fontSize: 15.px),
    );