responsive_flutter 0.0.4 copy "responsive_flutter: ^0.0.4" to clipboard
responsive_flutter: ^0.0.4 copied to clipboard

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

responsive_flutter #

PRs Welcome

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

18
likes
25
pub points
87%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_flutter