Flutter Tip : Column or List View?
Imagine you are working on an application wherein you need to add one widget below the other, just like we add notes in our notes App, one down the other.
The first thing that strikes our head is the Column widget. A Column widget can accommodate unlimited children under it, as it is not a single child widget. However, do we have more options?
We do.
The List View. The List View can also take unlimited children under it and works just fine, but the question is: “Is it any better than the Column widget?”
Suppose, you have a basic notes making application wherein you wish your notes homepage to be scrollable. Just like in the image below.
That’s where the List View edges over the Column widget. You can definitely make your Column scrollable too, but at the expense of a little labor? The Column has a limited space within which it tries to squeeze it’s children. It is by default not scrollable. Moreover, if every child within the Column widget has a defined height, it will not be able to accommodate all its children in the screen and will throw an error. So, what do we do?
The fix is simple. Just, wrap the Column with a new widget i.e the SingleChildScrollView, and it works.
However, the SingleChildScrollView works best if added to the body property. In case, we wish to make a part of our homescreen scrollable, we can wrap a widget with the SingleChildScrollView and further wrap it with a Container(specifying the height), since the SingleChildScrollView does not know the size in which it should operate.
Additionally, you may face some problem with the screen, when the softkeyboard pops up to take down further notes in the TextField Area.
So, is there a solution to make the whole process a little easy? Well, there is.
Flutter gives us the ListView widget. The ListView widget gives an automatic scrollable Column which saves you of your labor of adding a different widget to make your Column scrollable.
However, since the List View does not have a fixed size (which is rather infinite) like the Column on account of it being scrollable, we need to wrap it with a Container widget and define its height. Moreover, the ListView gives more optimization as compared to the Column widget.
Additionally, Flutter gives us yet a better option than the ListView. It is the ListView.builder. Its great and super optimised.
I will write about the difference between the two in my next article. Till then, keep experimenting with the Column and the ListView widgets. Remember, you learn only when you make mistakes.
Keep loving Flutter. Flirt with Flutter.
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
