Singlechildscrollview Flutter - A Tutorial With Real Time Use Cases

welcome to flood editor in this video we're going to dive deep in single child scroll view widget we are going to cover everything you need to know about this budget including its real-time use properties and how to use it in your flutter application so without wasting time let's get started [Music] first off let's take a look at what the single child scrolled widget is and what it does the single carry scrollview widget is a single child scrolling container that allows us to scroll to the content that is too large to feed on the screen it is especially used for displaying long block of text images or other widget that take ups lot of vertical space you might have a question on scrolling related problems can easily be solved by using list view then why to use single child scroll View when we intend to show long list of items in a scrollable way flutter suggest use of list View but when we need scrollable behavior only to feed the UI perfectly in different sizes or for device rotation then use the single title scroll View moreover to display keyboards for text inputs scroll level alerts and also just small scrolling components like forms user profile setting options are suggested to be placed inside the single child scroll View now let's see how to use single chest scroll view in our code single jsql view has got property called child which is used to place content inside the single child School view as it takes only one visit we usually make a column as a child and place the UI element as a children for this column so for the single just scroll view let me use the column as a child and let's pass some containers inside that column now you can see here I have got a column as a child for the single J scroll view that contains different container with different colors and I can simply scroll through my single child scroll View let's see the real-time use of single chat scroll view with two different examples let's start from the first example which is based on the screen size issue and screen rotation problem many times we create a UI that fit for specific screen size and we feel happy for that for example you can see here I simply have a column as a body and this column contains three different containers on my full screen that is from a specific device size this UI is looking perfectly fine but if I just simply decrease the size of my screen you can see flutter will give me overflow error but right now I don't have a different phone with me so that uh I can't it means I can't explain how I can just minimize the screen size but what I can show you I can show you tree here just okay let me give your student setting and here we have option called display from this display simply let me just increase the font display side okay it's not a font size it's actually a display size so let me just increase uh the display size here and you can see here when I come back to my blood application you will see that flutter has given me error obviously it is the bottom overflow and if I go back in the setting okay let me go back in the setting and let me just make it say small group which I usually use here and when I go back in plot application you can see now it is a quite fine okay this is the first problem here now the second problem is if I rotate my phone okay let me rotate my phone here you can see here as I have rotated my phone you can see here there's a problem so in order to solve this problem or we can simply make uh the use of the single test scroll view so what I can do here simply we have to wrap this column inside the widget and just we obtaining this widget as single type scroll away obviously so let's uh perform it code and save here you can see now uh if I just now just change the font size okay not the font size the display size okay let's just increase the display size little bit and if I go back here you can see there is no problem here in fact a flutter is giving me option for scrolling because it's a single dead scroll view it's not just a column here and now let me rotate my phone and what you'll observe here again I don't have that overflow problem here okay I can simply scroll down okay this is what the beauty of a single tense for you let's see another example that is to solve overflow error in case of form when a keyword appears in the form you can see here I have this simple form made by using a column by placing different X Fields inside it so for this specific device screen it is looking perfectly fine but when I try to enter some data for example let's say when I just click a mouse here and when I try to just type something you can see here this keyboard has appeared and as this keyboard can't fit in my device screen size it is giving me the bottom overflow error now in order to solve this problem we can simply again make the use of finger test scroll view again wrap this column inside a widget and we have to nail this widget obviously as the single tab scroll View and when I save it you can see immediately this problem got solved and you can see now I can simply scroll inside this form so this is again one more important or you can say one most uh one of the most essential use of a single charge scroll View let's understand some of the important properties of single child scroll view okay we have got property called scroll Direction basically scroll Direction lets you to control direction in which single device code view can be scrolled the default value for this is access dot vertical and that is the reason when we created the signature scroll view we'll get this vertical scrolling so we can change this vertical to horizontal for this simply where to use another value called access dot horizontal and in order to make it properly useful what I need to do I need to change this column to say row and what I have to do I have to Simply change the values of this Overton height so let me just interchange the values of width and height here after modifying my code you can see here I got a row that is placed inside scroll View and that gots a different container and now as we have the screw Direction at Access Road horizontal I can simply scroll in the horizontal Direction inside the single time scroll View we have got a reverse property the scroll Direction can be reversed by making the value of reverse to say True by default its value is false so what do you mean by false when we have a false so we can scroll in the direction of say top to bottom but when it changes to say a true so first of all let me explain what will happen when we have false here the observable thing is inside this column we have got a first container which is having a green color and last container is having the sine color so let me reload my application here again you will also know green box is the box which is at the top and the sign Box means in order to get the science box I have to scroll here okay so let me make this say reverse stay true so what will happen here it is going to reverse my list and that is the reason instead of appearing being first box okay what will happen here it has just scrolled automatically and the last box is now currently visible at the bottom so in order to get the box or in the container at the top what I have to do I simply have to scroll and that type of scrolling is called bottom to top scrolling and for the in case of horizontal it turns out to be right to left using padding we can maintain the consistency with UI so that we can adjust the padding of your entire single JavaScript so in this case simply let me use your say agencies.all and let me apply say 32 pixel padding across all my entire single title scroll view so if I scroll you can see it is having the padding of 32 pixel for all the four inches which is properly determines the bouncing effect to be shown when any of these single title scroll view is reached okay so for example let me use here say physics I say clamping scroll physics so what will happen here if I use clamping scroll physics let me right here say const and let me save the code you can also know uh when my just scroll uh means when my list inks you can observe here there is some scrolling effect at the top happening and when my single cell ends and if I just drag here you can see there is some type of scrolling effect here so this is called a scroll physics so inside instead of this say clamping Soul physics I can change it to say bouncing School physics so it will look like a bouncing here for example you can obser now if I just scroll it is looking like a bouncing and at the top here if my screw is if I'm if my list ends here if I've been scrolled you can see here it's looking like a bouncing and there's again property called Say Never uh scroll Phoenix so it's not a property it's a value so you never scroll level scroll physics so if I use here so it will completely disable the scrolling and that is the reason we can't scroll our single time scroll View we are very important property called controller that allows us to control the single test color view programmatically but as it requires a much more explanation and that is the reason I will create a dedicated video for this controller in our upcoming sessions we have got a property called keyboard dismiss Behavior this property is mostly used when a single test score review got some X field and when a keyboard form appears for that one so we can also here I have simply changed my UI and we have got this text field inside the column and this column is placed inside the single chess group obviously default value for this a keyboard dismissed be available scroll view keyboard dismiss Behavior dot manual it means you have to manually dismiss the keyboard for example you can see here keyboard is there and if I just drag here you can option now keyboard is not getting dismissed so what I need to do I need to just click the back button and then only this keyboard is going to got this means but if you want this keyboard to get a dismiss automatically with me drag simply what you have to do we have to change this value to say scroll view keyboard This Means Behavior dot say on track so as soon as we drag automatically the keyboard will disappear we can see here when I just click here and when I just drag in my scroll view missing inside my single set scroll view you can see keyboard got dismissed 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: 2,641

Keywords: singlechildscrollview flutter, singlechildscrollview, flutter singlechildscrollview, singlechildscrollview widget, real time use of singlechildscrollview, singlechildscrollview properties in flutter, singlechildscrollview physics, singlechildscrollview reverse, singlechildscrollview example, singlechildscrollview tutorial, how to use singlechildscrollview in flutter, when to use singlechildscrollview, why to use singlechildscrollview, single child scrollview flutter

Id: tsG8oeE-_Vo

Length: 9min 47sec (587 seconds)

Published: Thu Jun 22 2023