MOCKSTACKS
EN
Questions And Answers

More Tutorials









Flutter Change Detection


As we start to delve deeper into Flutter, we need to start introducing the subject of change detection - how Flutter gets the UI rebuilt when something changes. Efficient change detection is the key to Flutter achieving a 60 frames per second refresh rate.

The purpose of this chapter is to introduce how Flutter performs change detection, how it uses keys and how it renders the UI.

Remember that most of this chapter is an over-simplification of what is really going on. It is my interpretation based on the limited information available at the time of writing the book. Most of the information used for this chapter was taken from the Google Developers channel on YouTube, so I am pretty sure it is correct.

Change Detection

Change detection is when Flutter figures out what needs to be redrawn in the UI, redrawing as little as possible to keep it fast. Optimizing
Change Detection, giving Flutter the information that it needs to redraw (quickly calculating the minimal redraw) is the trick to Flutter performance.

Widgets

So, at this point we know that we compose the UI out of many Widget objects, which build a tree of Widgets that represents the desired state of the UI.

Elements

Unknown to you, the Widgets you create in your Widget ‘build’ methods each have a corresponding Element object built by the Flutter framework to track where the Widget is in the structure of the UI.

Elements are expensive to create and if it’s possible, they should be reused.

Elements store as little information as possible:



A reference to the Widget they were created from.
A reference to the Render object that renders the representation of the Widget/Element.
A reference to the State attached to that element (Stateful Widgets).
The type of Widget they represent.
The children they will have.
A key to the Widget (for StatefulWidgets).
The first time when a widget is created, it is inflated to an Element and then the Element gets inserted it into the Element Tree.


Conclusion

In this page (written and validated by ) you learned about Flutter Change Detection . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter Other Performance Considerations.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.