A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Related tags

UI Sizer
Overview

sizer

Sizer is helps you to create responsive UI easily.


A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Alt Text

Alt Text

Content

Existing User

Hello Existing users, I have updated the package for supporting Flutter 2.0 and solving many bugs then Whenever you update 1.x.x to 2.x.x will be got many errors so please update the package with the new below code.

Installation ⬇️

Add to pubspec.yaml.

dependencies:
  ...
  sizer: ^2.0.14

Parameters ⚙️

  • .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
  • SizerUtil.orientation - for screen orientation portrait or landscape
  • SizerUtil.deviceType - for device type mobile or tablet

Usage 💻

Add the following imports to your Dart code:

import 'package:sizer/sizer.dart';

Wrap MaterialApp with ResponsiveSizer widget

ResponsiveSizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp();
      }
 )

Whenever you use height and width first import sizer package.

import 'package:sizer/sizer.dart';

Widget Size 🕓

    Container(
      width: 20.w,    //It will take a 20% of screen width
      height:30.h     //It will take a 30% of screen height
    )

Padding

    Padding(
      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
      child: Container(),
    );

Font size 🆎

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

Square Widget 🟩

If you want to make square size widget then give height or width in both height and width.

    Container(
            width: 30.h,      //It will take a 30% of screen height
            height: 30.h,     //It will take a 30% of screen height
    );

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 SizerUtil.deviceType method:

SizerUtil.deviceType == DeviceType.mobile
  ? Container(   // Widget for Mobile
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Tablet
      width: 100.w,
      height: 12.5.h,
   )

Suggestion

Orientation

If you want to give support for both portrait and landscape then make separate widget for both like orientation example.

DeviceType

If you want to give support for both mobile and tablet then make separate widget for both like deviceType example.

Note

You need to import sizer package in order to access number.h, number.w, and number.sp

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:sizer/sizer.dart';

Issue and feedback 💭

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.

Comments
  • method 'ResponsiveSizer' isn't defined for the class

    method 'ResponsiveSizer' isn't defined for the class

    Even after importing sizer. dart I am not able to access the ResponsiveSizer. In Pubspec.yaml

    `dependencies: flutter: sdk: flutter

    cupertino_icons: ^1.0.3 sizer: ^2.0.13`

    Error: Try correcting the name to the name of an existing method, or defining a method named 'ResponsiveSizer'. return ResponsiveSizer( ^^^^^^^^^^^^^^^

    opened by ghost 4
  • The method '*' was called on null.

    The method '*' was called on null.

    Implemented sizer: ^1.1.8 but getting error when I set it as following:

    SizedBox(height: 20.0.h),

    Error:

    ======== Exception caught by widgets library =======================================================
    The following NoSuchMethodError was thrown building LoginWithSet(dirty, dependencies: [_FocusMarker, MediaQuery, _InheritedTheme, _LocalizationsScope-[GlobalKey#39772]], state: _LoginWithSetState#2e207):
    The method '*' was called on null.
    Receiver: null
    Tried calling: *(20.0)
    
    The relevant error-causing widget was: 
      
    When the exception was thrown, this was the stack: 
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
    #1      SizerUtil.height (package:sizer/sizer_util.dart:32:20)
    #2      SizerExt.h (package:sizer/sizer_ext.dart:7:29)
    #3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4744:28)
    ...
    
    
    
    opened by pratikbutani 4
  • Failed to run - dependency issues

    Failed to run - dependency issues

    Because no versions of freezed match >0.11.6 <0.12.0 and freezed >=0.1.2 <0.11.6 depends on analyzer ^0.39.4, freezed >=0.1.2 <0.11.6-∞ or >0.11.6 <0.12.0 requires analyzer ^0.39.4.
    And because analyzer >=0.32.4 <0.39.5 depends on crypto >=1.1.1 <3.0.0, freezed >=0.1.2 <0.11.6-∞ or >0.11.6 <0.12.0 requires crypto >=1.1.1 <3.0.0 or analyzer ^0.39.5.
    And because freezed 0.11.6 depends on analyzer ^0.39.5 which depends on crypto ^2.0.0, freezed >=0.1.2 <0.12.0 requires crypto >=1.1.1 <3.0.0.
    And because sizer >=2.0.11 depends on universal_io ^2.0.4 which depends on crypto ^3.0.0, freezed >=0.1.2 <0.12.0 is incompatible with sizer >=2.0.11.
    So, because XXXX depends on both sizer ^2.0.12 and freezed ^0.11.2, version solving failed.
    Running "flutter pub get" in XXXX...
    pub get failed (1; So, because XXXX depends on both sizer ^2.0.12 and freezed ^0.11.2, version solving failed.)
    

    Can you please fix it?

    opened by calvintam236 3
  • Package does not support web

    Package does not support web

    Hello, I have tried using this package for web development using Flutter but it throws an error.

    Code that causes an error:

    ` import 'package:sizer/sizer.dart';

    // NavBar constants double navbarVerticalMargin = 5.0.h; `

    Screenshot (2549)

    Can you please consider adding web and desktop support for this package? For mobile app development, this is a very useful package. Thanks.

    opened by cankush625 2
  • Can you also put it for int?

    Can you also put it for int?

    I was using it but I got tired of always having to write 18.0.sp if for example I wanted that font size, it is a bit cumbersome, since we normally use round sizes, and although if it must be in double for those cases where we need to be specific, I I would like you to put it also for int, since it would be much more comfortable. Otherwise it works very well, it is a very good job and I thank you.

    hgfdrth

    opened by titoworlddev 2
  • React to changes of the operating system font size

    React to changes of the operating system font size

    The sizer font size function does not react to the font size of the underlying operating system.

    When I increase my system font size, the text is not displayed properly. I guess the sp- function needs to interact with MediaQuery.textScaleFactorOf(context) or something like this.

    opened by patgdev 2
  • Maybe readme typo errors?

    Maybe readme typo errors?

    Hi,

    in the readme file there is this example:

    Container(
          width: 20.0.w,    //It will take a 20% of screen width
          height:30.0.h     //It will take a 20% of screen height
        )
    

    maybe there is a typo error and comment for height: 30.0.h should be It will take a 30% of screen height?

    Another question, TextStyle(fontSize: 15.0.sp), 15.0.sp is always a percentile of screen width or height?

    Thanks!

    opened by Pistacchione 2
  • Different values on the same page?

    Different values on the same page?

    Hi, I use the library to calculate my header size. I use 24.h which is equal to 193 pixels. but when I navigate to a different page and then come back to the old page, 24.h equals 160 pixels, and the header size changes. Why is that? I found out that opening and closing the keyboard fixes that issue and the value returns to 193 pixels

    opened by itaishalom 1
  • In landscape mode, DeviceType is wrong.

    In landscape mode, DeviceType is wrong.

    My environment is iOS 14.5 Xs simulator. Flutter version is 2.5.3. DeviceType is set to .tablet.

    I think that swapping the size dimensions when the orientation is landscape is causing this bug.

    opened by amukater 1
  • Feature Request : Add DeviceType android, iOS

    Feature Request : Add DeviceType android, iOS

    Hi,

    I would recommend to add a DeviceType for android and iOS.

    With that it would be easier to check device, instead of adding another library to my application project and write own check functionality.

    opened by AMuellerAtAHS 1
  • ScreenType has been replaced by DeviceType

    ScreenType has been replaced by DeviceType

    I may be wrong but ScreenType has been replaced by DeviceType. This change is not reflected on the README, on pub.dev, or anywhere for that matter.

    I can do a PR if you can't update the documentation at the moment.

    opened by SSebigo 1
  • Font size problem

    Font size problem

    Hello, I'm having a problem with the font size when I use .sp and I increase the width of the screen. The font gets bigger until its text becomes hidden.. What do I do?

    opened by manarbajafar 0
  • LateError (LateInitializationError: Field 'width' has not been initialized.)

    LateError (LateInitializationError: Field 'width' has not been initialized.)

    hello devs ,I just had add to sizer to my project and I use it in my code and when I run I face this issue Flutter 3.3.4 • channel stable • https://github.com/flutter/flutter.git sizer: ^2.0.15 version

    opened by Abolfazl-MI 3
  • Blank White Page with GetMaterialApp

    Blank White Page with GetMaterialApp

    When using Sizer package along with Getx package. Sizer is not working it showing Empty white screen.

    This is how Sizer is applied to GetMaterialApp widget.

    GetBuilder<ThemeController>(builder: (themeController) { return Sizer(builder: (context, orientation, deviceType) { return GetMaterialApp( debugShowCheckedModeBanner: false, enableLog: true, logWriterCallback: Logger.write, title: StringHelper.appTitle, theme: themeController.getTheme(), initialRoute: GetPlatform.isMobile ? Routes.splash : isLogin ? Routes.home : Routes.auth, getPages: AppPages.routes, ); }); });

    There is no error log to provide.

    opened by rjkolli7 2
Owner
Urmish Patel
[Android|iOS|Flutter|Java|Dart]
Urmish Patel
With flutter tags you can create selectable or input tags that automatically adapt to the screen width

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: dependencies: flutter_tags: "^0.4.9+

Antonino Di Natale 417 Dec 21, 2022
Responsive Sizer helps implement are responsive layout by providing helper widgets and extensions

Responsive Sizer Responsive Sizer helps implement a responsive layout by providing helper widgets and extensions Content Installation Parameters Take

CoderUni 71 Jan 3, 2023
A Flutter plugin for iOS and Android for generating sign-in buttons for different social media account.

A Flutter plugin for iOS and Android for generating sign-in buttons for different social media account.

Julian Steenbakker 6 Nov 6, 2022
The most complete flutter plugin packages for open various settings screen in Android and Ios

open_settings The most complete flutter plugin packages for open various settings screen in Android and Ios For Android: this plugin currently support

Ali Hoseinpoor 15 Dec 11, 2022
Responsive Admin Panel or Dashboard using Flutter

Responsive Admin Panel or Dashboard using Flutter

Abu Anwar 5.5k Dec 29, 2022
Instagram UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices.

instagram Instagram clone UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices . Getting Started This pr

Mustafa Nabavi 4 Oct 28, 2021
Instagram social network interface in a responsive built using flutter

Responsive Instagram ?? Responsive Instagram foi um projeto realizado com o intuito de aprendizagem e prática da linguagem de programação Dart em conj

null 3 Jun 11, 2022
A responsive book app UI using flutter

Flutter Book Project I'm design a responsive book app UI using flutter, There is 3 page home page that includes a horizontal category list, then a lis

Mr Kafiri 6 Dec 27, 2022
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Blackshadow Software Ltd 22 Sep 1, 2022
Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layout aims to help building a responsive experience through all the different screen sizes. Based in the boostrap approach, FluidLayout calculates a padding content (fluid_padding) that changes depending on the parent size. The Fluid widget uses that padding to set its size

Jaime Blasco 3 Jan 10, 2022
A small attempt to make an e-commerce user interface in Flutter for Android and iOS.

Flutter ecommerce App A small attempt to make an e-commerce user interface in Flutter for Android and iOS. I developed this application just for learn

Md Tarikul Islam 615 Jan 3, 2023
An UI Design as an example to make a flutter project

Hello Guys! in this project i taked an UI Design as an example to make a flutter project. this project is the first part for figma to flutter...

Abdullah Kaşgar 10 Nov 22, 2022
LoginUIDesign is login beautiful module. login module segregate in different steps on bases of data required.

LoginUiDesign You can Install and test latest LoginUiDesign app from below ?? LoginUIDesign is login beautiful module. login module segregate in diffe

Deepak Sharma 2 Nov 22, 2021
A textField widget to help display different style pin

pin_input_text_field 中文版点我 PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports

Tino 324 Jan 4, 2023
A Flutter package to easily create a Credit Card in your application.

Awesome Card A flutter package to create a Credit Card widget in your application. Stay tuned for the latest updates: ?? Screenshots ⚙️ Installation I

Vivek Kaushik 142 Dec 1, 2022
E-commerce On-boarding Screen UI using flutter

E commerce Onboarding Screen Watch it on YouTube E commerce On-boarding Screen U

Behruz Hurramov 3 Mar 24, 2022
A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

null 23 Dec 4, 2022
DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

null 582 Jan 4, 2023
A Splash screen with curved custom bottom sheet and dots indicator within it.

Pub.dev Curved Splash Screen A Splash screen with curved custom bottom sheet and dots indicator within it. You can add your custom splash screens acco

Hosain Mohamed 16 Dec 1, 2022