Flutter ExpansionTile - collapse expansion tile Flutter

welcome to letter teacher in this video we will learn an expansion tile with its fantastic set of properties so without wasting time let's get started [Music] sometimes in application we want to display details of list style in the same place without navigating to the next page expansion tile is the best option to achieve this functionality it has Arrow icon that expands or collapse the tile to reveal or hide the additional details given by the child let's see the basics all the points noted here are actually the basic properties of expansion list the leading is placed at the left side of the tile then we have a title below that we'll get replayings for subtitle then we have the place for trailing at the end of time make sure that when we place icon or something at the trailing the expansion arrow is not visible so by default if you are not placing any trailing on your tile expansion Arrow will be visible and it will change its uh Direction based on whether you are expanded or collapse the portion that you actually wants to hide or make it visible when user clicks on the specific expansion Arrow this particular portion is known as a children which is supported by the desktop tiles so the values managed by these four different properties will be visible always to the user and whatever thing that we place inside a child it will be visible only when expanded and it is hidden on collapsed all four properties shown at the top requires revisit and children takes the list of widget and that's the reason expansion list is completely customizable let's see one basic example for this we simply have a scaffold that contains the blank Abba and we have a list view as the body inside this list view we have this expansion type you can observe here what is expansion tile we have leading simply managed by the circle of tar with some image here then as a title we have a text so I haven't used here the subtitle if you wish you can go with the subtitle then we have a children that requires the list of Widget the first widget we have the text that is showing some information and again we have the test and at the end we have an icon so you can see here only this particular product is the only tile part is visible and we have this expansion Arrow here you can observe here I haven't used trailing and that's the reason this expansion arrow is coming up when I tap or when I click on this x function Arrow you can see here the direction of this explanation Arrow got staged and now the portion or the content that I have placed inside the children they are now visible to me and one noticeable thing here is you can see here the color of title and this expansion Arrow has turned to Blue by default so this particular color depends on the color of your theme however we can customize this color also I will explain that one in the same video and when we click back on this Arrow here you can see here now it's collapsed and all the contents of children are hidden now let's understand what will happen if we provide the trading for this expansion tile so let me uncomment this trailing and let me show the code you can see here this expansion arrow is now changed with the check mark icon that I have placed here so when I tap here it's getting expanded and when I tap again it's getting collab so the observable thing here is this particular Arrow or this particular icon is not getting changed to this expansion error it is simply the icon that we have specified so if you want to get that specific icon that looks like the expansion or say collection so in that particular case we have to Simply um just come into this trailing and we have to save so you can see here now we have got that uh nice icon back here and it has some little default animation that looks like The Arrow is turning in upward Direction and in the double Direction reposition of expansion Arrow can be changed by using the property called control affinity and for this control Infinity we have to pass a value in the form of enum called list time control Affinity you can see here it has total three properties leading platform and trading by default we have a platform here so it indicates based on your platform language means whatever language that you are using with your phone or with your device So based on your language whether it is from left to right or right to left it is going to place uh it is going to decide to place for that expansion arrow for example if I make that one say leading so it is going to change or it is going to place the arrow on the leading that is on the left hand side restarting of your list style so let me save you but you can see here the reason here is we have a leading here so first of all what we need to do we need to comment leading here let me comment that one so when I say here we can now see this expansion arrow is now changed or it is now shown at the starting or say a leading side of the expansion tile so when I click here it's getting expanded and when I click back now it's getting collapse so if I change say leading to say filling so it is going to place that arrow to the end of your time that is to the right hand side of the tile so I can expand and I can collapse here and if I go to platform so as I told you platform is the default value So based on the language supported by the platform so it is going to place that one accordingly if you want your expansion type to remain expanded when it is loaded then we can use the property called initially expand it and simply go to make it true by default it's false so let me reload my application you can see when it is get reloaded you can object now it will be in the expanded move let's talk about different types of padding options here we have got two different padding options style padding is a padding which is applicable for the tile that is for the portion which is always visible and we have the padding called children padding it is actually padding given only for the children that is the content which is great visible and height when it is collapsed or expanded so you can also know as I have made the tile padding to zero we can see here there is no padding for this style here and when I expand here you can see for this children I have specified a padding of 50 pixel and that's the reason these children has got the padding of 50 pixel it's important to note that the tile padding won't affect the children padding and the children padding is not going to affect at all the title padding for example let me change this say uh children padding to 20 and say tile padding to 50 pixel you will also hear what I'm talking here so you can see here the title has got a padding of 50 pixel across all the four sides whereas children has got the padding of only 20 pixel and it don't have any effect due to the tile padding let's understand how we can control the alignment of children and each element inside the children so in order to control the alignment of children we have got property called expanded alignment default value for this is the alignment Dot Center and that's the reason everything is going to place in the center of the tile so let me save here you can see now everything is in the center so let me use here say a top left so it's going to place the content in the top left side of the timeout so it is important to note that the entire children is gonna placed in the top left and not the individual elements inside the children so let's say if I use here say bottom right so it is going to place entire uh children at the bottom right not the English element now if you want to control individual element alignment and for that that purpose we all got property called expanded cross access alignment so let me uncomment this line so as soon as I uncommit you can see I have got lots of error so we simply need to remove this constant and you can see here I have used properties eight so let me save you you can also know due to this bottom right the entire children is now placed at the bottom right and I'll use cross access dot end and that's the reason each element in these children is now placed at Aid so let me use your start you understand what I am seeing exactly here when I say start uh you can see here entire children means entire content is there on the bottom right but individual items in the children are placed at the start here let's say if I use here say Center it will be to paste everything in the center let's understand the different types of color options available in the expansion tile but it has given two different set of colors to manage the color when the tile is expanded and collapse so in case of the collapse we option called collapse background color in this case I use your orange you can see here and that's the reason the tile color is now appeared in the orange here and we have the text color as the black for this collapse color let's reduce this and see that part is appearing in the black color and we have say collapse icon color as a white that's why this arrow is appearing in the white color and we have another set that works or that controls the color in the expanded mode then we have a color called background color so here we have background color say color dot U so all the colors that is the background color text color and icon color these three colors are going to work only uh when the tile is expanded so let me click on here So Meta is not funded you can see now uh the background color is turned to Blue you can see here the tile color and the content color that is the color of children both this color has now changed to Blue we want text color as white you can see here you see that part will now turns to White here the icon color is now red that's the reason you can see here this icon that is the arrow here now turn with the red color but one thing that you can notice here using this color we can change the color of tile and we can change the color of the expanded and the collapse thing but we cannot change the color of the children or individual items in the student so that has to be changed manually by applying individual colors for each item in the children expansion tile supports a function called on Expansion change and it's a callback function which is get executed when user expands or collapse the expansion tile this function requires parameter in the form of a Boolean value which indicates whether you have expanded or collapse the expansion type when the value that will received as a true it means you have expired a tile otherwise you have collapse your lifestyle so you can see here and using that code I will simply printed the list style is expanded or delete stylish collapsed so let me click on this just expansion Arrow so that this gate expanded and I will get the message called list tile is expanded and when I click back here you can see now the this style is collapsed that's it for this video see you guys in the next video If you really found this video helpful and knowledgeable then don't forget to like share subscribe and hit the Bell notification button to get my latest videos

Channel: Flutter Teacher

Views: 3,994

Keywords: flutter expansiontile, flutter expansion tile, expansiontile flutter, expansiontile widget flutter, flutter expandable list, flutter expandable list view, collapse expansion tile flutter, flutter expandable list tile, flutter expansiontile widget, flutter expansiontile collapse, flutter expansiontile example, expansion tile in flutter, callback for expansion tile, expansiontile properties, flutter widgets tutorial, flutter tutorial for beginners, flutter, flutter course

Id: tIIiEdkj0JI

Length: 10min 40sec (640 seconds)

Published: Wed Feb 22 2023