Flutter Question posted in
The official Flutter documentation can be found here.

Flutter ListView.builder() vs List.map(): Performance difference?

I am coding a habit tracker app currently. To display all habits, I used to do it with the List.map() method:

Column(
  children: [todayList.map((habit) => HabitCard(habit: habit))],
             ...,
            ])

I used this, because I could have multiple lists fully build out on top of each other, without any UI Exceptions.

But soon I noticed a big problem: The build method was called around 10 times per Second, for only 3 habits. This of course is not acceptable, performance wise.

When I tried it with ListView.builder(), the habits only performed the build method, when actually something changed, like updating, editing, etc.

My 2 Questions:

  1. Do you think this performance difference matters that much, considering nowdays devices are much more advanced?
  2. How do I achieve the same effect with ListView.builder, that I did with List.map()?

See picture below of how it should look:
enter image description here

Tags:

2

Answers


  1. 0

    Do you think this performance difference matters that much, considering nowdays devices are much more advanced?

    Depends on how complex the item is, let’s say there are 100 items, every item is playing a video, if you use Column to display then the memory usage is massive, because every item will be rendered at same time.

    How do I achieve the same effect with ListView.builder, that I did with List.map()?

    You can display item lazily, the Column always display three items, when it scrolls to end, add a new item and remove oldest item, but just use ListView.builder() please, it’s easier.

    Login or Signup to reply.
  2. 0

    ListView.builder might help you as it will render only the visible items.

    ListView.builder(
  itemCount: todayList.length,
  itemBuilder: (context, index) {
    final habit = todayList[index];
    return HabitCard(habit: habit);
  },
)

    https://www.dhiwise.com/post/flutter-listview-builder-enhancing-performance
    https://www.linkedin.com/pulse/boost-flutter-app-performance-lazy-loading-using-muhammad-bilal-ab3tf/
    https://stackoverflow.com/a/63070934/11217742

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search