Flutterexperts

In this Article, We are going to learn about How Exactly Flutter Renders Widgets. This may might not be a Key-Facets in the Daily development of Flutter Apps but will surely give you up a Prominent Understanding about making of Performant Flutter Apps & what constitutes behind the idea of Flutter Working under the Hood.

For Novice,

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

To get a visual understanding through the help of video , Please watch:

“Everything is a widget in Flutter”

So, In order to understand Widget rendering in flutter . Let’s see what the flutter document has to say about Widget in its official documentation .

But what might will come up in your mind is that how can User Interface be Immutable (unchangeable) as we all know that UIs are not at all immutable as we readily mutate different parts of our UIs by swapping pieces in|out by adding divergent widgets. So, If Widgets are Immutable then

How Does Flutter Manage State of your UI?

Apparently, what Flutter does is that It actually manages this through with the help of 3 trees instead of a Singleton for the State Management.

Amalgamating these 3 different concepts, Make the rendering of a UI as performant as as we possibly can.

Flutter manage these 3 Different tree in for its rendering process:

So we’ve already seen that a widget is immutable,and so that kind of makes sense because you are working with a declarative framework so you grasp what your UI is going to like like & configure it with widgets.

Widget describe configuration of an element which are particularly an instantiation of those widget. It can also be termed as the mutable piece of the tree or It’s the thing that manages updating and changing of the UI , controlling lifecycle of widgets .

Thirdly, we have a RenderObject which is what’s going to lay out and paint your UI.

What needs to be Amply Clear here is that on the point of widget drawing , Flutter does not look at the Widget tree but the RenderObject tree.

But Why are we even creating 3 trees ?

For this we need to drop down onto the level & look at source code from flutter framework for when it create a flutter app.

Step-by-Step Walkthrough ::

Flutter app calls runApp() function initially:

It takes the Widget given by the runApp and put it at root of tree.

Widget then creates the LeafRenderObjectElement called leaf, as tree are only one level deep with one widget. Element then request creation of RenderObject and passes all of the configuration needed to paint the widget. Now we have our widget trees but what if we wanna do some changes:

Let’s run it again and see what happens

You want to change some aspect of your widget so what happens when something changes in our widget.You probably will still be asking Why are we doing this amount of task to get one thing on screen ,this will unfold when:

Magic really happens when things change

This can be understood by setting 2 runApp function:

Flutter realises it has done the stipulated amount of needed work so how it can reuse it. It will then call canUpdate method which can be performed when either : runtime or keys of widgets match. Alas, Render Paragraph is updated — Element update next time it paints UI. Using our RenderObject tree its going to paint new values:

We have readily swapped one immutable widget though we have neither created|destroyed anything much- used a simple update method here , Optimising amount of work needed going from one UI state to other — Ensuring that we Reuse .

Reuse: This can be easily shown by a Demo which readily shows that if the render object element is same flutter reuse most if its components so that it can maintain the desired frame-per-second.

Demo::

The above flutter app has 2 trees which are almost identical with a row consisting- RichText , SizedBox & Image .

What’s the dire need as we know is that on widget rebuilding no new RenderObject should be created — RenderObject should remain Same .

This can be Illustrated with the help of Dart Dev Tools that can be considered as browser based tools to debugging and analysing flutter Apps.For Overview about Dart Devtools::

:: Opening Dart DevTools , Widget tree will be shown on one side and other side shows instance id of RenderObject:

We can readily see that on switching the tree — instance id of all(RichText SizedBox & Image) have remained the same . This is illustrated in DartDevTools by tapping on SwitchTree that even though widget tree is changed — new text and image are displayed but their RenderObject are bound to remain Same but No change is not all we need as in flutter things change Readily. To consider change I have removed the Sizedboxwith a completely different widget , Padding

When flutter realises it has now a different widget , Padding so that it does need SizedBox now .It completely destroys it and create a completely different RenderObject for padding but that’s Intended to happen . What needs to be kept in mind is that instance id of all other widget have remained the same .

Closing Thoughts

Flutter application usually possess multiple widgets with several layers of depth across a broad spectrum making it exorbitant in rebuilding widgets making it the optimum reason why flutter has adopted this method of using three concepts to minimise amount of processing it needs to do to make these changes. Let’s refresh reponsibility of these 3 tree:-

::Widget : Configure User Interface.

::Element :Ensure when things change updates are done accordingly.

::Render object : Sizes & Paint UIs on Screen.

So Yeah this is the reason Why Flutter and Dart enthusiasts are Elated with the Performance they are getting from Flutter Apps and been Quite Eventful in Paving Up Paths for many to Adapt early to this Wondrous Framework. Hopefully, this blog will help you in comprehending out the Widget Rendering in flutter by adding a Perfect Competitive niche to your knowledge base .

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

We welcome feedback, and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸