Introduction

By definition from Flutter, A SingleChildScrollView is "A box in which a single widget can be scrolled".

What does this mean, just like the way we have overflow property in web development that enables us to scroll either on the y-axis or x-axis and text doesn't overflow, SingleChildScrollView performs the same function in mobile development, we can put a text or a field that has the potential to overflow in this widget to enable scrolling when the content is more than the box constrain.

When we say "a single widget" from the definition above, it doesn't mean it must have a single widget in it, it means that it must have a single parent widget and the parent widget can have as many children widgets just as the way JSX works in React.js.

How SingleChildScrollView works

Your Text widget or any widget that wants to use the SingleChildScrollView should be wrapped in the SingleChildScrollView, the SingleChildScrollView should be wrapped in an Expanded widget if your widget is a child of a Column widget, the Column should be a child of a Scafold widget.

Let's modify the code above to use SingleChildScrollView

Keynotes:

• An Expanded widget is a type of widget that is used as a direct child inside of a Column widget or Row widget. if used in a Column widget, it tells its child to take all available heights, if used in a row it tells its child to take all available widths. Expanded widget is more like flex in web development, property like flex: 'number' can be used to specify the amount of width or height it should take

• If the SingleChildScrollView is wrapped with an Expanded widget, then the Expanded widget must be wrapped in a Column widget or Row widget. If the Expanded widget is not wrapped in a constraint (e.g Column or Row) the page goes blank. The Expanded widget must be a direct child of a Column or Row, no widget should be Wrapped around an Expanded widget.

• SingleChildScrollView can be used without a Column widget, in this case, there is really no need to wrap SingleChildeScrollView in an Expanded widget.

• If a SingleChildScrollView is in a Column widget and the Column widget is also a child of Column or Row, the immediate Column that wraps SingleChildScrollView must be wrapped in an Expanded widget or in a constraint (e.g Container or SizedBox) with widths and height specified

Some examples that can lead to error

Using SingleChildScrollView with an Expanded widget and no constraint, the page goes blank.

Solution: Either remove the Expanded widget or Wrap it in a Column or constraint (Container or SizedBox) in case of a constraint box, width and height should be specified.

Using SingleChildScrollView with Column or Row and without Expanded widget, an error in debug console when the content overflow

Solution: wrap SingleChildScrollView with an Expanded widget

Using SingleChildScrollView in a nested Column widget, without an Expanded widget or a constraint, the page goes blank when content overflow.

Solution: Wrap the Colum with an Expanded widget or a constraint box

Using constraint (SizedBox)

Conclusion

In conclusion, using SingleChildScrollView is dependent on the parent and child/children widgets, as a developer, we need to understand the position of our SingleChildScrollView in other to achieve the best solution.