Flutter Context - The Complete Guide | amplifyabhi

in this blog we are going to address the context based issue in your flutter application so if you are a beginner and trying to learn flutter to build your mobile applications you might have come up with this particular issue previously or in your coming applications so this tutorial is for you stay tuned till the end of this tutorial and try to find out this particular issue and how to address this particular issue in your fer application so now let's get started with this particular tutorial [Music] so quickly I will show you what is the issue here so I'm going to import the material do do here and I'm going to create a basic application and then I will show you the issue and then we can sort this particular issue and also know the reason behind this particular issue so some of you might struggle solving this particular issue and and every time I'm saying issue but what is the issue so to know this issue you need to watch this tutorial till the end so now I'm going to create this particular stateless widget and here instead of returning a placeholder I'm going to return a material app here inside the material app we need to make use of a scaffold here and again what is the use of scaffold I think you all you already knew this if you watch my previous tutorials scaffold is used to form the basic structure for our application and here you got like an options like app bar here so the app bar I'm going to specify with the help of a text Widget the title here I'm going to specify it's like context so basically we are going to deal with this particular context issue in our flatter application and the next thing I'm going to specify is the body and quickly I'm going to add a container here or I'm just going to make use of a center widget and inside which I'm going to consider a text button and this text button will have two required parameters that is on pressed and one more thing is child so this child is used to specify some label on our button and here I'm going to specify like click okay that's all click on this particular button and now let's try to show a snack bar over here so basically we make use of a scaffold messenger so starting from flutter 2.0 version we are making use of scaffold Messenger to display snack bar and also bottom sheet in flut application so snackbar do off and here we specify the context dot show snack bar so this is the important statement without which you can't show your snack bar in your flutter application so here you can d L pass this particular snack bar by creating it in a separate method so now I'm going to specify my snack bar over here so again this is again a widget snack bar is a widget here so content it is asking for the content I'm making use of a text widget and trying to display the content so and as it's a tutorial I'm just going to specify my website name here as a content and also you can add multiple parameters here so like duration so how much time this particular snack bar should be displayed and duration you need to add in terms of seconds minutes and I'm going to add in terms of a seconds here so just like a 5 seconds I'm going to specify and also you can also specify an action over here so if you want to perform a specific action when you tap on scaffold when you tap on this particular snack bar you can specify here but now I just don't want to have any action here because here we are going to deal with the context issue and the tutorial for the snack bar I have already done in our Channel and the link for it I'm providing in the description section below so you and you may go watch it so now let's try to run this particular application and try to see whether this particular snack bar will be visible on our flatter app or not so here I'm trying to quickly run this particular tutorial on the iOS simulator and let us try to observe the output once and again there will be no change if you run this on the Android emulator or iOS simulator because the code for the both is same again so here when I tap on this particular click button here you can see here you can see the error typically this cold messenger widget is introduced by the material app at the top of the application widget tree so here by reading this particular line you might have came to an assessment like what is the exact issue so if you're not if you're still confused I will try to solve this particular issue now and this is a very simple issue to address if we know the exact issue so now so this particular widget my app is the top widget in our application so this is the very first widget which we have declared in our application and which is considered to be the top widget in our application so here it cannot access the context directly from the root class because there is no specific widget associated with it so the root class typically represents the entire application so here this particular class like my app will represent the entire application and it's not a part of a widget Tre so here we need to introduce one more class here so for example this is my app right and I'm going to create one more class here and name it like home or something you can just name it and so let's try to say I'm going to quickly create a stateless widget and name it like home here and instead of my home my app here I'm going to specify home and here instead of returning a placeholder what I will do is like I will specify the material app and all the default things of our application here so pleas previously we have specified material app here right so I'm going to remove all this particular declarations from our my app class and transfer it to our home class here so here now you can see our home class is now having material app scaffold appar here and also now we need to specify the body section even here so after Declaration of the APPA here we can specify body and here I'm going to specify our my app here so previously this was specified in void main directly and now I have created this intermediate class here and this particular class now acts as a root that is the top widget in our application and now I'm just trying to rerun this particular application here and when you tap on this particular click button now here you can see this snack bar is now appearing in our flutter application so previous viously we were using the snack bar from our root widget which is causing the context issue and whenever you have created another root widget and you have diverted the class where you use the snag bar to that particular widget then now you are able to see the snack bar visible in your application so this is what the issue which I said I'm going to address in this particular tutorial and I hope you found this tutorial interesting and most of you might have known this particular issue but I have made this tutorial for beginner purpose so I have addressed this particular issue so that the beginners might get a good Clarity like why this issue actually arised in their applications so I hope you like this particular tutorial so if you like this tutorial do like share and subscribe to our channel for more interesting content on flutter

Channel: amplifyabhi coding

Views: 214

Keywords:

Id: 35Z8v9LZp3w

Length: 8min 32sec (512 seconds)

Published: Tue Mar 19 2024