How Flutter renders widget?

Author: hanieh hojjatzadeh
Publish date: 2023-12-11

How Flutter renders widget?

In this article, the operation of Flutter will be explained about the rendering of widgets. The content of this article may not be of much use to you in Flutter app design, but it will give you good knowledge about creating a performant Flutter application.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 But what helps you?

flutter admin panel flutterap

Flutterap is a product of years of work on the admin panel with different programming languages. One of the challenges we encountered was that libraries like React did not allow us to access the hardware in a single platform. As a result, we looked for a framework that would give us hardware access under one programming language and also be highly efficient. We found the Dart language and the Flutter framework and created Flutterap from it. flutter admin dashboard will save your time in development of admin panel or any type of application.

We have decided to turn Flutterap into a special framework for app development that supports not only the admin panel, but also other applications. In this way, we need your trust and we are with you until the end.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Widget and widget tree

First of all, it is better to define the widget in Flutter. The description widget is a part of the user interface in Flutter that can be changed. And the widget tree shows the hierarchical structure of widgets in the user interface. The use of the widget tree is for a better visual representation of the layout of the app.

What is the starting part of app

At the top of the widget tree, there is a widget for the root of the application, usually called MyApp. This widget is the starting point of your Flutter application and is created inside the main function.

How Flutter handle states

But the important question is how does Flutter represent the changes in different states of widgets. There are three concepts in Flutter that we use to explain this article:

  1. widget tree
  2. element tree
  3. RenderObject tree.

 

How  are three concept to rendering widget related to each other?

These three concepts, widget tree, element tree, RenderObject tree, combine to make user interface rendering as efficient as possible. In fact, the widget is the configuration element, and element is the instantiation of those elements. Element manage updating and changing UI. In fact, life cycle management is managed by element .

How does RenderObject work?

RenderObject is going to paint and layout UI and control all these things. When you configure a widget, you are actually assigning properties and values to its components and this is how you form the widget tree. And for drawing these things on screen Flutter should paint them or use from RenderObject where each component knows how to paint itself and it also provides constraints for its children.

Example of RenderObject function

If you have a Center widget that it has a Text widget inside, Center widget can constraining where that text can paint. and in the other case if you wrap Text widget into Padding widget, Padding has two responsibilities it needs know how much padding and what is its child.

In Flutter, RenderObject is a low-level abstraction that represents the visual design and composition of a single widget in the widget tree. RenderObject handles the layout, painting, and testing of widget effects. Each widget in the widget tree has a "RenderObject".

`RenderObject` is part of the Flutter rendering system, which is responsible for converting the widget tree into a visual representation on the screen. It provides a way for Flutter to efficiently layout and paint widgets by abstracting away platform-specific details.

Here are some key points about `RenderObject`:

  1. Layout: The `RenderObject` is responsible for calculating the size and position of the widget it represents based on the constraints given by its parent. The layout process starts from the root of the widget tree and propagates down the tree, with each `RenderObject` determining the layout for its children.
  2. Painting: Once the layout is determined, the `RenderObject` is also responsible for painting the visual representation of the widget on the screen. It participates in the painting pipeline to efficiently render the UI.
  3. Compositing: Flutter uses a retained mode rendering system, which means that the visual elements are first drawn onto individual layers and then composited together to form the final UI. The `RenderObject` is involved in this compositing process, creating and managing layers for its corresponding widget.
  4. Hit Testing: The `RenderObject` also handles hit testing, which means it determines whether a touch event or pointer event has occurred within its bounds. It helps to decide which widget should receive the input event based on the position of the event.

 

It's important to note that developers typically don't interact directly with `RenderObject`s when building Flutter applications. Instead, they work with higher-level widgets that abstract away the complexity of the rendering system. Widgets like `Container`, `Row`, `Column`, `Text`, etc., are all high-level widgets that ultimately have corresponding `RenderObject`s handling their layout, painting, and hit testing.

Understanding the `RenderObject` and the Flutter rendering system becomes essential when you need to create custom widgets or perform advanced optimizations to improve the performance of your Flutter app. In such cases, you might need to subclass `RenderObject` and implement the layout and painting logic yourself. However, these scenarios are relatively rare, and most Flutter developers can build complex UIs without directly dealing with `RenderObject`s.

When you place a widget in runApp it puts it at the root of the tree and then flutter ask the widget to create element and then ask the element to create RenderObject and widget passes all of the configuration required to paint. 

Why Flutter can provide high performance?

Flutter's architecture and rendering system contribute to building performant apps with excellent performance. Here are some reasons why Flutter can deliver high performance:

  1. Hot Reload: Flutter's hot reload feature allows developers to make changes to the code and see the results almost instantly. It speeds up the development process and enables developers to experiment, iterate, and optimize UI designs rapidly without having to restart the entire application.
  2. Widget-based Rendering: Flutter's UI is based on a declarative and widget-based approach. Widgets are lightweight and can be efficiently updated, added, or removed as needed. When a widget's state changes, only that widget and its subtree are rebuilt and repainted, reducing unnecessary updates and leading to better performance.
  3. Efficient Rendering System: Flutter uses a retained mode rendering system, where each `RenderObject` represents a widget's visual properties. This system allows Flutter to efficiently manage and optimize the rendering process, reducing redundant calculations and updates.
  4. Hardware-Accelerated Graphics: Flutter utilizes Skia, a high-performance graphics engine, for rendering UI elements. Skia is a widely-used graphics library that supports hardware acceleration, taking advantage of the underlying platform's GPU capabilities to render UI elements efficiently.
  5. Minimal Native Bridge: Flutter applications run using the Dart virtual machine (VM) and are compiled into native code, allowing them to bypass the performance overhead of an interpreted language. Additionally, Flutter has a minimal native bridge that reduces communication overhead between the Dart code and the native platform.
  6. No WebView Dependency: Unlike some other frameworks that rely heavily on web views to display content, Flutter renders everything natively, which results in faster and smoother user experiences.
  7. Built-in Performance Tools: Flutter provides various performance tools and widgets, such as the Performance Overlay and Timeline, which help developers identify performance bottlenecks and optimize their apps for smooth user experiences.
  8. Ahead-of-Time (AOT) Compilation: Flutter supports AOT compilation, which translates the Dart code into native machine code ahead of time. This approach results in faster startup times and improved runtime performance compared to just-in-time (JIT) compilation.

 

However, it's essential to remember that while Flutter offers a strong foundation for building high-performance apps, the actual performance of an app depends on various factors, including the complexity of the UI, the efficiency of the code, and how well the app utilizes Flutter's features and optimizations. With good coding practices and an understanding of Flutter's rendering system, developers can indeed create fast and responsive applications using the framework.