responsive_flutter 0.0.4

Flutter Android iOS web

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

1
likes
85
pub points
59%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

work.layouni.slah@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_flutter