How to make a column widget scrollable in Flutter
The SingleChildScrollView widget in Flutter is the key to making a column widget scrollable. It enables users to scroll through the content vertically, ensuring it is accessible, even when it extends beyond the visible screen.
Error
The problem arises when the content within a column widget exceeds the vertical space available on the screen. Without scrollability, the content gets cut off, making it inaccessible to users. We can see the following error in the terminal.
Vertical viewport was given unbounded height.
This error will arise in the terminal when the available content is not able to render on the screen, as shown below.
Syntax
SingleChildScrollView is a single-child widget so we can add the column widget as a child.
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
],
),
),
);
Example
In the example below, we have a main.dart file in the lib folder where we have defined a column widget with six containers, each with a height of 200 and a different color. By wrapping the column with SingleChildScrollView, the column widget becomes scrollable, allowing users to view the entire content vertically. This technique ensures that even if the containers exceed the available screen space, users can easily scroll through the content to access all the containers.
bmFtZTogbmV3YXBwCmRlc2NyaXB0aW9uOiBBIG5ldyBGbHV0dGVyIHByb2plY3QuCiMgVGhlIGZvbGxvd2luZyBsaW5lIHByZXZlbnRzIHRoZSBwYWNrYWdlIGZyb20gYmVpbmcgYWNjaWRlbnRhbGx5IHB1Ymxpc2hlZCB0bwojIHB1Yi5kZXYgdXNpbmcgYGZsdXR0ZXIgcHViIHB1Ymxpc2hgLiBUaGlzIGlzIHByZWZlcnJlZCBmb3IgcHJpdmF0ZSBwYWNrYWdlcy4KcHVibGlzaF90bzogJ25vbmUnICMgUmVtb3ZlIHRoaXMgbGluZSBpZiB5b3Ugd2lzaCB0byBwdWJsaXNoIHRvIHB1Yi5kZXYKCiMgVGhlIGZvbGxvd2luZyBkZWZpbmVzIHRoZSB2ZXJzaW9uIGFuZCBidWlsZCBudW1iZXIgZm9yIHlvdXIgYXBwbGljYXRpb24uCiMgQSB2ZXJzaW9uIG51bWJlciBpcyB0aHJlZSBudW1iZXJzIHNlcGFyYXRlZCBieSBkb3RzLCBsaWtlIDEuMi40MwojIGZvbGxvd2VkIGJ5IGFuIG9wdGlvbmFsIGJ1aWxkIG51bWJlciBzZXBhcmF0ZWQgYnkgYSArLgojIEJvdGggdGhlIHZlcnNpb24gYW5kIHRoZSBidWlsZGVyIG51bWJlciBtYXkgYmUgb3ZlcnJpZGRlbiBpbiBmbHV0dGVyCiMgYnVpbGQgYnkgc3BlY2lmeWluZyAtLWJ1aWxkLW5hbWUgYW5kIC0tYnVpbGQtbnVtYmVyLCByZXNwZWN0aXZlbHkuCiMgSW4gQW5kcm9pZCwgYnVpbGQtbmFtZSBpcyB1c2VkIGFzIHZlcnNpb25OYW1lIHdoaWxlIGJ1aWxkLW51bWJlciB1c2VkIGFzIHZlcnNpb25Db2RlLgojIFJlYWQgbW9yZSBhYm91dCBBbmRyb2lkIHZlcnNpb25pbmcgYXQgaHR0cHM6Ly9kZXZlbG9wZXIuYW5kcm9pZC5jb20vc3R1ZGlvL3B1Ymxpc2gvdmVyc2lvbmluZwojIEluIGlPUywgYnVpbGQtbmFtZSBpcyB1c2VkIGFzIENGQnVuZGxlU2hvcnRWZXJzaW9uU3RyaW5nIHdoaWxlIGJ1aWxkLW51bWJlciBpcyB1c2VkIGFzIENGQnVuZGxlVmVyc2lvbi4KIyBSZWFkIG1vcmUgYWJvdXQgaU9TIHZlcnNpb25pbmcgYXQKIyBodHRwczovL2RldmVsb3Blci5hcHBsZS5jb20vbGlicmFyeS9hcmNoaXZlL2RvY3VtZW50YXRpb24vR2VuZXJhbC9SZWZlcmVuY2UvSW5mb1BsaXN0S2V5UmVmZXJlbmNlL0FydGljbGVzL0NvcmVGb3VuZGF0aW9uS2V5cy5odG1sCiMgSW4gV2luZG93cywgYnVpbGQtbmFtZSBpcyB1c2VkIGFzIHRoZSBtYWpvciwgbWlub3IsIGFuZCBwYXRjaCBwYXJ0cwojIG9mIHRoZSBwcm9kdWN0IGFuZCBmaWxlIHZlcnNpb25zIHdoaWxlIGJ1aWxkLW51bWJlciBpcyB1c2VkIGFzIHRoZSBidWlsZCBzdWZmaXguCnZlcnNpb246IDEuMC4wKzEKCmVudmlyb25tZW50OgogIHNkazogJz49My4wLjUgPDQuMC4wJwoKIyBEZXBlbmRlbmNpZXMgc3BlY2lmeSBvdGhlciBwYWNrYWdlcyB0aGF0IHlvdXIgcGFja2FnZSBuZWVkcyBpbiBvcmRlciB0byB3b3JrLgojIFRvIGF1dG9tYXRpY2FsbHkgdXBncmFkZSB5b3VyIHBhY2thZ2UgZGVwZW5kZW5jaWVzIHRvIHRoZSBsYXRlc3QgdmVyc2lvbnMKIyBjb25zaWRlciBydW5uaW5nIGBmbHV0dGVyIHB1YiB1cGdyYWRlIC0tbWFqb3ItdmVyc2lvbnNgLiBBbHRlcm5hdGl2ZWx5LAojIGRlcGVuZGVuY2llcyBjYW4gYmUgbWFudWFsbHkgdXBkYXRlZCBieSBjaGFuZ2luZyB0aGUgdmVyc2lvbiBudW1iZXJzIGJlbG93IHRvCiMgdGhlIGxhdGVzdCB2ZXJzaW9uIGF2YWlsYWJsZSBvbiBwdWIuZGV2LiBUbyBzZWUgd2hpY2ggZGVwZW5kZW5jaWVzIGhhdmUgbmV3ZXIKIyB2ZXJzaW9ucyBhdmFpbGFibGUsIHJ1biBgZmx1dHRlciBwdWIgb3V0ZGF0ZWRgLgpkZXBlbmRlbmNpZXM6CiAgZmx1dHRlcjoKICAgIHNkazogZmx1dHRlcgoKCiAgIyBUaGUgZm9sbG93aW5nIGFkZHMgdGhlIEN1cGVydGlubyBJY29ucyBmb250IHRvIHlvdXIgYXBwbGljYXRpb24uCiAgIyBVc2Ugd2l0aCB0aGUgQ3VwZXJ0aW5vSWNvbnMgY2xhc3MgZm9yIGlPUyBzdHlsZSBpY29ucy4KICBjdXBlcnRpbm9faWNvbnM6IF4xLjAuMgoKZGV2X2RlcGVuZGVuY2llczoKICBmbHV0dGVyX3Rlc3Q6CiAgICBzZGs6IGZsdXR0ZXIKCiAgIyBUaGUgImZsdXR0ZXJfbGludHMiIHBhY2thZ2UgYmVsb3cgY29udGFpbnMgYSBzZXQgb2YgcmVjb21tZW5kZWQgbGludHMgdG8KICAjIGVuY291cmFnZSBnb29kIGNvZGluZyBwcmFjdGljZXMuIFRoZSBsaW50IHNldCBwcm92aWRlZCBieSB0aGUgcGFja2FnZSBpcwogICMgYWN0aXZhdGVkIGluIHRoZSBgYW5hbHlzaXNfb3B0aW9ucy55YW1sYCBmaWxlIGxvY2F0ZWQgYXQgdGhlIHJvb3Qgb2YgeW91cgogICMgcGFja2FnZS4gU2VlIHRoYXQgZmlsZSBmb3IgaW5mb3JtYXRpb24gYWJvdXQgZGVhY3RpdmF0aW5nIHNwZWNpZmljIGxpbnQKICAjIHJ1bGVzIGFuZCBhY3RpdmF0aW5nIGFkZGl0aW9uYWwgb25lcy4KICBmbHV0dGVyX2xpbnRzOiBeMi4wLjAKCiMgRm9yIGluZm9ybWF0aW9uIG9uIHRoZSBnZW5lcmljIERhcnQgcGFydCBvZiB0aGlzIGZpbGUsIHNlZSB0aGUKIyBmb2xsb3dpbmcgcGFnZTogaHR0cHM6Ly9kYXJ0LmRldi90b29scy9wdWIvcHVic3BlYwoKIyBUaGUgZm9sbG93aW5nIHNlY3Rpb24gaXMgc3BlY2lmaWMgdG8gRmx1dHRlciBwYWNrYWdlcy4KZmx1dHRlcjoKCiAgIyBUaGUgZm9sbG93aW5nIGxpbmUgZW5zdXJlcyB0aGF0IHRoZSBNYXRlcmlhbCBJY29ucyBmb250IGlzCiAgIyBpbmNsdWRlZCB3aXRoIHlvdXIgYXBwbGljYXRpb24sIHNvIHRoYXQgeW91IGNhbiB1c2UgdGhlIGljb25zIGluCiAgIyB0aGUgbWF0ZXJpYWwgSWNvbnMgY2xhc3MuCiAgdXNlcy1tYXRlcmlhbC1kZXNpZ246IHRydWUKCiAgIyBUbyBhZGQgYXNzZXRzIHRvIHlvdXIgYXBwbGljYXRpb24sIGFkZCBhbiBhc3NldHMgc2VjdGlvbiwgbGlrZSB0aGlzOgogICMgYXNzZXRzOgogICMgICAtIGltYWdlcy9hX2RvdF9idXJyLmpwZWcKICAjICAgLSBpbWFnZXMvYV9kb3RfaGFtLmpwZWcKCiAgIyBBbiBpbWFnZSBhc3NldCBjYW4gcmVmZXIgdG8gb25lIG9yIG1vcmUgcmVzb2x1dGlvbi1zcGVjaWZpYyAidmFyaWFudHMiLCBzZWUKICAjIGh0dHBzOi8vZmx1dHRlci5kZXYvYXNzZXRzLWFuZC1pbWFnZXMvI3Jlc29sdXRpb24tYXdhcmUKCiAgIyBGb3IgZGV0YWlscyByZWdhcmRpbmcgYWRkaW5nIGFzc2V0cyBmcm9tIHBhY2thZ2UgZGVwZW5kZW5jaWVzLCBzZWUKICAjIGh0dHBzOi8vZmx1dHRlci5kZXYvYXNzZXRzLWFuZC1pbWFnZXMvI2Zyb20tcGFja2FnZXMKCiAgIyBUbyBhZGQgY3VzdG9tIGZvbnRzIHRvIHlvdXIgYXBwbGljYXRpb24sIGFkZCBhIGZvbnRzIHNlY3Rpb24gaGVyZSwKICAjIGluIHRoaXMgImZsdXR0ZXIiIHNlY3Rpb24uIEVhY2ggZW50cnkgaW4gdGhpcyBsaXN0IHNob3VsZCBoYXZlIGEKICAjICJmYW1pbHkiIGtleSB3aXRoIHRoZSBmb250IGZhbWlseSBuYW1lLCBhbmQgYSAiZm9udHMiIGtleSB3aXRoIGEKICAjIGxpc3QgZ2l2aW5nIHRoZSBhc3NldCBhbmQgb3RoZXIgZGVzY3JpcHRvcnMgZm9yIHRoZSBmb250LiBGb3IKICAjIGV4YW1wbGU6CiAgIyBmb250czoKICAjICAgLSBmYW1pbHk6IFNjaHlsZXIKICAjICAgICBmb250czoKICAjICAgICAgIC0gYXNzZXQ6IGZvbnRzL1NjaHlsZXItUmVndWxhci50dGYKICAjICAgICAgIC0gYXNzZXQ6IGZvbnRzL1NjaHlsZXItSXRhbGljLnR0ZgogICMgICAgICAgICBzdHlsZTogaXRhbGljCiAgIyAgIC0gZmFtaWx5OiBUcmFqYW4gUHJvCiAgIyAgICAgZm9udHM6CiAgIyAgICAgICAtIGFzc2V0OiBmb250cy9UcmFqYW5Qcm8udHRmCiAgIyAgICAgICAtIGFzc2V0OiBmb250cy9UcmFqYW5Qcm9fQm9sZC50dGYKICAjICAgICAgICAgd2VpZ2h0OiA3MDAKICAjCiAgIyBGb3IgZGV0YWlscyByZWdhcmRpbmcgZm9udHMgZnJvbSBwYWNrYWdlIGRlcGVuZGVuY2llcywKICAjIHNlZSBodHRwczovL2ZsdXR0ZXIuZGV2L2N1c3RvbS1mb250cy8jZnJvbS1wYWNrYWdlcwo=
Conclusion
Using the SingleChildScrollView widget, you can make a column widget scrollable in Flutter. This approach is essential when dealing with content that uses more vertical space than is available. It ensures that all content remains accessible by enabling users to scroll through it.
Whenever you encounter situations where your column widget's content overflows, consider utilizing the SingleChildScrollView widget to provide a seamless scrolling experience for your users.
Free Resources
