FlutterWorld
Published in

FlutterWorld

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:

  1. It will be used when we have to render the same widget nth number of times.
  2. 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:

  1. ListView
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
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<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[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:

Both above code will produce the above 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:

  1. It will be useful when different widgets are needed with scroll functionality.
  2. 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: <Widget>[
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:

SingleChildScrollView + Column.

Summary:

  1. You could consider ListView as an optimization to the combination of SingleChildScrollView + Column.
  2. 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: https://github.com/jitsm555/Flutter-Problems/tree/master/listview_column_app

Youtube:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jitesh Mohite

Jitesh Mohite

I am technology enthusiastic, want to learn things quickly and dive deep inside it. I always believe in developing logical things which makes impact on end user