Dismissible in Flutter | Complete Flutter Crash Course | Flutter Widgets | 30DaysOfFlutter

hey there this is akshat madan and welcome back to the day 6 of 30 days 30 concepts of flutter and till the previous parts we have covered a lot of things and in this part we will be covering about a dismissible package that's an inbuilt flutter package and that's very important and first of all if you're new on this channel you can like my videos and subscribe to my channel and you can also follow me on the social media links i really post some amazing stuff on my instagram page which can be very useful for you right so in this dismissible package if you want to see the best example go to gmail and see your emails right the picture is little blur but you can see that in the gmail also you can swipe the container right or you can swipe the container to the left and you can perform some actions as you can see in this image if the person is swiping to the right then he can delete this message and if the person is swiping to the left then he can archive this message or save this message right so instead of wasting more time let's go to my vs code and start coding this package and start understanding what this package mean so let's go so now i'm on my vs code and you can see that in the last part we were studying about this snack bar so if you have not accessed that playlist please do it and it's a wonderful series for beginners especially and now let's create a new file in the widgets let's call it dismissible.dart this missible dot dot and let me just complete the name importing statements and defining a stateless widget let me just do it fastly and i know that you already know all these things because we have covered these things many of times dismissible widget and yes now let's define a simple scaffold the app bar the app bar then let's give it a title text widget i'll give it this miscible dismissable package now let's save it and in the main. we have to return dismissible package oh sorry dismissible widget dismissable widget yeah let's save it and you can see that simple app bar with the title dismissable packages shown so let's go to dismissible dot dot yes and let's start defining it so as you know that for dismissible we need a certain amount of containers we need a list of containers right so we have already studied about list views and grid views in the i think in day four right so you can access that video and for defining a list view we have to define a simple list so that we don't need to define list style again and again and again right so over here let me just make it state full widget so that whenever i push it to left and push it to right it should be deleted or it should be saved right so i have to make this stateless widget as stateful widget so now i have made this widget as a full widget instead of stateless with it now let's define a list so over here in this class i'm going to define a list of strings and i'll call it fruits so in this let's give it some fruit names let's give it orange then let's give it an apple then a mango let's give it uh let's give it grapes and the last let's give it a banana and now we have to return in this body a simple list view so let's go to scaffold and in the body i'm going to return a list view dot builder so we use listview.builder when the list is dynamic when we don't have a fixed amount of content fixed length of the list then we use listview.builder right and it is easy to work with listview.builder than listview because we don't have to write the same child again and again if we are using the same widget right so first of all instead of item builder i will define an item count and item count will be fruits dot length and then i'll define the item builder in the item builder i will define a context i'll define an index and then i am going to return a dismissible so dismissable and in this dismissible first of all we have to define a key then we have to define a child so in this key we have to define a key for defining the key we have to define a variable called final let's name it fruit and fruit is nothing but fruits add index right so my fruit will be what my fruit will be the particular fruit at a particular index so in this key you have to give this fruit or you can say the list content list item right and in this child you can define any container we will define it but first of all uh let's give it one more parameter to this dismissible that is on dismissed what i want to do when the list item is dismissed towards right or towards left right so in this dismissed it takes a direction and to this direction we can provide uh we can like write we can write the condition if it is from start to end direction or it is from end to start so first of all i will define if direction is equal to is equal to dismiss direction dismiss direction dot start to end right then what i want to do i want to show a scaffold messenger that is snack bar that we occurred in the last part that is scaffold messenger dot of context dot show snack bar and the snack bar let's say we have to give a snack bar inside it snack bar and the content of this snack bar is going to be a simple text and the text i want to name it names sorry fruits add index so whatever float will be there at a particular index that fruit name will be printed and then you can also provide it a background color so let's give it so after this roots you can give the background color let's give it colors dot red and then provide a simple semicolon and let me also word wrap it so you can see the complete file yes so you can see what i'm doing first of all instead of defining a simple card or container i am defining a dismissible in this dismissible i am also defining on dismiss which takes a direction so if i am starting from if i am dismissing from start mean that means i am swiping towards right that is start to end then what i want to do i want to print in the scaffold that is in snack bar the fruit name which is there at that list style and the background color i want to keep it red right so this was my dismiss direction so now let's define the else part that means if i am dismissing towards end to start that means i am defining i am swiping towards end to start towards left so what i want to do i'll define an else and in the else i will define the same thing so let's just copy it let's just paste it and this will also take that fruit name but this time i want to keep it green so that you can see the difference if i'm swiping towards left hand if i'm swiping towards right now we have defined a key now we have to define a simple child so in this child you have to give the list type so you can give a list tile and in this list style you know that it takes a title so let's give a title as fruits at index right we have to wrap it with the text so i'll just do it text will be fruits at index and then we have to uh define also background color of this dismissible let's say if i'm swiping towards right then what should be the background color if i let me just keep it right like this only and if i just uh save it you can see these are these are the list of these containers list of these roots and let me also give this list style some color or what i can do i can just wrap this list type with the widget called card wrapped with a widget called card and if i just save it you can see very beautiful cards are over here and i can just swipe it towards right right and i can also swipe it towards left right so now what i want to do is uh i want to keep a background color let's say if i'm swiping towards right then i want to keep a background color and if i want to swipe it towards left then also i want to keep a background color so for that you have to define a background color and secondary background color so background will be container or you can also keep an icon right so you can keep a row you can keep anything so i'm just defining a simple container let's keep it colors.red and i am defining a secondary color after this and the same thing container color colors dot green this time and let me just save it and now if you see that if i'm swiping towards right then i'm able to see a red color if i'm swiping towards left then i'm seeing a green color same thing for every child every list with less style right that's a beautiful thing so when i just completely swipe uh swipe it towards the right you can see that a simple scaffold message snack bar message and if i just swap it towards swipe it towards left then you then also you will be able to see the uh snag bar message right so how the color is changing how this is green if i am typing towards uh left it is green and if i am swiping towards right then it is red right what is happening so over here i have defined two conditions if the direction is towards start to end then a red color snag bar if the direction is from end to start then the green color snag bar is there right perfect amazing so i know that you may be having some doubt so you can reach out to my telegram channel that's open for you and not only telegram you can reach out to me on reach out to me anywhere all the links are in the description you can ask any doubt so till the next content keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 3,923

Keywords:

Id: zppJ3c91Cdc

Length: 10min 50sec (650 seconds)

Published: Tue Jun 29 2021