resize

A Simple Responsive Design Approach for your Flutter Apps.

Installation

Add to pubspec.yaml.

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

How to use (Initial Works to be done)

Add the following import to your Dart code:

import 'package:resize/resize.dart';

  • 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
                ...
            );
        },
    );
  }
}

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

import 'package:resize/resize.dart';

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
    ...
);

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,
)
...

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 and vice versa
)
...

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
    ),
)

You can turn off scaling by setting allowtextScaling property in Resize().

...
return Resize(
    ...
    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 the device
    ),
)

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.
    ...
);

.r

.r will used when you are giving rounded edges.

Example

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

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

resize