sizer_pro

Description:

sizer pro

sizer_pro #





sizer_pro is helps you to create responsive UI easily.





A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.


Content #

For Existing User
Installation
Parameters
Suggestion
Note



Existing User #
Dart 3.0 Users #
Hello Existing users, I have updated the package for supporting Flutter 3.10.0 in alpha versions and Kindly Update your repo to latest SDK for Support.

Dart 2.0 Users #
We still provide Support for Lower version compatibilities and You can continue using the Stable versions without any lag.

Installation ⬇️ #
Add to pubspec.yaml.
dependencies:
...
sizer_pro: ^2.1.2
copied to clipboard
Parameters ⚙️ #

.h - Returns a calculated height based on the device
.w - Returns a calculated width based on the device
.sp - Returns a calculated sp based on the device
.f - Returns a calculated font based on the device
SizerUtil.orientation - for screen orientation portrait or landscape
SizerUtil.deviceType - for device type mobile or tablet

Usage 💻 #
Add the following imports to your Dart code: #
import 'package:sizer_pro/sizer.dart';
copied to clipboard
Wrap MaterialApp with Sizer widget #
Sizer(
builder: (context, orientation, deviceType) {
return MaterialApp();
}
)
copied to clipboard
Whenever you use height and width first import sizer package.
import 'package:sizer_pro/sizer.dart';
copied to clipboard
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
)
copied to clipboard
Padding ⏹ #
Padding(
padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
child: Container(),
);
copied to clipboard
Font size 🆎 #
Text(
'Sizer',style: TextStyle(fontSize: 15.f),
);
copied to clipboard
Icon size 💡 #
Icon(
Icons.home,size: 12.f,
);
copied to clipboard
Square Widget 🟩 #
If you want to make square size widget then give height or width in both height and width.
Container(
width: 30.h, //It will take a 30% of screen height
height: 30.h, //It will take a 30% of screen height
);
copied to clipboard
Orientation 🔄 #
If you want to support both portrait and landscape orientations
Device.orientation == Orientation.portrait
? Container( // Widget for Portrait
width: 100.w,
height: 20.5.h,
)
: Container( // Widget for Landscape
width: 100.w,
height: 12.5.h,
)
copied to clipboard
DeviceType 📱 #
If you want the same layout to look different in tablet and mobile, use the SizerUtil.deviceType method:
SizerUtil.deviceType == DeviceType.mobile
? Container( // Widget for Mobile
width: 100.w,
height: 20.5.h,
)
: Container( // Widget for Tablet
width: 100.w,
height: 12.5.h,
)
copied to clipboard
Suggestion #
Orientation
If you want to give support for both portrait and landscape then make separate widget for both like orientation example.
DeviceType
If you want to give support for both mobile and tablet then make separate widget for both like deviceType example.
Note #
You need to import sizer package in order to access number.h, number.w,number.f, and number.sp
Auto import in VSCode and Android Studio doesn't work for dart extension methods. Typing 10.h would not bring up auto import suggestion for this package
One workaround is to type Device so that the auto import suggestion would show up:
import 'package:sizer_pro/sizer.dart';
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.
Contributing #
Contributions are welcome, please submit a PR :)