LateInitializationError: Field 'width' has not been initialized.
titoworlddev opened this issue · comments
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.
The error occurred because you called 27.sp
before src/helper.dart
was able to execute width = boxConstraints.maxWidth
. How did you use your ThemeData
and did you wrap your MaterialApp
with ResponsiveSizer
widget?
Hello @CoderUni,
I leave you a link with a test project that I did, where I make a main.dart with a simple page and put the ResponsiveSizer () widget as it is in the example of the package, the theme.dart file is also added, which is the I use to create my theme, if you try it, it should give you the same error as me.
I do not understand why it gives that error, with the other sizer package that is the one before your package it did not give me this problem, so I say that I will use your package in the next app to test it.
Maybe it may be that it is an error because I use the theme as a static variable to be able to call it without having to create an instance in each file where I want to use it (although I only use it in main), but as I have already said I am using it like this with the other packet and the error does not pass.
Here I leave the link to the test project that I mentioned before, so that you can do tests yourself:
https://github.com/Hekhy/responsive_try
Hello @Hekhy,
The repo you sent here is private. Kindly make the repo public so I could take a look at your test project.
Oh, sorry, I thought that private meant that only the person who sent the link could see it. I'm new to github and I'm not very good at it yet. Now you should be able to download it.
https://github.com/Hekhy/responsive_try
@Hekhy The Device.setScreenSize
function in ResponsiveSizer
isn't called before you accessed 27.sp
. You could solve it by wrapping your MaterialApp
with a FutureBuilder
:
return ResponsiveSizer(
child: FutureBuilder(
future: Future.delayed(Duration.zero),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return MaterialApp(
theme: Tema.theme,
Perfect I will try it like that, although if you could add it as an update, no one will have problems. Thanks for the help :)
Thanks @Hekhy. I tried placing the FutureBuilder
as part of the ResponsiveSizer
widget. It didn't work because by passing Widget child
<- (in your case, MaterialApp), Tema.theme
gets called even before ResponsiveSizer
gets to build its own widgets. I will add that as an update once I figure out a solution.
Hello @CoderUni.
Sounds good to me, I'll be attentive to new versions of the package or a possible notification from you, hopefully you can solve it soon.
And to say, not as it criticizes you or your package, but as it criticizes the Dart language, which is a bit strange that in the build of a widget the theme is loaded before the previous widgets as in this case the layoutbuilder.
I don't know exactly how Dart works 100%, but I think it must have something to do with it first reads all the files and the file where the theme is reads it at the same time as the file where the app material is and how it doesn't load to time Device.setScreenSize (constraints, orientation); gives the error.
I suppose you had reached some similar conclusion, but I am telling you because the method used in the other sizer package was different, maybe you can walk there to solve the problem.
I also tried to put your package in my project locally, to be able to make changes and try to help you with the solution, but it can't, in the visual studio code editor it doesn't give me any code errors, apparently everything is fine, but when I launch The application to test gives me errors that make me think that the version of Dart that each of us has is different, maybe the problem can also go there, but I think my version is the last one since a few days ago I updated Flutter and Dart was updated automatically. I will also try to update it if it is not, and I will try again, but I say this hypothesis about the Dart version because when you configure the child argument of the ResposiveSizer widget in its constructor, you put required and I have always used @required, and it is there where is it giving me the error, and even if I change it and put @required it don´t goes well, because I get an error in the editor and it tells me that the child argument cannot be null although calling MaterialApp as the child of ResposiveSizer, I have not managed to fix anything and that was the only change I had made.
I would like to have helped by doing my own tests, but it has not been possible.
Thanks for your insights @Hekhy . After analyzing the problem extensively, I've realized that I'm supposed to use a builder to build the child to solve the problem. I've updated the package (^2.0.0) to fix this issue.
Now it works!! Thank you!
The only thing I'm wondering is why you didn't create the widget like this:
class ResponsiveSizer extends StatelessWidget {
const ResponsiveSizer({Key? key, required child}) : super(key: key);
/// Builds the widget whenever the orientation changes
final Widget child;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return OrientationBuilder(builder: (context, orientation) {
Device.setScreenSize(constraints, orientation);
builder: (context, orientation, Device.screenType) {
return child;
}
});
});
}
}
That way you could call it like this:
Widget build(BuildContext context) {
return ResponsiveSizer(
child: MaterialApp(
in the same way you had it before but with the added builder and so it is as clean as before, which is one of the things that I love about your package.
Anyway now it works very well.
@Hekhy You cannot pass a child because you want it to rebuild whenever the orientation changes. This is why certain widgets like LayoutBuilder
and StreamBuilder
use the builder
parameter.
Ah, okay, I didn't know, it's a shame it can't be done, it was so convenient to be able to use it just by calling the ResponsiveSizer widget and sending the child.
Never mind, great job!