fahmi277 / responsive_flutter

A Flutter package for scaling the size your apps UI and fontSize across different sized devices

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

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))));
  }

Functions

• wp(double percentage)
  Will return the percentage of the screen's width.

  // Example 20% of screen's width
  ResponsiveFlutter.of(context).wp(20)

• hp(double percentage)
  Will return the percentage of the screen's height.

  // Example 20% of screen's height
  ResponsiveFlutter.of(context).hp(20)

• 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