Architectural Layers in Flutter

In this video, we'll get a quick overview of how Flutter is architected. Understanding the different architectural components that make up Flutter and knowing how they work together will give you an insight into how Flutter can run applications in a cross-platform environment. But before we get to the actual architecture, it's important to understand why exactly Flutter was developed. What was Flutter's Goal? Flutter aims to enable developers to deliver high-performance applications that feel natural on different platforms, embracing differences where they exist while sharing as much code as possible. This is a noble goal, and it makes things incredibly easy for developers, but it means that a lot of thought has gone into Flutter's architecture, and the features that Flutter offers. For example, developers can be highly productive while creating Flutter applications because of hot reload.

Flutter apps run in a virtual machine which allows you to quickly view the changes that you've made to your app without needing a full recompile. So each time you make a change, you don't have to stop the app and then compile it and rerun it. Hot reload will automatically reload the changes and allow you to view the results of these changes on the web browser or on a mobile application emulator or simulator right away. Flutter is also able to give you great performance because Flutter apps compile directly to machine code, either to Intel x64 or to ARM instructions, or if you're developing Flutter applications for the web, Dart will compile directly to JavaScript. The fact that Flutter compiles to native instructions allows Flutter applications to take advantage of performance features that are available in native code. The cross-platform nature of Flutter is enabled because of Flutter's design as an extensible layered system.

Every layer in Flutter's architecture depends only on the layer below. So all of the abstractions can be embedded within a layer which performs a certain task and what are those layers? Well, you can see them on your screen right now. Let's go from the top to the bottom. At the very top, you have the Flutter Framework that's written in the Dart programming language. As a developer of Flutter applications, you're going to be spending all of your time understanding and using this framework. You're not really going to worry about the layers below. The Flutter engine is written in C/C++ and it supports all of the primitives necessary to support all Flutter applications. The Flutter engine is responsible for low-level API implementation, managing rendering of frames, network support, and so on. And finally, you have the platform-specific embedder. This is the layer of Flutter that changes based on what platform you're targeting with your Flutter application.

The platform-specific embedder interacts with the OEM components for Android, iOS, or any other platform. The fact that Flutter is built using this layered architecture makes Flutter very powerful. That's because the layered system is extensible. If you want to build on top of Flutter using a new library or a package, it's very very easy to build on top of these layers and the components within these layers. Also, each layer is not a monolithic structure as you shall shortly see. Every layer comprises of a series of independent libraries and those libraries only depend on functionality on the layer that lies immediately below them. The libraries may talk to one another, but only via public APIs. Thus a layer is not a monolithic structure but is made up of modular components.

This modular design makes it easy for a third-party developer to come in and add an extension to the Flutter SDK. Also, the layers are structured in such a way that no layer has privileged access to the layer below. Each layer uses only those APIs that have been publicly exposed by the layer below. And this is extremely important. There is no magic that a particular component of Flutter can achieve that you can't achieve as a third-party developer of Flutter packages and extensions. And another important application of this, the modular design allows every part of Flutter to be optional and replaceable. If there is a component that you do not like from the Flutter SDK, you can replace it with your own custom develop component and still use the remaining parts of the Flutter SDK.