technourmish / sizer Goto Github PK

Using the below code I had output for flutter web and mobile part.but I see responsiveness is not proper in flutter web part,
Please provide solution for this issue

Code:
Container( decoration: BoxDecoration( border: Border.all(color: Colors.blueAccent)), height: 10.h, padding: const EdgeInsets.all(10), child: Text( "User Name", style: TextStyle(fontSize: 20.sp), ), ),

Web output:

Mobile output:

Mobile output looks neat and In the web output image I see that container is too big and also text font size is also too large.

I know that the responsiveness is calculated based on screen height and text-scale factor because of this issue occurs, but my requirement is I need to release same app page for web and mobile.

MY current workaround is like: if platform is web use different height
Container( decoration: BoxDecoration( border: Border.all(color: Colors.blueAccent)), height:Platform.isWeb?5:h: 10.h, padding: const EdgeInsets.all(10), child: Text( "User Name", style: TextStyle(fontSize:Platform.isWeb?10.sp:20.sp), ), ),

But I don't want to use Platform check for whole application the ui looks to complex if I use platform check,Is there is direct solution for this issue?

Hello dev,

I try to check screen size with SizerUtil.height and SizerUtil.width, but the value is wrong. i use 15" device

please help to fix, thanks

Fahmi

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

The method '*' was called on null.
Receiver: null
Tried calling: *(40.0)

Sory for my poor english.I have used this code below
SizerUtil.orientation == Orientation.portrait ? Container( width: 100.0.w, height: 20.0.h, color: Colors.black, ) //for portrait screen : Container( width: 100.0.w, height: 12.0.h, color: Colors.black, )

The problem is landscape mode not working Please check this link
https://ibb.co/SrCPjDL

Please update the documentation. It still says to wrap the material app in ResponsiveSizer instead of Sizer

Is there a way we can get iOs landscape to recognise its a mobile device. Currently is considers an iPhone 13 mini in landscape to be a tablet in landscape

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.

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

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

Flutter offers the null-safety feature, do you have a plan to support it?

Min APK - 16 and 21(i tried both)
In debug mode its works perfectly. But after the app is released to android, it won't work on the first screen until refresh. I tried even with fresh flutter app result is the same.

** in my example second container MediaQuery.of(context).size.height work perfectly in first screen.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const HomeScreen(),
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 10.h,
              width: 10.w,
              color: Colors.grey,
            ),
            Container(
              height: MediaQuery.of(context).size.height/10,
              width: MediaQuery.of(context).size.width/10,
              color: Colors.amber,
            )
          ],
        ),
      ),
    );
  }
}

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.

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.

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

there is no error log and take long time to identify this white screen error is due to sizer package; so any on have faced similar issue ?

Why am i getting this error i'm using latest null saftey version

The readme of the package tells us to wrap materialapp with ResponsiveSizer:

But it doesn't exist in the library:

Hi, thanks for this great plugin. Can you also put web and desktop version of device.type. Currently flutter sdk 2 has web and desktop as stable channel. Thank you.

Have a look at it, I have already installed sizer package carefully.

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.

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!

Hi,

I'm wondering if your calcul of the sp value is correct because it only use the width and not the height...
/// Calculates the sp (Scalable Pixel) depending on the device's screen size
double get sp => this * (SizerUtil.width / 3) / 100;

Refered to the material documentation (https://material.io/design/layout/pixel-density.html#density-independence) sp must be equal to dp which is dp = (width in pixels * 160) / screen density.

Is there any way to change the value of sp because it seems not right to accord a font value using only the width of the screen...

Hi, thanks for your awesome package. Really useful. I was wondering what the most consistent method for creating a responsive radius is. Thanks.

Hello, I've checked many answers on here regarding this issue but I havent been able to solve it :<

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType){
return GetMaterialApp(
navigatorKey: Get.key,
initialRoute: '/home',
getPages: [
GetPage(
name: '/home',
page: () => HomePage(),
binding: HomeBinding(),
),
],
);
},
);
}
}

which is run on Main with

void main() {
runApp(const MyApp());
}

Any help is very appreciated, Im looking forward to use this plugin :D

As I already wrote in title Samsung S20+ is recognised as a tablet. It shouldn't and it makes harder to benefit from this package.

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

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

I see your package to defined size is as a percentage (Max to define the size is 100, ex: 100.0.w / 100.0.h --> it's mean the size is 100% / full screen). But can we specify the size is not using a percentage but using a dp for width and height and a sp for the font?

For example, if in the mockup get the size for the font is 14, so we can't implement your package like this:

style: TextStyle(fontSize: 14.0.sp), // This is not sp, but the font size is 14% from the screen. So it not accurate with the size in the mockup that created by designer.

Also if in the mockup get width is 100 and height is 50 for the Button, so we can't implement your package like this:

SizedBox(
   width: 100.0.w,  // This is not accurate with the size in the mockup that created by designer.
   height: 50.0.h, // This is not accurate with the size in the mockup that created by designer.
   child: RaisedButton(),
),

I think this is the major issue.

Hey guys!

So, I'm using a custom AppTheme, like this:

class AppThemes {
  static final TextTheme _lightTextTheme = TextTheme(
    headline2: TextStyle(
      fontFamily: 'Palanquin',
      fontSize: 26.sp,
      fontWeight: FontWeight.bold,
      color: Colors.neutralTxt,
    ),
   )
}

I did not put here the part of the code where I put the others styles. Also I set the MaterialApp like this:

  Sizer(builder: (context, orientation, deviceType) {
      return MaterialApp(
          theme: AppThemes.lightTheme
   )
}

My issue is: The .dp does not work when I use the text them in a widget.Like this:

Text(
              "Test"                
              style: Theme.of(context).textTheme.headline2,
              textAlign: TextAlign.left,
),

The other font styles (e.g. fontWeight, fontSize and color) works as expected. However, if I put the .dp directly in the widget style like this,

Text(
    "Test"                
     style: TextStyle(
         fontFamily: 'Palanquin',
          fontSize: 26.sp,
          fontWeight: FontWeight.bold,
          color: Colors.neutralTxt,
      ),
      textAlign: TextAlign.left,
),

it works as expected. Do you guys have any clue about what is happening? Thx!

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( ^^^^^^^^^^^^^^^

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.

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.

Hi,

there exists a package ScreenUtil, which i believe does the same as the Sizer, is there is any difference between this 2 packages ?

I'm using flutter version 2.5 and sizer version 2.0.15. then an error like this appears. can anyone provide a solution. please help me

Text( 
    "Adress"
    , style: TextStyle(  fontSize: 16.sp )

The following LateError was thrown building Widget(dirty, dependencies: [MediaQuery]):
LateInitializationError: Field 'width' has not been initialized.

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?

I am unable to use this plugin and get sizer ^2.0.12 which doesn't match any versions, version solving failed. when trying to install.

Hi, I'm starting to use Sizer and it is great. I'm having an issue though, when trying to support both landscape and portrait orientation, things gets messy, as for some reason Sizer is swapping the width and height when in landscape (for example MediaQuery.of(context).size is Size(668.0, 360.0) (so width: 668, height: 360) but 100.w is 360.0 and 100.0.h is 668.0 (again, when orientation is Orientation.landscape, here both SizerUtil and MediaQuery match).

I notice this is even mentioned in the README, that you should swap width and height based on the orientation, so I guess there is a reason for this, but I can't figure out how to make sense of it. At lease when using the automatic orientation changed by the device.

Am I missing something or is this a bug?

Update the readme for use.

USE SIZER instead of ResponsiveSizer()

Getting a white/black screen when launching in example and using in the project, I don't know this a bug or not.

Just wanted to inform, that in the readme it says Wrap MaterialApp with ResponsiveSizer widget but actually it is called Sizer now. Took me some time to realize. Maybe it helps others if this is fixed. Cheers and thanks for this cool lib!

Sizer don’t read accurate percentage

Hello, i'm starting to use Sizer, thank for for this plugin, but im having an issue though, i tried to make my Text widget like this :

 Text(
                                      "Ajouter au panier",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20.sp),
                                    ),

In order to make the fontSize responsive, but i got this error :

LateInitializationError: Field 'width' has not been initialized.

What's the problem with that ?
Thank you in advance.

The size of design is 375w and 768h.

And I have a rectangle with 90w and 102h.

Now In a Phone size with 360w and 592.

This rectangle will be: 86w and 78h.

Because of:

(360*90/375) = 86
(592*102/768) = 78

So the [90w, h102] size changed to [86w, 78h]

The problem here is, we have a rectangle with bigger height in the Design,
But we have a rectangle with bigger width in the Phone.