SingleChildScrollView: When One Widget Needs to Scroll
SingleChildScrollView is an emergency scrollbar for one widget that usually fits on screen. Use it when a layout might overflow on small devices. The footgun: it renders its entire child at once, so never use it for long lists—use ListView instead.
WHY IT EXISTS Sometimes a layout is designed to fit the screen, but unexpected conditions like small device sizes, landscape orientation, or split-screen mode cause it to overflow. SingleChildScrollView provides a simple way to make that self-contained layout scrollable without rewriting it as a complex, lazy-loading list.
THE MENTAL MODEL Think of SingleChildScrollView as a box that gives its one child infinite space in the scroll direction. It's not a "lazy" widget; it builds and renders its entire child tree at once, including the parts that are initially off-screen. It's a simple viewport for a single, non-list-like piece of content.
HOW IT WORKS SingleChildScrollView wraps one child widget. If that child's content is larger than the viewport (the visible area), scrolling is enabled. If the child fits, no scrolling occurs. This simplicity hides a common conflict: it provides its child with unbounded constraints in the scroll direction. This causes issues with widgets like Column, which try to expand to fill all available space, leading to layout errors because the "available space" is infinite.
WHEN TO USE IT Use it for a single, coherent piece of content that is expected to fit on the screen most of the time. It's perfect for a form in a dialog, a complex card that might not fit on a small phone, or a Column-based layout that just needs a fallback for small screens.
WHEN NOT TO USE IT Never use it for a long or indeterminate list of items. A SingleChildScrollView containing a Column with many children is a classic performance anti-pattern. Because it renders everything at once, memory and CPU usage will be very high. For any list-like data, use ListView or CustomScrollView, which build children lazily as they scroll into view.
ONE CANONICAL EXAMPLE The most common challenge is wrapping a Column, which then tries to take up infinite height. To fix this, you can wrap the Column in a ConstrainedBox inside the SingleChildScrollView. The ConstrainedBox provides a minimum height (often the viewport's height, found using a LayoutBuilder). This forces the Column to be at least that tall but allows it to grow larger if its content overflows, which correctly enables scrolling. This resolves the layout conflict without an error.
Read the original → api.flutter.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.