Here I wanted to show you an anecdote if you can call it that very interesting that I had here with the providers which is what I am using here for example to define the theme Look what I have Well here I have what the Provider is it is a little bit:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appModel = Provider.of<AppModel>(context, listen: false);
_initData(context);
return MaterialApp(
***
theme: appTheme.currentTheme,
***
}
_initData(BuildContext context) async {
final appTheme = Provider.of<ThemeSwitch>(context, listen: false);
}
This is for people Obviously who already know a little bit about Flutter But anyway Ill explain it to you here quickly up here I have the Main here Well the initialization for other things here I have what is the Provider I have a couple Actually the theme and I also have here the D model There are many ways to define it But I define it in this way in which I place it I place it nested Remember that usually this is placed at the top of the application if we want to use it throughout the application in this case it is to manage user data and what would be the theme I could merge them but I left it like that for the end So this is the highest part for me which is right here in the run app obviously what we have here This one does not interest us the one I am interested in working on is this one and here I am as who says instantiating to do something in this case the theme as you can expect is to manage the theme the dark mode and the light mode here you can see it a little bit also in practice it is through this switcher and precisely we place it at the top of the application so that when we select the theme that we want to see it can go as who says climbing as if it were a cascading style sheet that is to say well cascading downwards I dont know how to define it and they change the whole application its a bit like what was done here then based on simply a noise that we have here defined I define either the light color here notice that Im taking the light color that we have by default that we can use and there I customize them are my colors for the colors of my brand that are the purple that I almost always use and the same with the dark theme So I return this and it is the and it is what the end is used here when assembling the app material down here I have the theme part.
So being a Provider you will have your listener there:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appModel = Provider.of<AppModel>(context, listen: false);
_initData(context);
return MaterialApp(
***
theme: appTheme.currentTheme,
***
}
_initData(BuildContext context) async {
final appTheme = Provider.of<ThemeSwitch>(context, listen: false);
}
And automatically change it Using the mechanisms that I tested which in this case is this drawer that I have here everything will automatically change very nicely here Remember that this is the Main what happens is that I wanted to do a kind of synchronization here that is not really a synchronization But remember that the Academy application is also available here via the web And if I change here to light mode this has the same authenticated user of course so if I leave it as is the app works correctly when the app reacts the dark mode is synchronized according to the one established in the database
If I comment the conditional here lets take a moment to see what happens Im going to comment it Im going to reload the entire application again and we come here Here Im going to change Well here I should put the dark mode to see which one I have I have the light one not updated Here I put the dark mode and notice that here it obviously changes the first time you are implementing This happened to me I was like Wow I was making a small parenthesis
I think that the worst thing that can happen to a programmer is not that the program does not work because if it does not work as expected you simply have to see where the fault is the problem is when you do these things that you say to yourself This is great obviously it does not have one for what we want it is not a very useful implementation because again compare it with YouTube I do not know a person who is going to watch YouTube on the tablet or on the phone and at the same time is going to watch it on the PC or you watch it on the tablet or you watch it on the PC depending on where you are therefore it does not make sense to do this type of synchronization this would be a synchronization
But obviously when you start to analyze this there has to be something that is not working correctly because this again does not have to happen obviously This is going to happen only here here it has already gone crazy here it is not going to change because the development is here But in the same way I show you why since lets see what can be happening here lets remember that this is not a full duplex communication the communication comes only from one side that is to say when I make the request to the server that tells me what color or what mode I am using is the dark mode or the light mode therefore at what time how the hell this is going to be synchronized like this automatically
The point is to know how this works that I had told you before to realize what is happening here we have to place a print:
_initData(BuildContext context) async {
print("test")
final appTheme = Provider.of<ThemeSwitch>(context, listen: false);
}
Obviously at the beginning I showed you that this was not happening I showed you that when I updated on the web it did not update on the other So the problem is based on when I eliminate this conditional here notice that it is appearing what is happening that is being called in cycles therefore here is the message we are sending multiple requests every I dont know second could be said a little more to our server therefore if a thousand users connect and you know me there the sermon you are going to act at some point on the server and it does not make sense for you to do this because you are also consuming the internet For the poor client since Remember that this in the end is a mobile application Even if you are running it from Windows So what is the problem precisely how are we updating it Although Notice that here it has listen in false:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appModel = Provider.of<AppModel>(context, listen: false);
It was a bit of a challenge for me to see here obviously there is a list in the fake so it doesnt make sense for it to do this what is happening here is the one who is playing the joke here above because in the end everything is in the same widget
The problem is that when updating the providential in the init it is updated in the entire application resulting in the init being executed in a loop:
class MyApp extends StatelessWidget {
_initData(BuildContext context) async {
final appTheme = Provider.of<ThemeSwitch>(context, listen: false);
appTheme.darkTheme = userPreference.themeDarkMode = darkMode;
}
This can be a very common and difficult to see error then you will not realize why your application suddenly crashes without any sense or directly does not work in the correct way or directly becomes a little slow since suppose that it is not only this nonsense that I was doing that was the subject if you are not putting together a list of I dont know 1000 records 100 1000 records 100 records or whatever that has images queries to the internet to obtain those images obviously the application will always be like loading loading loading loading loading and at some point it will collapse And surely it will close and you do not know why And apart from the fact that it will have a malfunction and that is precisely this you have to be very aware that those blessed infinite loops do not exist just as it happened to me before so that was the message that I wanted to give you
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
I agree to receive announcements of interest about this Blog.
!Courses from!
4$
In Academy
View courses!Books from!
1$
See the books