Flutter ListTile Widget Tutorial | Flutter Widget Explained

hey guys welcome back to my youtube channel today in this tutorial i am going to talk about list style in flutter and here you will get to know everything about list style such as properties callbacks and how you can customize the design of the list style so here as you can see at the bottom we have basic example of the tiles and then gradually we have much more complex example of the tiles and then at the top you can see we have customized design and all so this is what i'm going to discuss today so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started [Music] okay so this is our flatter project and here i have removed default counter app and i have just provided the center widget in the body and now here i am going to create the list style within the list view i will get rid of this center and i will create list view and for this list view children i will create list style so for list style we have title so here is our basic tile and then with title we have subtitle okay so here you can see this is the title in bold and dark color and then the subtitle which is little grayed out now after that we have trailing so that means here we can provide an icon or anything which will be positioned here at the right side after the text so here i am going to use this arrow forward ios okay and then after this trailing we can use leading which will be similar thing like this but it will be positioned at the left side of the text so before the text we can provide an icon and here i will use this one along with this i can provide a size and let me increase the size to 30 so that's how we can customize this thing now after that here i can use padding content padding is the property and with this one i can provide the padding which is similar to normal padding so edge inserts all for every side i will provide the padding so here is the padding now after that we have dense property and this has the boolean valve and by default it is set to false if we set it to true then we can see the text of the tiles are becoming little smaller and then i will not use tense now and then we have enabled property and this is also a boolean property and by default it is set to true if we set it to false then we can see that everything in the tile is grayed out it seems like it is not active so that is the enable property now after that we have some callbacks so first we have ontap and for ontap i will output this text in our console if we click here then here we can see on tap pressed right now again we can see that it has been logged now after that we have another callback which is on long press and this is also similar to ontap but as the name suggests we have to press little longer and here we can see that it has been logged so these are the callbacks which we have now i will customize the appearance of the list time and for that first we can do a customization pretty easily which is wrapping our list style with card so here you can see we have already a card layout and to see it properly let me wrap this list view with the container and for this container color let me provide a gray color and here i am going to provide a padding so here you can see the card right so the card has been created properly with this card we can do a customization which is elevation we can increase the elevation property which is as you can see here we have a little shadow so we can elevate this property like we can increase it okay and also we can decrease it so that means we don't have any elevation here we have only the different color now i am going to customize it little further and here i am not going to wrap it with card here first i am going to provide some color to these components let me provide a color to the icon similarly we have text color so for the text color i have provided red and it has been changed and also we have tiles color but as you have seen that this is not working here sometime it works sometime it doesn't so i'm not sure what is the actual issue but if it doesn't work that time we can wrap the list style with container and for the container we can have color property and there we can add the color and let me change the color here to white and for the text also i'm going to change it to white and with this i want to change the appearance of this style i want to provide some border radius and that i can do by providing decoration and then the box decoration and here let's provide border radius and i am going to provide border radius circular 20 and here we are having an error and the error is that i cannot use the color property here while i am using the decoration i can use the color inside the decoration and now you can see it is working perfectly we have border radius and we have the color also right so it's working perfectly fine and also i want to let you know one more thing that this style color didn't work if it would work then we have another way to provide border radius to list style itself without using container and that we can do by providing shape property and for the shape we can provide this rounded rectangle border and here we can provide border radius and here it is similar border radius circular 20 and i know that here it is not making any sense but it will make sense when this style color will work that time we don't need to wrap this this style with container okay so that's why i wanted to show you this other property which list style already has so we don't need the help of the container but if the tile color doesn't work as it is happening right now we can go with this container and i will copy this thing one last time and this time i will change the color to a different color and i will provide border radius to top left and it will be radius circular 20 and similarly i will provide bottom light and it will be radius circular 20 and along with it i will provide a margin at the bottom and similar here as well and sometimes you want to have the different color for the different icons and here the icon color is applicable for both the icons so if we want to change it then we can do that by providing the color property which icon widget already has so here i can provide color blue or whatever color you want you can provide that okay so these are the properties of the list style and that's how we can customize the list style to get our desired look and this is a very important widget for the flutter app as you can see this is creating list items and these list items are scrollable so it is really helpful and we need to definitely know about it and customize it for our requirements so that is what i have covered in this tutorial so i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and i will see you guys in my next tutorial in the meantime have a great day good bye

Channel: Pradip Debnath

Views: 16,214

Keywords: flutter widgets tutorial, flutter widgets, flutter listview, flutter listtile, flutter listtile style, flutter listtile border, flutter listtile remove padding, flutter listtile divider, flutter widgets explained, flutter widget explained, flutter widget example, listtile flutter example, listtile flutter, listtile flutter tutorial, flutter listtile details, flutter listtile design, flutter listtile decoration, custom listtile in flutter, custom listtile design

Id: t7hVCMtnEIw

Length: 9min 27sec (567 seconds)

Published: Tue Jun 28 2022