responsive_flutter

Description:

responsive flutter

responsive_flutter #

A Flutter package for scaling the size your apps UI and fontSize across different sized devices, insipired from react-native-size-matters and react-native-responsive-dimensions
Installation #
You just need to add responsive_flutter as a dependency in your pubspec.yaml file.
dependencies:
responsive_flutter: ^0.0.4
copied to clipboard
Usage #

// Inside build function to pass context

@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
width: ResponsiveFlutter.of(context).scale(120),
height: ResponsiveFlutter.of(context).verticalScale(100),
padding: EdgeInsets.all(ResponsiveFlutter.of(context).moderateScale(8)),
child: Text("Responsive flutter",
style: TextStyle(fontSize: ResponsiveFlutter.of(context).fontSize(3))));
}

copied to clipboard
Functions #


wp(double percentage)
Will return the percentage of the screen's width.
// Example 20% of screen's width
ResponsiveFlutter.of(context).wp(20)
copied to clipboard


hp(double percentage)
Will return the percentage of the screen's height.
// Example 20% of screen's height
ResponsiveFlutter.of(context).hp(20)
copied to clipboard


fontSize(double size)
Will return fontSize that occupies exactly size% of the screen size.


scale(double size)
Will return linear scaled result of the provided size, based on your device's screen width.


verticalScale(double size)
Will return linear scaled result of the provided size, based on your device's screen height.


moderateScale(double size, [double factor])
Sometimes you don't want to scale everything in a linear manner, that's where moderate scale comes in.
The cool thing about it is that you can control the resize factor (default is 0.5).
If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
➡️ scale(10) = 20
➡️ moderateScale(10) = 15
➡️ moderateScale(10, 0.1) = 11