responsive_sizer 1.0.0

Responsive_sizer helps implement a reponsive layout

responsive_sizer

Responsive_sizer helps implement a reponsive layout. Inspired by

Installation

Add responsive_sizer to pubspec.yaml

dependencies:
  ...
  responsive_sizer: ^1.0.0

Parameters

• .h - Returns a calculated height depending on the device
• .w - Returns a calculated width depending on the device
• .sp - Returns a calculated sp depending on the device
• Device.boxConstraints - Returns the Device's BoxConstraints
• Device.orientation - Returns the Screen Orientation (portrait or landscape)
• Device.screenType - Returns the Screen Type (mobile or tablet)

Usage

Import the Package:

import 'package:responsive_sizer/responsive_sizer.dart';

Wrap MaterialApp with ResponsiveSizer widget:

ResponsiveSizer(
  child: MaterialApp()
)

Widget Size

Container(
  width: 20.w,    // This will take 20% of the screen's width
  height: 30.5.h     // This will take 30.5% of the screen's height
)

Font size

Text(
  'Responsive Sizer', 
  style: TextStyle(fontSize: 15.sp),
)

Orientation

If you want to support both portrait and landscape orientations

Device.orientation == Orientation.portrait
  ? Container(   // Widget for Portrait
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Landscape
      width: 100.w,
      height: 12.5.h,
   )

DeviceType 📱

If you want the same layout to look different in tablet and mobile then use Device.screenType method

Device.screenType

You can use it like this:

Device.screenType == ScreenType.tablet
  ? Container(   // Widget for Tablet
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Mobile
      width: 100.w,
      height: 12.5.h,
   )

Take Note

You need to import responsive_sizer package in order to access number.h or number.w

Auto import in VSCode and Android Studio doesn't work for dart extensions. Eg: Typing 10.h would not bring up auto import suggestion for this package

One workaround is to type Device so that the auto import suggestion for this package would show up:

import 'package:responsive_sizer/responsive_sizer.dart';

Community Support

If you have any suggestions or issues, feel free to open an issue

If you would like to contribute, feel free to create a PR