scaled_size 0.5.0 copy "scaled_size: ^0.5.0" to clipboard
scaled_size: ^0.5.0 copied to clipboard

A Simple Responsive Design Approach for your Flutter Apps. Includes all the necessary things to design a responsive User Interface for your Apps.

scaled_size #

A Simple Responsive Design Approach for your Flutter Apps.

Installation #

Add to pubspec.yaml.

dependencies:
  ...
  scaled_size: ${latest-version}
  ...

How to use (Initial Works to be done) #

Add the following import to your Dart code:

import 'package:scaled_size/scaled_size.dart';
  • First you need to Initialize the Helper Widget in your main.dart.

  • Call ScaledSize() before using any widgets.

  • That's all you're good to go. Just call the parameters, rest will be managed by the package.

import 'package:flutter/material.dart';
import 'package:scaled_size/scaled_size.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaledSize(
        builder: () {
            return MaterialApp(
                //Your code goes here
                ...
            );
        },
    );
  }
}

Note: Whenever you use anything related to this package. Don't forget to import the package.

import 'package:scaled_size/scaled_size.dart';

Designing size #

By default designing size will be set to Size(360, 640). You can overwrite it by passing size in ScaledSize()

return ScaledSize(
    ...
    size: Size(480, 600), // For Example
    ...
);

Key Params #

  • .rh - Responsive Height
  • .rw - Responsive Width
  • .vh - Height measured in percentage of screen height (As like in css)
  • .vw - Height measured in percentage of screen width (As like in css)
  • .mv - Maximum ViewPort size of the device
  • .rem - Font Size (As like in css). Default base set to 16.0
  • .rfs - Responsive font size
  • .br - Radius for curved borders[border radius value]

Other Params #

  • ScaledSizeUtil.orientation - Gives the orientation of the device.
  • ScaledSizeUtil.deviceType - Gives the type as Mobile or Tablet.
  • ScaledSizeUtil.screenHeight - Gives the height of the device.
  • ScaledSizeUtil.screenWidth - Gives the width of the device.

Supported deviceTypes = Mobile, Tablet, Web, Windows, Mac, Linux, Fuchsia


Responsive Height and Width #

Using .rh and .rw, let you to create adaptive widgets that suits on every device.

Example #

...
Container(
    // End result will be similar in every device
    height: 100.rh,
    width: 100.rw,
)
...

ViewHeight and ViewWidth #

By using .vh and .vw, you can refer to the size of the screen and create widgets that are certain % of the screen size.

Example #

...
Container(
    height: 20.vh, // 20% of the screen height
    width: 50.vw, // 50% of the screen width
)
...

Max ViewPort #

By using .mv, you can get the maximum viewport size of the device. Internally .mv is max(.vh, .vw)

...
Container(
    height: 10.mv,
    // If 10.vh is greater than 10.vw,
    // then 10.mv is 10.vh else 10.mv is 10.vw
)
...

Font Size #

You can create scalable font sizes[scaledFontSize] using .rfs and by using .rem you can create font size as like in css.

.rfs #

.rfs will act as a scalable font size[scaledFontSize].

Text(
    "Your Text",
    style: TextStyle(
        fontSize: 24.rfs, // will scale according to the device
    ),
)

You can turn off scaling by setting allowTextScaling property in ScaledSize().

...
return ScaledSize(
    ...
    allowTextScaling: false,
    ...
);

.rem #

.rem will works as like in rem of css. By default the base size is set to 16.0 and can be overwritten.

Text(
    "Your Text",
    style: TextStyle(
        fontSize: 1.2.rem, // will scale according to base font size(16)
    ),
)

You can change the base size property in ScaledSize().

...
return ScaledSize(
    ...
    baseForREM: <your value>, // will be referrenced when you use rem.
    // If set to 32. 1.25.rem will return 40.
    ...
);

.br #

.br will used when you are giving rounded edges[border radius].

Example #

...
borderRadius: BorderRadius.circular(30.0.br),
...

Issue / Feedback #

If you have any suggestion or if something doesn't work, feel free to open a Github issue to have further discussions.

1
likes
130
pub points
63%
popularity

Publisher

unverified uploader

A Simple Responsive Design Approach for your Flutter Apps. Includes all the necessary things to design a responsive User Interface for your Apps.

Repository

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, universal_io

More

Packages that depend on scaled_size