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 bordersborder 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 sizesscaledFontSize using .rfs and by using .rem you can create font size as like in css.

.rfs

.rfs will act as a scalable font sizescaledFontSize.

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 edgesborder 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.

Libraries

scaled_size