Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.0.5

flutter_sizer

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

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
942
Likes
24
Pub points
150

Install package

flutter pub add flutter_sizer

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Flutter Sizer is a responsive UI package that enables adaptive layouts across different screen sizes and orientations. It provides helper widgets and extensions to easily scale fonts, sizes, and margins based on the device's screen dimensions. By leveraging the screen's width and height, it ensures consistent design appearance on various devices without manual calculations. Ideal for developers aiming to create fluid, scalable interfaces with minimal boilerplate code.

Use cases

  • Creating responsive layouts for multiple screen sizes
  • Scaling UI elements proportionally across devices
  • Simplifying responsive design in mobile and web apps
  • Maintaining consistent spacing and typography
  • Building cross-platform apps with uniform appearance
  • Reducing manual size calculations in UI code

Key features

  • Automatic scaling of widgets based on screen size
  • Helper extensions for easy unit conversion
  • Support for both portrait and landscape modes
  • Minimal setup with just a few lines of code
  • Cross-platform compatibility
  • Built-in support for Android, iOS, Web, macOS, Windows, and Linux

Suitable for

  • Developers building responsive Flutter applications
  • Teams prioritizing consistent UI across devices
  • Projects requiring quick implementation of responsive layouts
  • Apps targeting multiple platforms with varying screen sizes
  • Designers working closely with developers on pixel-perfect layouts
  • Beginners learning responsive Flutter patterns

Considerations

  • May require adjustments when using custom layout constraints
  • Not ideal for highly complex or non-uniform layouts
  • Potential performance impact with excessive widget nesting
  • Requires careful testing on diverse screen sizes
  • Best used with a consistent design system
  • Limited customization for advanced scaling logic

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

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';

Wrap MaterialApp with FlutterSizer widget

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

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
)

Font size

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

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

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';

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

Categories

Responsive UI

Source repository

Projects using this package

No data available yet.