What is the difference between ListView and SingleChildScrollView+ListBody in Flutter?

Question

I have a question about comparing ListView and SingleChildScrollView containing a ListBody. Seemingly, those two results look the same. But I'm curious about whether those two have a difference in function. In my opinion, it could be the part of efficiency or performance, but I'm not sure. Thanks in advance.

SingleChildScrollView + ListBody

final items = List.generate(100, (index) => index).toList();

SingleChildScrollView(
  child: ListBody(
    children: items.map((e) => Text('$e')).toList(),
  )
)

ListView

final items = List.generate(100, (index) => index).toList();

ListView(
  children: items.map((e) => Text('$e')).toList(),
)

Chen Peng · Accepted Answer · 2023-04-04T16:07:32.700

1

I known one diff:

ListView: is lazy load.
ListBody is one-time loading.

Today , I fix a bug, Related to ListView lazy loading features ，I Change to ListBody , fix it .

I have a app, use flutter-markdown , i use ListView to render many markdown fragment，like this：

ListView(
   children: <Markdown>[..._contents], 
)

I use flutter_markdown.MarkdownElementBuilder to parse Markdown outline(TOC Table of Content), but flutter_markdown ast logic only run on Markdown.build(), so , If you don't pull down the ListView page to the bottom, you won't get the full outline ,bug show: bug image

I fixed this bug with ListBody

SingleChildScrollView(
  child: ListBody(
       children: <Markdown>[..._contents], 
    )
)

after fix bug: bug fix image

Additionally, if you are browsing a long page, there may be some stuck (Use ListView) when scrolling down , Because ListView loads calculations from time to time during pull-down.

edited Apr 04 '23 at 16:07

answered Apr 04 '23 at 15:55

Chen Peng

26
3

I appreciate your answer and additional examples. I want to check my understanding of what you have said; in the case of ListView, the more extended height with many components, the more error could occur because of its lazy loading - is this correct? – chunzhi23 Apr 06 '23 at 01:38
Whoever sees this comment, please let me know whether it is true or not. – chunzhi23 Apr 07 '23 at 06:15
@chunzhi23 > the more extended height with many components, the more error could occur because of its lazy loading no , my lazy loading – Chen Peng May 18 '23 at 01:36
@chunzhi23 no, It's not a problem with ListView. The lazy loading mechanism of ListView is very good, but it's just due to the limitation of my usage scenario: I can't get the TOC of this markdown before the flutter_markdown loads all the content.I can only choose to give up not using ListView – Chen Peng May 18 '23 at 01:41

score 0 · Answer 2 · answered Aug 18 '22 at 06:59

I must say I actually have never even heard of the widget ListBody, but when you check its source code you can actually see the comment:

/// This widget is rarely used directly. Instead, consider using [ListView],
/// which combines a similar layout algorithm with scrolling behavior, or
/// [Column], which gives you more flexible control over the layout of a
/// vertical set of boxes.

So the flutter devs themselves sort of don't recommend using it. I also don't know what the exact difference is, so I guess I'm not really answering your question. Maybe someone else can, but you also could just investigate the source code yourself, since it's all open source.

What is the difference between ListView and SingleChildScrollView+ListBody in Flutter?

2 Answers2