loading...

Flutter Forms: Improving UX with SingleChildScrollView

rubensdemelo profile image rubensdemelo Updated on ・2 min read

Some times the first user interaction with our app is a login/register screen. As a great Flutter developer, we would like to provide the best experience. Ever. So, we do your best and make a gorgeous screen.

Easy to combine a Colum(), TextFormField(), MaterialButton(), SizedBox(), centered with Center(), a small Padding() and voilà:

Login Screen
It’s done! Really beautiful, then we started our tests and…
Somethin gets wrong
Yep, something crash in our screen. If we try oll up, it won’t work.
Alright, let’s check messages on console:


In technical terms, the size of our viewport were reduced and it caused a overflow on our layout.
But Flutter error messages are awesome! It suggests:
consider clipping it with a ClipRect widget before putting it in the flex
Or:
using a scrollable container rather than a Flex

Searching on docs we found a Scrollable widget: A widget that scrolls. Fine, but on next paragraph: It’s rare to construct a Scrollable directly.

Got it. Once it’s rare, we probably don’t need to build it.

But, what widget solve our problem ?

A built-in widget provided by Flutter and works perfectly in this case is SingleChildScrollView.

This widget is useful when you have a single box that will normally be entirely visible.

This is a superpower widget.

First, let’s try to fix our screen and then dive deep into this widget. Wrapping our Center() as SingleChildScrollView() child’s.

Perfect

Well done! Our screen now works perfectly. We can roll up and down and everything is fine!

SingleChildScrollView supports following parameters:

child: (Widget) — The widget that scrolls.

controller: (ScrollController) — An object that can be used to control the position to which this scroll view is scrolled.

padding: (EdgeInsetsGeometry) — The amount of space by which to inset the child.

physics: (ScrollPhysics) — How the scroll view should respond to user input.

primary: (bool) — Whether this is the primary scroll view associated with the parent.

reverse: (bool) — Whether the scroll view scrolls in the reading direction.

scrollDirection: (Axis) — The axis along which the scroll view scrolls.

And as I said before, this is a superpower widget and we will explore on next article.

Thanks for reading. See you soon

:)

Posted on by:

rubensdemelo profile

rubensdemelo

@rubensdemelo

db2 z/os admin, cobol/java developer, flutter enthusiast, frontend newbie

Discussion

markdown guide
 

Awesome! Shared with link in SO. This was specially great for me (using it under a Form widget that was overflown at the bottom) as I was using a Padding widget and this one has a padding property.. so a perfect replacement. Thanks!

 

Alright! Waiting for the next article. Came here because I wanted to make a widget that is scrollable after a certain height