Let's start with a refresher of Flutter's architecture. Flutter architecture is a multi-layered system. We can easily use the higher layer whereas the lower layer is complicated but it gives more control to your hand. Sometimes the higher layer doesn't work for me, I move to the lower layer, and it works. You will have access to all the layers on top of the Flutter Engine. <figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/29bbd80f65b86367286b3f95d2ff5388.png" class="kg-image" alt loading="lazy" width="800" height="610" srcset="https://techfastly.com/content/images/size/w600/2021/09/img1.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/29bbd80f65b86367286b3f95d2ff5388.png 800w" sizes="(min-width: 720px) 720px"></figure>You can do a lot of things with a little Flutter code.Flutter Engine is the lowest-level library in Flutter, dart:ui. It doesn't know about widgets, physics, animations or layouts. Yes, it knows about text layout. It can compose pictures and convert them into pixels. It is very difficult to write applications on top of dart:ui. This is why higher layers exist.Whatever exists on top of dart:ui, we call it a framework. And everything below it is called "the engine". The engine is mostly written in C++, the rest Android-specific part is written in Java, and for the iOS-specific part, Objective-C is used. The basic classes and functions inside dart:ui are written in Dart which mostly act as a bridge between Dart and C++.Flutter also has a plugin system. The plugin language has direct access to OEM libraries and third-party libraries. These are libraries that have accumulated over time. If we talk about Android, then the plugin has to be written in Java or Kotlin. If we want to write an iOS plugin, then we have Objective-C or Swift for that.To run Flutter, we have to run Dart on the web because Flutter is written in Dart itself.You don't have to run all of Flutter's code on the web as there will also be some platform-specific code such as the Android and iOS bits.The web platform has evolved a lot in today's era and has brought with it many technologies and specifications. I would definitely like to name some popular features like HTML, Javascript, CSS, SVG, WebGL. Also, you need to see what subset you want for your web features. Because on the web platform you will find many such features which will give you the same output. As far as graphics are concerned, you will get graphics from SVG, Canvas, HTML+CSS and WebGL.Dart has always been compiled to JavaScript. There are many applications that continue to be built in Dart and run in production after being compiled to JavaScript. Flutter's compilation strategy is based on the same infrastructure.As you start exploring Flutter, you'll be faced with several UI rendering options.Now I will share 2 prototypes that I created to get a practical understanding.Widgets: Flutter's widget framework gives you a set of core layout widgets. This allows you to create custom widgets. It supports the built-in capabilities of the web for layout and positioning such as grid layout, flexbox, overflow: scroll etc.Flutter Web Engine: In this prototype, all the layers on top of dart: ui will be retained. There will be an implementation of dart: ui that will run in the browser. With this prototype, you'll get the high level of portability you've come to expect, and your highest framework-level code will be reused between platforms.The best feature of Flutter is that it is portable across all platforms. You also write platform-specific code, but you can also share the same code across platforms. That is, your single codebase will target multiple platforms. The UI is rendered one frame at a time. In each frame, the widget will be created and the layout will be ready and painted on the screen.Building widgetsThe process of creating widgets is instantiated in-memory objects and then the process checks changes in state. This process computes the minimum updates that are necessary for the lower level of the system, layout and painting. The Dart team implemented super-mixin support in dart2js, which compiles the widget framework to JavaScript.LayoutSpeaking of layout, it's tricky. Text layout in particular is quite challenging. For a paragraph, you have to create a Paragraph object. You would then call its layout() method. You won't find the direct text layout() API. If you want to measure text layout properties, layout it on the browser and then read back the corresponding properties from the DOM elements. If you want to know more details click here. <a href="https://api.flutter.dev/flutter/dart-ui/Paragraph-class.html">More Info</a>. GPU Accelerated CanvasesFlutter renders each pixel on the screen. This will give you the advantage that you will know what kind of app it is going to be. Rendering every pixel doesn't mean the performance will be hefty, not like that at all. Hmmm, as we render raw HTML? definitely not that way. I want to draw your attention to GPU accelerated canvases that shore up the performance. In Flutter, you layout the widget with a certain font. Flutter controls any number of widgets on a per-pixel basis.Dart LibrariesFlutter has full access to the Dart library running on the web as of today.Javascript LibrariesDart's js-interop packages are fully supported in flutter i.e. dart:js and package:js.When you start working on Flutter, you will know that it might be recommended to avoid CSS to make your code portable across all platforms.<h3 id="final-words">Final Words</h3>The Flutter community is working to transform the app development process around the world so that we can reach more rapid deployment across platforms from a single codebase. Try to explore as much as you can, especially for portability. And see how you can embed non-Flutter components (react components and angular components) as well.

Top Writers

Get full access
for only $7/month.

Top Writers

Subscribe to Magazine

Get full access for only $7/month.

Get full access
for only $7/month.