responsive_size 0.0.7 responsive_size: ^0.0.7 copied to clipboard
A flutter package that helps create responsive screens
Responsive Size #
A package that helps create responsive UI in Flutter.
How to use #
Init ResponsiveSize in main.dart like so:
ResponsiveSize.init(designWidth: 414, designHeight: 896);
Import responsive_size to use it's extensions
import 'package:responsive_size/responsive_size.dart';
Then just call .w (width), .h (height), .sp (font-size):
return Container( width: 120.w, // 120 is the original design width height: 240.h, // 240 is the original design height child: Text( 'Hello world', style: TextStyle(fontSize: 12.sp), // 12 is the original design fontSize ), );
Or call getWidth (width), getHeight (height), getSp (font-size):
return Container( width: getWidth(120), // 120 is the original design width height: getHeight(240), // 240 is the original design height child: Text( 'Hello world', style: TextStyle(fontSize: getSp(12)), // 12 is the original design fontSize ), );
Or even just use blocks: widthBlock (width), heightBlock (height), spBlock (font-size)
return Container( width: widthBlock * 15, // widthBlock represent 1% of screenWidth height: heightBlock * 30, // heightBlock represent 1% of screenHeight child: Text( 'Hello world', style: TextStyle(fontSize: spBlock * 1.1), // spBlock represent 100% of defaultFontSize ), );
How to install #
Add responsive_size under your pubspec dependencies.
License #
This project is under MIT License.