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
:)
Top comments (2)
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