How to Prevent rerender of a widget based on custom logic in flutter?

Question

Coming from a react background, it had many life cycle methods where I could decide whether to rerender the component or not. I recently ran into performance problems in flutter when I have many number of components, because it had to rerender all those.

Is there anything that I can do to prevent such rerender or have more control over it to decide when to rerender without having it traverse through the widget tree?

Answer 1

Usually when you have performance issues because you are rendering too many widgets, you are using ListView or GridView. You can prevent this performance issue by using ListView.builder() or GridView.builder() methods. ListView.builder and GridView.builder will only render the widgets that are on screen, thus preventing performance issues.

Here are some examples:

With GridView:

GridView.builder(
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (BuildContext context, int index) => _grid(data[index]),
) 

With ListView:

ListView.builder(
  itemBuilder: (BuildContext context, int index) => _listItem(data[index]),
)