What is the difference between ListView and SingleChildScrollView in Flutter?

Question

I have seen few examples using ListView as the main body element of Scaffold and in few tutorials, it's SingleChildScrollView. All that I understood is both allow some axis of scrolling based on the direction that is configured but cannot figure out when to use one over the other?

ListView:

Scaffold
  body : ListView
    children : Padding/Container

SingleChildScrollView:

Scaffold
  body : SingleChildScrollView
    child : Column

Solution 1

You could consider ListView as an optimisation to the combination of SingleChildScrollView + Column.

By using ListView, only the items that are visible are mounted and painted.

On the other hand, by using SingleChildScrollView+Column, the entire item list is mounted+painted, even if only a few items are visible.

The tradeoff is that 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.

Solution 2

ListView, you would use, if you have a list of UI widgets to render, and the number of such widgets is dynamic.

For example: You need to only show a list of contacts on your screen and the list items are more or less similar (UI wise and category wise). Then you would use a Listview.

A SingleChildScrollView can be compared to "ScrollView" in Android. Suppose you have a lot of UI widgets (Buttons, InputFields, Cards, etc), and they start going out of the screen. In such cases, your widgets will overflow and you will start seeing warnings. To fix this, you wrap your UI widgets with a SingleChildScrollView.

For your usecase, "Recommended" section, ListView would be a good choice.

Solution 3

ListView: is used when we have to render the same kind of widgets for n elements

SingleChildScrollView: is used when we have different widgets for n elements.

Ideally, both the cases we required scrolling, Listview have default behavior, but column and other widgets don't have so required to use SingleChildScrollView

Updated: 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. 

Comments

[BeingSuman]

Can you elaborate different widgets for n elements ? Consider i have to display few menu items with Recommended section as show here. Which one would you prefer, ListView / SingleChildScrollView ? And why ?

[Jitesh Mohite]

When you only ListView widget in your screen then Listview, but for the different widgets, SingleChildScrollView as it has the ability to scroll all child widgets declare inside it.

[BeingSuman]

Thanks @Kumar for the answer, it was helpful.

[BeingSuman]

Thanks @Remi for the answer, it was helpful. Just wondering how you gained so much knowledge on Flutter ? Any resources you recommend for learning.

[BeingSuman]

Thanks @jitsm555 for the answer, it was helpful.

[Rémi Rousselet]

Curiosity. I've asked myself all these questions before, and searched for the answer autonomously.

[D B]

Listview itself isn't efficient or what you called optimized, because it also renders and paints al the items in its list. Listview.builder() is the one which use lazy loading and uses resources efficiently.

[Rémi Rousselet]

@Badamchi no ListView does the lazy rendering too. The only difference is the memory allocation for the children parameter.

[D B]

Quote "In contrast to the default ListView constructor, which requires creating all items at once, the ListView.builder() constructor creates items as they’re scrolled onto the screen." Reference: flutter.dev/docs/cookbook/lists/long-lists

[Rémi Rousselet]

@Badamchi yes, but this has nothing to do with rendering. "creating an item (aka widget)" doesn't mean that it will be rendered.

[CoderUni]

@RémiRousselet Thanks for your answer. What's the difference of creating vs rendering a widget?

[cofirazak]

@RémiRousselet Hi, Rémi, you say "The tradeoff is that ListView is less flexible." - could you please explain what exactly you mean by this?

[ig-dev]

There is nothing wrong with using ListView for different types of widgets.

[chemturion]

@ig-dev can you please substantiate your claim? Why is there nothing wrong using ListView for different types of widgets?

[ig-dev]

@chemturion The other way: why is there anything wrong with non-homogeneous children? There is no such constraint. Documentation also mentions no such thing, and it works just as expected. You can use it to lay out your application. The claim is made up by OP out of nowhere.