GitLocker: The Coding Marketplace

Description:

resize

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

First you need to Initialize the Helper Widget in your main.dart.

Call Resize() 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:resize/resize.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Resize(
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:resize/resize.dart';
copied to clipboard
Designing size #
By default designing size will be set to Size(360, 690). You can overwrite it by passing size in Resize()
return Resize(
...
size: Size(480, 600), // For Example
...
);
copied to clipboard
Key Params #

.h - Responsive Height
.w - 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
.sp - Responsive Font Size
.r - Radius for curved borders

Other Params #

ResizeUtil().orientation - Gives the orientation of the device.
ResizeUtil().deviceType - Gives the type as Mobile or Tablet.
ResizeUtil().screenHeight - Gives the height of the device.
ResizeUtil().screenWidth - Gives the width of the device.

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

Responsive Height and Width #
Using .h and .w, let you to create adaptive widgets that suits on every device.
Example #
...
Container(
// End result will be similar in every device
height: 100.h,
width: 100.w,
)
...
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 and vice versa
)
...
copied to clipboard

Font Size #
You can create scalable font sizes using .sp and by using .rem you can create font size as like in css.
.sp #
.sp will act as a scalable font size.
Text(
"Your Text",
style: TextStyle(
fontSize: 24.sp, // will scale according to the device
),
)
copied to clipboard
You can turn off scaling by setting allowtextScaling property in Resize().
...
return Resize(
...
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 the device
),
)
copied to clipboard
You can change the base size property in Resize().
...
return Resize(
...
baseForREM: <your value>, // will be referrenced when you use rem.
// If set to 32. 1.25.rem will return 40.
...
);
copied to clipboard

.r #
.r will used when you are giving rounded edges.
Example #
...
borderRadius: BorderRadius.circular(30.0.r),
...
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.