flutter_sizer 1.0.5 copy "flutter_sizer: ^1.0.5" to clipboard
flutter_sizer: ^1.0.5 copied to clipboard

Flutter Sizer helps implement a reponsive layout by providing helper widgets and extensions.

Flutter Sizer #

Flutter Sizer helps implement a responsive layout by providing helper widgets and extensions

Responsive Image

Responsive Image

Content #

Installation #

Add flutter_sizer to pubspec.yaml

dependencies:
  flutter_sizer: ^1.0.4
copied to clipboard

Parameters #

  • Adaptive.h() - Returns a calculated height based on the device
  • Adaptive.w() - Returns a calculated width based on the device
  • Adaptive.sp() - Returns a calculated sp based on the device (deprecated)
  • Adaptive.dp() - Returns a calculated dp based on the device
  • .h - Returns a calculated height based on the device
  • .w - Returns a calculated width based on the device
  • .sp - Returns a calculated sp based on the device (deprecated)
  • .dp - Returns a calculated dp based 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)
  • Device.devicePixelRatio - Returns the devicePixel Ratio or (1.0)

Usage #

Import the Package #

import 'package:flutter_sizer/flutter_sizer.dart';
copied to clipboard

Wrap MaterialApp with FlutterSizer widget #

 FlutterSizer(
      builder: (context, orientation, screenType) {
        return MaterialApp();
      }
 )
copied to clipboard

Widget Size #

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

Font size #

Text(
  'Flutter Sizer', 
  style: TextStyle(fontSize: 15.dp),
)
copied to clipboard

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

DeviceType #

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

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

Take Note #

You need to import flutter_sizer package in order to access number.h, number.w, and number.dp

Auto import in VSCode and Android Studio doesn't work for dart extension methods. 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 would show up:

import 'package:flutter_sizer/flutter_sizer.dart';
copied to clipboard

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

23
likes
150
points
1.1k
downloads

Publisher

unverified uploader

Weekly Downloads

2024.09.26 - 2025.04.10

Flutter Sizer helps implement a reponsive layout by providing helper widgets and extensions.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_sizer