Bottom Overflow When Keyboard Pops Up | Solved 2 ways | Flutter

hello everyone assalamualaikum well let's take  a look so this is my sign up sign in form and   over here uh the whole form is wrapped  around a column okay now the problem is   once i click on this the keyboard shows up  and i get an error okay regardless where i tap   okay now one way to fix it very quickly is to  use a property inside scaffold which is called   resize uh to avoid bottom inset to false i think  the default properties are true that's why you   get the error now let's save it and click on  this and the error is gone all right yeah now   the same could be applied for if you have other  forms like this here this is a signup form okay   now i still get this error now let's go ahead and  find a signup form i still have here a column okay   now here i can do resize bottoms resize to avoid  bottom inset to false and i will save it and the   error is gone okay all right okay now this is one  problem though even though it solves the problem   uh but it creates a new problem i would say  you can't really scroll okay so we want to   scroll actually otherwise sometimes the space is  not enough you want to type in for a long time   okay so in that case this is not a very good  solution so what i would do i would remove this   so we have to make this column scrollable that's  all we want because we just have one column here   so we want to make it scrollable or any  column you want to make it scrollable then the solution will work because what we want   as we tap on this we want it to go up a little  bit and we want it to happen automatically okay   so we can do it easily actually so all we need to  do we need to wrap this column around the single   child scroll view okay so that's what we do  so we do option enter on mac and it would ask   me to wrap it around a widget and that's  what i would do here and here do scroll uh   single child scroll view actually a single  child scroll view here we need to set up   another property which is physics and it is a  property called bouncing scroll physics this one   okay all right now let's save it okay now let's  come over here you see the error doesn't pop up   and it has this cool thing it  goes up automatically okay and it   it might i mean if you have more more options  then you can scroll it up and down like this   so simply just put your column or  the section which one you want to   make scrollable that part you wrap  around this single child scroll view   and then you just use the property which is called  physics property bouncing scroll physics okay   now we'll use the same property for our sign  up page and we'll see the error is gone but   anyway now let's move on to sign up page first  over here now a default property we do get this   error right so what we'll do we'll just wrap it  around single child scroll view so single child   scroll view and we set up the physics property  bouncing scroll physics so now the error is gone   and you can also scroll it up  and down okay once you are done   it goes back to its original position immediately  okay all right so that's how it works thank you so

Channel: dbestech

Views: 33,640

Keywords: flutter keyboard bottom over, flutter bottom overflow by pixels keyboard, flutter keyboard hides textfield

Id: yvxdxppqs3Q

Length: 4min 2sec (242 seconds)

Published: Tue Jan 04 2022