Introduction

Hey hey... I know I know, it's been a hot long minute since my last article, because I've been super-preoccupied with quite a number of things and tasks that were pending for a long time now. No need to fret, your favorite developer is back, and I've got a whole lot in store for you.

I would like to introduce a mini-series I titled "Understanding Flutter Architecture", where I would cover some components of Flutter's architecture and their uses, and this article is Part 1 of this mini-series

What Would Be Covered

In this article, I will start off by giving you a sneak peek into Flutter's architecture. Next, I will give you sufficient reasons why it is important to understand Flutter's architecture. Finally, I will cover some basic concepts of Flutter's architecture.

So, let's jump right in!!!

Overview of the Flutter Architecture

What comes to mind when you hear or see the word "architecture"? The skeleton and inner workings of a framework or tool? You are absolutely right.

In simple terms, Flutter's architecture is the foundation behind the high-quality, cross-platform, device-agnostic apps built using the Flutter framework on the Dart programming language ecosystem. I know what you're thinking... Yes, that's basically it.

Going deeper, Flutter's architecture is an extensible, layered system of components of varying complexities where each layer is dependent on the one preceding it. It is important to note that each layer has several independent libraries under it.

What's more, each layer has components that enable them to function and interact with each other for a seamless user experience and smooth development process.

Why Understanding Flutter's Architecture is Important

Across all fields (both technical and non-technical), having an understanding of the architecture of any system in that field helps give you a better knowledge and grasp of that system. This also holds true for software development.

Behind every successful and thriving software project is a team of software developers who share a strong and solid understanding of the concept of software architecture. This helps to maintain the core qualities of the app, thereby making it easier to build, design, and maintain scalable and secure software over time.

For you as a budding Flutter developer, it is expedient to have a good grasp of Flutter (and Dart's) overall architecture as this would help you:

• dish out more efficient & maintainable code,
• design, build, and deploy reliable apps and software,
• maintain the core qualities and features of apps and software, and
• scale and evolve apps over an extended period of time.

Ultimately, having an understanding of software architecture would take your software development game to greater heights.

Basic concepts of Flutter's Architecture

In this section, I will cover to some extent the core concepts and logic that underpin Flutter's architecture.

First off, Flutter uses Dart for its codebase. This means that the Dart programming language is used to develop the UIs, logic, and functionalities of applications and software built with Flutter.

Flutter's Two-Step Approach

Next, the Flutter framework uses two approaches - reactive and declarative - in its programming model. This means the following:

• reactive - it responds to user interactions or data changes by updating the UI and its elements to reflect the new changes automatically, thereby creating highly responsive and interactive user interfaces

• declarative - you declare the desired UI and logic in a structured manner based on the current state while Flutter takes care of updating the UI to match the declared state, thereby simplifying your development process

Widget - Its Tree and Lifecycle

Everything in an average Flutter application is a widget, and it is noteworthy to know that widgets are the building blocks of all Flutter applications. Widgets can also be seen as the vital components that make up the visual and interactive elements of your app's user interface (UI).

Safe to say, a Flutter app is a collection of simple and complex widgets that communicate with each other seamlessly.

A widget tree is the hierarchical organization and arrangement of widgets/components that make up the UI of your Flutter app. Usually, a widget tree starts with a root widget like MaterialApp or CupertinoApp, and they determine if your Flutter app is either an Android or iOS app. These root widgets can branch out and have child widgets, and those have their own child widgets, thereby creating a tree-like structure. Each widget in the tree represents a part of the UI, such as buttons, text, images, and much more.

More on _MaterialApp and CupertinoApp widgets in this section!_

The widget lifecycle are the stages a widget passes through from the time of creation to the time of disposal. Having a strong understanding of a widget lifecycle is pivotal in managing states, resources, user flows, and interactions in your Flutter app. The key stages of a typical widget lifecycle are:

• 1. construction (Creation),
• 2. createState (State Creation),
• 3. initState (Initialization/Activation),
• 4. build,
• 5. deactivate (Deactivation/Disposal).

I will talk about widgets and widget lifecycle in greater detail in my next post but before that, let me tell you about the build method.

The build method is called to create and display the widget's UI. This method is usually called when a widget has to be rebuilt like when the parent widget changes or in its internal state changes. The build method basically handles changes in the current state or new state of a widget.

Rendering Pipeline & Engine

In Flutter, there is a sophisticated rendering pipeline engine that is responsible for creating and updating the user interface (UI) of apps. This rendering pipeline engine is a crucial aspect of Flutter's architecture and is craftly designed to efficiently and consistently handle the painting and layout of widgets. Some parts of this rendering pipeline engine include:

• 1. Widget Tree Creation,
• 2. Widget Reconciliation,
• 3. Layout Phase,
• 4. Rendering (Painting) Phase,
• 5. Compositing,
• 6. Frame Rendering,
• 7. GPU Acceleration, and
• 8. Redraw & User Input Handling.

Right now, allow me to introduce Skia.

Skia is the core graphics engine in Flutter, responsible for the display of all visual elements in Flutter apps. It contributes to Flutter's performance, cross-platform capabilities, and capability to create custom graphics and animations. Skia's seamless integration with Flutter plays a vital role in the framework's ability to deliver a consistent and visually appealing user experience on various platforms.

In my future article on Layouts & Views, I will cover Flutter's rendering pipeline engine and skia in greater detail so you'll have a deeper understanding of how the UI of a Flutter app is rendered.

State Management

There are techniques and approaches in Flutter used to handle and manage the state (data that can change over time) of an app. Some of these techniques include:

• BLoC (Business Logic Component) Pattern,
• GetX,
• MobX,
• Riverpod, and
• Redux.

Effective and efficient state management is extremely important for creating responsive, maintainable, and scalable Flutter applications.

Material Design & Cupertino

There are two distinct design languages used in Flutter to create user interfaces that adhere to the design principles and guidelines of different platforms. These design languages are called Material Design and Cupertino. They affect how components like app bars, buttons, cards, navigation drawers, and more are rendered.

• Material Design - was developed and is being maintained by Google, known for its modern, clean visual aesthetics. You can create apps that comply with Material Design guidelines by using the MaterialApp widget in the root of your app.

• Cupertino - was developed and is maintained by Apple, known for its sleek, minimalist, skeuomorphic design. It is associated with iOS apps and is used to create apps that provide the default Cupertino visual elements and styling by using the CupertinoApp widget in the root of your app.

I have two articles in the pipeline that are dedicated to extensively covering Material Design and Cupertino in greater detail with even examples, so give me a follow so you don't miss them.

Did you know that you can actually mix, match, and combine elements from both design languages within a single app to create a unique user interface to cater to both Android and iOS platforms?😉

Customizations & Styling

Flutter has so much flexibility in its customization and styling that equips developers with the arsenal to create visually appealing and highly customizable user interfaces that align with specific design preferences and branding requirements. It does so by providing some features which include:

• widget customization - developers can edit individual widgets by adjusting properties like color, shape, font and size,

• platform-specific styling - enables developers to create interfaces that align with Android and iOS design guidelines, and

• styling with CSS - Flutter for the web supports CSS styling which allows developers to leverage their CSS skills to style Flutter web apps using familiar techniques.

Summary

Well, that right there was a doozy. A lot of areas were covered and so much information was dished out. Let's do a quick recap.

I started off by introducing you to Flutter's architecture. Next, I provided you with reasons why it is important for you my wonderful readers to understand Flutter's architecture and what it does for you in the long run. Finally, I introduced the core concepts of Flutter's architecture where we covered Flutter's widgets, rendering pipeline engine, state management, design languages as well as customizations and styling.

It was a fun learning experience for me and I hope it was for you too!

Conclusion

You've come to the end of this article and I'm convinced that this post is enough to whet your appetite and fuel your desire to better understand Flutter's architecture and inner workings. In Part 2, we will plunge deeper and look extensively into Flutter's widget system, so keep an eye on this space.

See you in the next article!

P.S.

While working on this article, I was listening to a curated playlist with tracks from
Arcane,
League of Legends and a couple more from Sam Tinnesz,
NF,
AJR, and
Imagine Dragons.