Flutter Scrollbar Widget - The ultimate guide

welcome to flatter teacher in this video I'm going to cover small but an essential topic called scroll bar widget so without wasting time let's get started [Music] scroll bar widget helps the user to identify how far they have scrolled and jump to particular position in a list scroll bar mainly has three components child which represents the score level wizard thumb that indicates which portion of the scroll view is actually visible at the track it is a portion in which thumb moves you can see we have a lister.builder and in order to add scroll bar to scroll view here to wrap the scroll view widget such as list view grid view or single test scroll view inside the scroll bar so let's wrap this list of Builder inside the widget and go to name this as scroll bar and wait and so let me save the code and you can observe when I am when I scroll here is a small scroll bar appeared and when I stop the scrolling scroll bar Fade Away now if you want that thumb or say scroll bar should remain always visible then there is a property called always visible and we have to make this value as true so that the scroll bar will remain always visible for you so I'm not sure whether you guys can see the scroll bar or not there's a small scroll bar okay uh don't we I will just increase its thickness a little bit okay but uh before that let's understand that this property that is the uh is always show is it is duplicated and in the new version you will have the value called say thumb visibility and there is again option called say track visibility so that we can have this track visible so let's write let's say true so that the track that the scroll bar has will remain always visible to you we can increase the thickness of the scroll bar this option called thickness so let's use value of this thickness as a 30 pixel so when I save here now I hope you can see the scroll as well this is a scroll bar and it is having the thickness of 30 pixel we can also apply the circular border for your thumb for this way option called radius and for this radius you have to write the value in the form of say radius start circular and let's pass some radius let's say 20 pixel and you can also know thumb has got some nice circuit value so letter asking me to write your second and I'm just opening that one you can observe your when I just drag this thumb nothing is happening okay I hope you have sense it okay nothing is happening when I'm just dragging this thumb it means by default this scroll bar is not interactive in order to make it interactive there's a property called interactive and if I use value of this one as two so your scroll bar becomes interactive means when I drag this thumb you can obser now it is responding to events that I'm performing moreover when I tap on the track also you can observe your list is moving so let me just tap here here here you can see uh now this scroll bar is completely Interactive now the most important thing scroll bar will only be visible when your list is finite as you can see my list view has got total 20 atom that is item count is 20. if I just come in this item count you can observe your scroll bar won't appear here so it means your list has to be finite there should not be infinite number of elements in the list most of you might be thinking about customizing the scroll bar for example changing the track and thumb color manipulating the padding changing the thumb length and so on scroll bar won't have any support for it however we can change the color of the scroll bar by using the concept called theme but in order to control other parameters it's not possible by using the scroll bar wizard what you have to do for getting the custom scroll bar we have to use a raw scroll bar widget instead of the scroll bar widget let me know in the comment section if you want to learn the raw scroll bar 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,366

Keywords: flutter scrollbar widget, flutter scrollbar, scrollbar widget in flutter, scrollbar in flutter, flutter scrollbar always visible, flutter scrollbar example, flutter scrollbar radius, Flutter Scrollbar tutorial, Flutter Scrollbar widget explained, Flutter Scrollbar best practices, Flutter Scrollbar tips and tricks, How to use Flutter Scrollbar, scrollbar widget, Flutter Scrollbar customization, flutter rawscrollbar, flutter tutorial, flutter tutorial in hindi

Id: g7N3mgOa-Kg

Length: 3min 55sec (235 seconds)

Published: Thu Jun 29 2023