Flutter Forms: Improving UX with SingleChildScrollView
Tags: flutter, dart, ios, android
Published: 2019-01-15 20:33:02

---
title: Flutter Forms: Improving UX with SingleChildScrollView
published: true
description: 
tags: #flutter #dart #ios #android
---

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.

{% gist https://gist.github.com/rubensdemelo/818e0cd926e2ed56f2e1e43837b0f29d %}

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

![Login Screen](https://thepracticaldev.s3.amazonaws.com/i/oek5rql5kzfi4vdybrnq.png)
It’s done! Really beautiful, then we started our tests and…
![Somethin gets wrong](https://thepracticaldev.s3.amazonaws.com/i/qgd2rd3jvpwbrvnqfheu.png)
Yep, something crash in our screen. If we try oll up, it won’t work.
Alright, let’s check messages on console:
{% gist https://gist.github.com/rubensdemelo/65c60700d8a28d077e4f476d3fafbcdc %}
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:
<code>consider clipping it with a ClipRect widget before putting it in the flex</code>
Or:
<code>using a scrollable container rather than a Flex </code>

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](https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html).

**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.

{% gist https://gist.github.com/rubensdemelo/6d441b0ce685581044a255842be25d0b %}

![Perfect](https://thepracticaldev.s3.amazonaws.com/i/mee8vj88h7ku7feumfek.png)

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

SingleChildScrollView supports following parameters:

<strong>child:</strong> (Widget) — The widget that scrolls.

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

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

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

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

<strong>reverse:</strong> (bool) — Whether the scroll view scrolls in the reading direction.

<strong>scrollDirection:</strong> (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 

:)