scaled_size

Description:

scaled size

scaled_size #
A Simple Responsive Design Approach for your Flutter Apps.
Installation #
Add to pubspec.yaml.
dependencies:
...
scaled_size: ${latest-version}
...
copied to clipboard
How to use (Initial Works to be done) #
Add the following import to your Dart code:
import 'package:scaled_size/scaled_size.dart';
copied to clipboard


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
...
);
},
);
}
}
copied to clipboard

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

import 'package:scaled_size/scaled_size.dart';
copied to clipboard
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
...
);
copied to clipboard
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,
)
...
copied to clipboard

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
)
...
copied to clipboard

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
)
...
copied to clipboard

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
),
)
copied to clipboard
You can turn off scaling by setting allowTextScaling property in ScaledSize().
...
return ScaledSize(
...
allowTextScaling: false,
...
);
copied to clipboard
.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)
),
)
copied to clipboard
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.
...
);
copied to clipboard

.br #
.br will used when you are giving rounded edges[border radius].
Example #
...
borderRadius: BorderRadius.circular(30.0.br),
...
copied to clipboard

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