======== Exception caught by widgets library =======================================================
The following LateError was thrown building MyApp(dirty):
LateInitializationError: Field 'height' has not been initialized.

The relevant error-causing widget was: 
  MyApp MyApp:file:///D:/OneDrive%20-%20ECAM/Projet_App_Trading_Conseils/flexmes_mobile_app/lib/main.dart:16:22
When the exception was thrown, this was the stack: 
#0      Device.height (package:responsive_sizer/src/helper.dart)
#1      DeviceExt.h (package:responsive_sizer/src/extension.dart:7:33)
#2      appThemeData (package:flexmes_mobile_app/config/themes.dart:15:21)
#3      appThemeData (package:flexmes_mobile_app/config/themes.dart)
#4      MyApp.build (package:flexmes_mobile_app/main.dart:35:22)
#5      StatelessElement.build (package:flutter/src/widgets/framework.dart:4662:28)
#6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4588:15)
#7      Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5)
#8      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4566:5)
#9      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4561:5)
#10     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14)
#11     Element.updateChild (package:flutter/src/widgets/framework.dart:3383:18)
#12     RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1198:16)
#13     RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1167:5)
#14     RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:1112:18)
#15     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2531:19)
#16     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1111:13)
#17     WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:944:7)
#18     WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:924:7)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
====================================================================================================

I don't know why it closes it, it still works badly, more than anything I mean the calculation it does for the .sp function it does not work well, as it is now it would be better to have left it as before and I will show you.

I already said that you had to take into account the two sizes of the screen, it is useless to use only the width because when the height changes the text should change with it, that is to adapt well.

But keep with the idea of ​​only taking width into account and now it works worse. It has been good to use pixelDensity, that is correct but the calculation is not well done and as I said I will show you with screenshots that I have made using your method and using mine with two independent functions, a .ts2 call that uses your package for the measures and the other just uses MediaQuery to have more real measures, but they both work fine.

Here I attach the photographs, two photos are in an android studio emulator where only the height changes and the other two are two real devices.

Also say that the sizes have been set in the large android studio emulator and in portrait mode, so you can see that only in that photo, all the font sizes are the same.

As you can see, the functions I have created are almost perfect, but almost perfect is better than totally bad.

I also want to say that the .h and .w functions now work fine, but you could also think of using pixelDensity for this, since not all screens have the same pixel density even if they have the same dimensions.

All this I leave in this drive link where the screenshots are so you can see them well, and I also attach there the folder of the project where I have done the tests. Feel free to try and if my function convinces you, do not hesitate to use it in your package, I just want to help you.

Here the project link: https://drive.google.com/file/d/1WENQoD4MmwUnEZazOpeD7qksGZUbFBbA/view?usp=sharing

App doesn't run correctly when I compile it to Android

[✓] Flutter (Channel stable, 3.0.4, on macOS 12.1 21C52 darwin-arm, locale en-GB) [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)

My main.dart:

 Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: ResponsiveSizer(builder: (context, orientation, screenType) {
        return const MainScreen();
      }),
    );
  }

App screenshot on a real Android device:

LateInitializationError: Field 'width' has not been initialized.

It gave me this error when I was trying to use it in my app, specifically in a ThemeData, this is my code:

static final ThemeData theme = ThemeData(

    // blanco puro Color(0xffFFFFFF)
    scaffoldBackgroundColor: blanco,
    // negro Color(0xff000000)
    shadowColor: negro,

    colorScheme: ColorScheme(
      // color1 el del igual Color(0xff8500C7)
      primary: color1, 
      // color2 el del title del appbar y el boton menu Color(0xff7D00BA)
      primaryVariant: color2, 
      // color3 el del operador Color(0xff6B00A1)
      onPrimary: color3, 
      // color4 el del scaffold del drawer y divider del resultado Color(0xff52007A)
      secondary: color4, 
      // color5(casi negro) el de los numeros del teclado y valores resultado Color(0xff27003B)
      secondaryVariant: color5, 
      // blanco puro Color(0xffFFFFFF)
      error: blanco, 
      // negro Color(0xff000000)
      onError: negro,

      // color fuera numero
      surface: colorFueraNumero, 
      // color dentro numero
      onSurface: colorDentroNumero, 
      // color fuera igual
      background: colorFueraIgual, 
      // color dentro igual
      onBackground: color4, 
      // color fuera operadores
      onSecondary: colorFueraOperadores,


      brightness: Brightness.light
    ),

    visualDensity: VisualDensity.adaptivePlatformDensity,
    
    appBarTheme: AppBarTheme(
      color: Colors.transparent,
      elevation: 0,
      centerTitle: true,
      textTheme: TextTheme(
        headline6: GoogleFonts.exo(color: color2, fontSize: 19.0.sp, fontWeight: FontWeight.w600)
      ),
      iconTheme: IconThemeData(
        color: Colors.white,
        size: 27.0.sp
      ),
    )
  ); 

It says that the fault is in the line of headline: and also in that of size: inside iconTheme

I send you a capture of all the errors. Although there it says # 1 DeviceExt.w I have tried with all of them, 19.0.sp, 19.0.w, 19.0.h, 19.sp, 19.w, 19.h. They all give those same mistakes. I've been testing and I can't solve it, but the fact is that I was using the sizer package, the same one where you told me in response to my request to add ".sp" also in the "int" that this package of yours will use, but for now I will finish my app with that package and the next one I will start with yours, since it will be easier for me starting from scratch to find the errors.

I was talking to the flutter developers in this thread since the problem happened in the compilation phase and not in the development phase, I took their problem for granted, but thanks to the comments of another user we managed to find the fault in the resposive_sizer package and in the other called sizer, there You can see details of the user who commented on it and how he fixes the problem, maybe this can help you to deduce where the problem is in your package. Anyway, it is clear that the problem is here, this is not critical, I like your package and if you remind me, I already tried to help you previously here, I will only mention it so that you can try to fix it.

Anyway tell you that I simply generate this class based on your package that worked well for me and in this way I only use the mediaquery but in an easier way.

sizer.dart

import 'package:flutter/widgets.dart';

/// Gets the screen type between mobile and tablet.
enum ScreenType { mobile, tablet }


class Sizer {
  static double h(BuildContext context) {
    return MediaQuery.of(context).size.height;
  }

  static double w(BuildContext context) {
    return MediaQuery.of(context).size.width;
  }

  static Orientation orientation(BuildContext context) {
    return (h(context) > w(context))
        ? Orientation.portrait
        : Orientation.landscape;
  }

  static bool isPortrait(BuildContext context) {
    return (orientation(context) == Orientation.portrait) ? true : false;
  }

  static bool isLandscape(BuildContext context) {
    return (orientation(context) == Orientation.portrait) ? false : true;
  }

  static ScreenType screenType(BuildContext context) {
    return ((orientation(context) == Orientation.portrait &&
                w(context) < 600) ||
            (orientation(context) == Orientation.landscape && h(context) < 600))
        ? ScreenType.mobile
        : ScreenType.tablet;
  }

  static bool isMobile(BuildContext context) {
    return (screenType(context) == ScreenType.mobile) ? true : false;
  }

  static bool isTablet(BuildContext context) {
    return (screenType(context) == ScreenType.mobile) ? false : true;
  }
}

extension SizerExt on num {
  /// Calculates the height depending on the device's screen size
  /// Eg: 20.h -> will take 20% of the screen's height
  double h(BuildContext context) {
    return MediaQuery.of(context).size.height * (this / 100);
  }

  /// Calculates the width depending on the device's screen size
  /// Eg: 20.h -> will take 20% of the screen's width
  double w(BuildContext context) {
    return MediaQuery.of(context).size.width * (this / 100);
  }

  /// Calculates the sp (Scalable Pixel) depending on the device's screen size
  double sp(BuildContext context) {
    return this *
        ((((MediaQuery.of(context).size.height +
                        MediaQuery.of(context).size.width) +
                    (MediaQuery.of(context).devicePixelRatio *
                        MediaQuery.of(context).size.aspectRatio)) /
                3) /
            3) /
        100;
  }
}

I divided by 3 the .sp method because I get all the data from the device using mediaquery.

As the title indicates, in my opinion the extensions .h, .w, .sp, do not work correctly, maybe there is some concrete reason why you have done it and that is beyond my knowledge, but for the moment I think it should work otherwise and I'll explain why below.

1- .w and .h extensions I was reviewing the package and I saw that when setScreenSize() changes the value of adaptiveWidth and adaptiveHeight, you put an if loop to verify that if the orientation is in portrait mode and set its value in this way, that is;

if (orientation == Orientation.portrait) {
      adaptiveWidth = boxConstraints.maxWidth;
      adaptiveHeight = boxConstraints.maxHeight;
    } else {
      adaptiveWidth = boxConstraints.maxHeight;
      adaptiveHeight = boxConstraints.maxWidth;
    }

Nothing you do not know until there, but as I said before in my humble opinion, I think it should work in another way, that is, it should not be this cycle, because when I want to change a size in landscape mode I want my adaptideWidth is the actual width that I currently have when being in landscape mode and not the width that it would have in portrait mode, perhaps for the size of the letter if it works because it is the same size in the two orientations but for the sizes of a Container() for example, in my opinion not. I repeat that maybe I'm wrong but I think it should always be the width of the screen whether you are in landscape or portrait mode, that is.

     adaptiveWidth = boxConstraints.maxWidth;
     adaptiveHeight = boxConstraints.maxHeight;

2- .sp extension Something similar to the previous ones happens to this extension, that is, when you do the operation; double get sp => this * (Device.adaptiveWidth / 3) / 100; You only take into account the width of the screen, but for me this is an error, I put an example so that you understand:

Now I have a device with a size of, 1366x768 in landscape mode and 768x1366 in portrait mode (I use computer sizes because they are the ones I know the most), then I create a Container() with a size of 20% of the height and 20% of the width in portrait mode, and inside I add a Text() with a size that fits the size of the Container() but does not come out outside of it. And now I launch my application on a device with a screen that has a size of 1280x768 in landscape mode and 768x1280 in portrait mode. If I take as a reference the width of the screen in portrait mode to adjust the size with the extension ".sp", since the width is now 768 the same as before, and the height is 1280 less than before, my Text() It will be seen with a size the same as before, which will cause the letter to be cut off because it no longer fits the dimensions of the Container() that I had created, since the height is reduced but the font size It remains the same.

To fix this problem I have created my own test function, which would be like this:

double textSize(BuildContext context, num mySize) {
  final h = MediaQuery.of(context).size.height;
  final w = MediaQuery.of(context).size.width;

  double result = mySize * (((h + w) / 2) / 4) / 100;

  return result;
}

and if you wanted to add it to your package it would be like this:

double get sp => this * (((Device.adaptiveWidth + Device.adaptiveHeight) / 2) / 4) / 100; In this way, if you change any of the two sizes of the screen, the text adapts accordingly because it takes into reference the total resolution of the screen and not only the width. Even to be totally exact, the pixelRatio and the aspectRatio could also be taken into account, being this way: double get sp => this * (((Device.adaptiveWidth + Device.adaptiveHeight + MediaQuery.of (context) .devicePixelRatio + MediaQuery.of (context) .size.aspectRatio) / 2) / 4) / 100; which would not change the final value too much, but it would make it even more precise since not all phones are the same even if their resolutions are the same.

PS: If you divide "/ 4.5" double get sp => this * (((Device.adaptiveWidth + Device.adaptiveHeight) / 2) / 4.5) / 100; It will give you a result more similar to the result that it gave with double get sp => this * (Device.adaptiveWidth / 3) / 100; in this way it will be easier to adapt to your design if someone was using the package, since the sizes will be more or less the same but it will adapt depending on the total resolution of the screen. What happens that I have divided by 4 because I love whole numbers XD

If I make a mistake with something, sorry, do not hesitate to correct me, but I only try to help because I like this package since I know of the headaches that adapting the application to all screens gives and I think this is the best way to do it.

Regards, and thanks for your work.

I don't really know what last update should fix, but it did not help on my device. So I am sharing my fix. As I already explained in issue #2 flutter layout listener should be aware of orientation and width & height should be set. You dont need any extra logic there

Works like this:

https://blogs.windows.com/windowsdeveloper/2017/05/01/master-master-detail-pattern/

https://en.m.wikipedia.org/wiki/Master%E2%80%93detail_interface

On mobile you navigate from the master to the detail page.

On desktop of tablet , you have master and detail page on the same screen.

This is a very common need …

routing can get tricky to do it .

typicalky I have seen it done I using a different scaffold for each which is not DRY as we would like . It would be awesome if that can be abstracted to a degree .

my feeling is that a higher level component is created that uses your library to do both scenarios in a reusable way .

Thoughts ?

Would be great to end up with an example showing it

I had to disable this bit to actually get correct width / height

  // Sets screen width and height
    // if (orientation == Orientation.portrait) {
    width = boxConstraints.maxWidth;
    height = boxConstraints.maxHeight;
    // } else {
    //   width = boxConstraints.maxHeight;
    //   height = boxConstraints.maxWidth;
    // }

AS far as I know then LayoutBuilder is orientation aware...ie width is always width and you should not artificially change it.

Hello,

I would like to know the difference between using the following :

    final bool _isOrientationPortrait =
        Device.orientation == Orientation.portrait; // Not rebuilding

    final bool isOrientationPortrait =
        MediaQuery.of(context).orientation == Orientation.portrait; // Rebuilding

Since when using the MediaQuery and I flip my device, it automatically updates the widget, but when using it with the package it doesn't update and I have to be occupying OrientationBuilder. So I would like to know how to update a screen...

I use my ResponsiveSizer like this in my main.dart file :

      [...]
      child: MaterialApp(
        navigatorKey: navigatorKey,
        onGenerateRoute: RouteGenerator.generateRoute,
        [...]
        builder: (BuildContext context, Widget? child) => MediaQuery(
          data: MediaQuery.of(context).copyWith(
            textScaleFactor: MediaQuery.of(context)
                .textScaleFactor
                .clamp(1.0, 1.4),
          ),
          child: ResponsiveSizer(
            builder: (context, orientation, screenSize) =>
                child ?? const SizedBox.shrink(),
          ),
        ),
      ),

Hello I wanted to ask a question about the use of the package. I have been using the package and it is doing very well, the problem is that I don't know if I am using it well. Since the same thing happened to me with the other package of sizer. That is, I cannot adapt my application to all screens perfectly, and I think it is because I do not use it well. So my question would be, should I put the ResposiveSizer widget on every screen where I use it or just put it in the main as it works in the example?

I was using sizer, then migrated to responsive sizer. With sizer 1.sp was around 1.2 px but as you can see below, it's around 1/20th of it with responsive sizer. Also i can not replace sp with dp since there's a huge difference between dp and sp.

Following are the values i get with responsive sizer.

1.sp 0.060366202945990176  (1.21 with sizer)
1.dp 192.0 
1.h 7.52 
1.w 3.6 
Device.pixelRatio 3.0 
Device.aspectRatio 0.4787234042553192 
Device.height 752.0 
Device.width 360.0

My initialization code is as follows:

    return ResponsiveSizer(                                                                        
      builder: (context, orientation, deviceType) {       
        return GetMaterialApp(                                                                     
          title: 'My app',
          theme: ThemeData(                                                                        
              primarySwatch: Colors.grey,                                                          
              visualDensity: VisualDensity.adaptivePlatformDensity,
              textTheme: Theme.of(context)
                  .textTheme                                                                       
                  .copyWith(                                                                       
                    bodyLarge: TextStyle(fontSize: Defaults.bigFontSize), // 16.sp
                    bodyMedium: TextStyle(fontSize: Defaults.fontSize),  // 14.sp
                    bodySmall: TextStyle(fontSize: Defaults.smallFontSize), // 12.sp
                  )                                                                                
                  .apply(
                    fontSizeFactor: 1.sp,
                  ),
              dividerColor: Colors.transparent),
          home: HomeView()
        );
    }
);