Flutter Problem: Listview Vs Column + SingleChildScrollView
A lot of new flutter programmer while deciding the above topic will get confused, as they perform most of the things similar
Let's take an example of a shopping app where we see a list of products from top to bottom
Let's see how Listview works
Listview Widget shows the unlimited number of children inside it, but the main advantage of using ListView is it renders only visible items on the screen perhaps more specifically I would say ListView.Builder[]
Few Advantages:
- It will be used when we have to render the same widget nth number of times.
- ListView, only the items that are visible are mounted and painted.
Note: One important point you should take care while choosing ListView
ListView[] Render all the items in the list, even if it is not visible.
`ListView.Builder[]` Render only visible items on the screen.
Code Sample:
- ListView
padding: const EdgeInsets.all[8],
children: [
Container[
height: 50,
color: Colors.red[600],
child: const Center[child: Text['Entry A']],
],
Container[
height: 50,
color: Colors.red[500],
child: const Center[child: Text['Entry B']],
],
Container[
height: 50,
color: Colors.red[100],
child: const Center[child: Text['Entry C']],
],
],
]
2. ListView.Builder[]
final List entries = ['A', 'B', 'C'];final List colorCodes = [600, 500, 100];ListView.builder[
padding: const EdgeInsets.all[8],
itemCount: entries.length,
itemBuilder: [BuildContext context, int index] {
return Container[
height: 50,
color: Colors.red[colorCodes[index]],
child: Center[child: Text['Entry ${entries[index]}']],
];
}
]
Output:
Now check how SingleChildScrollView + Column works
The column is used when we have to list widgets vertically on the screen and SingleChildScrollView widget provides scroll functionality for Column widgets.
When we used SingleChildScrollView+Column, the entire item list is rendered even if only a few items are visible.
So for complex layouts with a small number of items, the performance gain may not be worth the trouble, in which case we can use SingleChildScrollView.
Few Advantages:
- It will be useful when different widgets are needed with scroll functionality.
- For complex layouts, when items are less & performance, not a concern we can use it[Like when every other widget required some modification which is different from other]
Code:
SingleChildScrollView[child: Column[
children: [
Container[
height: 250,
color: Colors.red[600],
child: const Center[child: Text['Entry A']],
],
Container[
height: 250,
color: Colors.red[500],
child: const Center[child: Text['Entry B']],
],
Container[
height: 250,
color: Colors.yellow[100],
child: const Center[child: Text['Entry C']],
],
],
],
]
Output:
Summary:
- You could consider ListView as an optimization to the combination of SingleChildScrollView + Column.
- ListView is less flexible. So for complex layouts with a small number of items, the performance gain may not be worth the trouble, in which case we can use SingleChildScrollView.
Github: //github.com/jitsm555/Flutter-Problems/tree/master/listview_column_app
Youtube: