size_setter

Description:

size setter

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
Benefits #

It converts pixel sizes to percentages, utilizing the source device size as a reference
The result is layouts that seamlessly adapt to various devices.
Based on the device, convert your numerical numbers to percentages.
A streamlined solution for the Space between the widgets.


Installation ⬇️ #
Add to pubspec.yaml.
dependencies:
...
size_setter: ^1.0.8
copied to clipboard
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
.pHeightBox - 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';
copied to clipboard
Wrap MaterialApp with SizeSetter widget #
SizeSetter(
child:MaterialApp(),
)
copied to clipboard
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(),
)
copied to clipboard
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();
}

copied to clipboard
If you wish to configure the dimensions of your source device.
@override
void didChangeDependencies() {
SizeSetterUtils.setSourceDeviceSize(
context: context,sourceWidth: 300, sourceHeight: 700);

super.didChangeDependencies();
}

copied to clipboard
Widget Size 🕓 #
Container(
width: 20.pw, //It will take a 20% of screen width
height:30.ph //It will take a 30% of screen height
)
copied to clipboard
Covert your pixels into resposive size without MediaQueries #
SizedBox(
width: 200.w, //It will convert pixels into responsive percentage based on source device width
height:300.h //It will convert pixels into responsive percentage based on source device width
)
copied to clipboard
Gap between the widgets #

.pWidthBox - it returns a gap with a percentage of the screen width size


SizedBox(
width:MediaQuery.of(context).size.screenWidth*0.7
)
//or
70.pWidthBox
copied to clipboard

.pHeigthBox - it returns a gap with a percentage of the screen width size

SizedBox(
width:MediaQuery.of(context).size.screenHeight*0.7
)
//or
70.pHeightBox
copied to clipboard
.heightBox - it returns a gap with a dynamic size height, mainly used to make it responsive.

SizedBox(
height:200.h
)
//or
200.heightBox
copied to clipboard
.widthBox - it returns a gap with a dynamic size width, mainly used to make it responsive.
SizedBox(
width:200.w
)
//or
200.widthBox
copied to clipboard
Font size ✍️ #
sp stands for "scale-independent pixels". It is a relative unit that is independent of the screen's physical pixel density. This means that an sp value will be rendered at the same size on all screens, regardless of their pixel density.
px stands for "pixels". It is an absolute unit that refers to the actual number of pixels on the screen. This means that a px value will be rendered at a different size on screens with different pixel densities
Text(
'Hello World',style: TextStyle(fontSize: 15.sp),
);
//or
Text(
'Hello World',style: TextStyle(fontSize: 15.px),
);

copied to clipboard
Issue and feedback 💭 #
If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.