Flutter Forms: Improving UX with SingleChildScrollView

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à:

It’s done! Really beautiful, then we started our tests and…

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.

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

:)