Contents

Our Guide to Flutter Architecture

Flutter is a popular open-source UI kit by Google, which allows building cross-platform apps. In particular, Flutter allows code reuse across both Android and iOS operating systems. As a result, developers are able to produce high-quality apps that feel comfortable on different platforms.

Flutter bloc architecture is indeed sophisticated and provides many benefits. In this article, we will review Flutter’s mobile app architecture and focus on its core principles and concepts. Also, we will speak about our unique Flutter solutions for the growing Russian mobile app market and creating the best architecture for Flutter.

The basics of Flutter architecture

First, let’s have the basics of Flutter architecture explained. Flutter consists of two major parts – a framework with a UI library based on widgets and a software development kit (SDK).

  • In a nutshell, a framework is a UI Library based on widgets, which contains various reusable UI elements, such as sliders, buttons, text inputs, and others. These elements can be later personalized based on your needs.
  • An SDK is a set of tools to develop applications and compile your code into the native machine code for Android and iOS.

To work with Flutter, you have to use the Dart programming language created by Google in October 2011. Since then, Dart has dramatically improved and remains one of the top choices for developing mobile and web applications.

Flutter engine is mostly written in C++ and remains at the core of Flutter. The engine is responsible for the low-level implementation of Flutter’s core API, including accessibility support, Dart runtime, graphics text layout, and plugin architecture.

Flutter applications are packaged similarly to other native applications in relation to the underlying operating system. A platform-specific embedder coordinates with the underlying operating system for access to input and rendering surfaces. Besides, Flutter code can be integrated into an existing application as a module through the use of the embedder.

Flutter architecture diagram

Flutter is arranged as a layered, extensible system. It functions as a sequence of independent libraries, with each of them depending on the underlying layer. Each part of the framework level is replaceable, and no layer has privileged access to the layer below.

As a rule, developers work with Flutter through the Flutter framework written in the Dart language. It incorporates the layout, a rich set of platforms, as well as foundational libraries comprising multiple layers. If we look from the bottom to the top, these layers are arranged as follows:

  • Basic building block services and foundational classes, such as animation, gestures, and painting, offer commonly used abstractions over the underlying foundation.
  • The rendering layer brings forth an abstraction for working with layout and building a tree of renderable objects.
  • The widgets layer introduces the reactive programming model. Each class in the widgets layer corresponds with a render object in the rendering layer. Besides, the widgets layer allows defining combinations of reusable classes.

The Cupertino and Material libraries provide all-inclusive sets of controls that implement the iOS or Material design languages through the use of the widget layer composition.

Flutter architecture key features

Flutter architecture components or Everything is a widget

On every side, Flutter is about widgets. Widgets are the core Flutter architecture components and the major building blocks of a Flutter app’s user interface. Widgets make use of gesture recognition and advanced animation. Subsequently, they render the results to the Skia canvas, a graphics engine written in C/C++ that commands the CPU or GPU to complete the drawing on the device.Here is a typical Flutter bloc architecture example, a bare minimum stateful widget.

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState()
  } 
}
class MyAppState extends State<MyApp> {
  @override
  Widget build (BuildContext context) {
    return OneOrMoreWidgets;
  }
}

Widget composition

Widgets are composed of many single-purpose widget blocs that produce powerful effects when combined. Flutter uses the same basic concept (a Widget) in the widgets layer in order to represent animations, drawing to the screen, layout, navigation, state management, theming, and user interactivity. 

As for the animation layer and the rendering layer, there are hundreds of widgets as well. Besides, Flutter has utility widgets that benefit from the compositional approach.

Widget hierarchy

Widgets form a composition-based hierarchy. Each widget is located inside its parent and receives context from there. This hierarchy is present all the way up to the root widget. In addition, the widget hierarchy is broad by design to increase the feasible number of combinations.

When responding to various events, apps update their user interface by commanding the framework to replace a widget in the hierarchy. The framework efficiently updates the user interface after comparing the new and old widgets.

Widget classes and categories

The framework establishes two paramount classes of widgets: stateful and stateless widgets. If the unique characteristics of a widget have to change depending on different factors, it is classified as stateful. If a widget has no mutable state and its properties remain unchanged over time, it is called stateless.

Based on their features, widgets in Flutter can also be grouped into multiple categories:

  • Layout widgets

Flutter provides a large number of widgets with a layout feature to allow composing multiple widgets into a single widget. The most popular layout widgets include Center, Column, Container, Row, and Stack.

  • Platform independent / basic widgets

Flutter provides a substantial number of basic widgets to create both complex and simple user interfaces in a platform-independent manner. They include text, image, and icon.

  • Platform-specific widgets

They include Android-specific widgets and iOS-specific widgets. Android-specific widgets are called Material widgets. They are configured based on Material Design guidelines by Android OS. iOS-specific widgets are called Cupertino widgets. They are designed in accordance with Human Interface Guidelines by Apple.

  • State maintenance widgets

All Flutter widgets belong either to stateful or stateless widget categories.

Flutter widgets categories

Flutter’s rendering model

At some point, you might wonder: how can Flutter offer comparable performance to single-platform frameworks when being a cross-platform framework?

Then we should think about the ways how traditional Android apps perform. Obviously, one first uses the Java code of the Android framework when drawing. The Android system libraries supply the components responsible for drawing to a Canvas object, which Android can then render with the Skia canvas.

Cross-platform frameworks usually attempt to smooth out the inconsistencies of each platform representation by creating an abstraction layer over the underlying native iOS and Android UI libraries. 

App code is frequently written in an interpreted language like JavaScript, which must, in turn, interact with the Objective-C-based iOS system or the Java-based Android libraries to display UI. Consequently, it adds significant overhead, particularly where there is a lot of interaction between the app logic and the UI.

On the contrary, Flutter bypasses the system’s UI widget libraries in favor of its own widget set and thus minimizes the abstractions. Flutter’s visuals are painted by the Dart code. It gets compiled into the native code, which utilizes Skia for rendering. As part of the engine, Flutter also embeds its own copy of Skia.

Flutter rendering model

Here’s how Flutter minimizes the abstractions when bypassing the system’s UI widget libraries in favour of its own.

Even if the phone has not been updated with a new Android version, it allows the developer to upgrade the app and to stay updated with the latest performance improvements. The same applies to Flutter on other native platforms, such as Windows, iOS, or macOS.

How does Flutter integrate with other codes?

Flutter provides a range of interoperability mechanisms, whether you embed native controls in a Flutter app or embed Flutter in an existing application.

Flutter allows you to add custom code for mobile and desktop apps through a platform channel. It is a simple mechanism for communicating between the platform-specific code of your host app and your Dart code.

You can send and receive messages between a platform component written in a language like Swift or Kotlin and Dart by creating a common channel. Data is serialized from a Dart type into a standard format and then deserialized into an equivalent representation in Kotlin or Swift.

Flutter code integration

What are the benefits of Flutter application architecture?

  • The modern and simple framework

Flutter allows you to create a real native application without a bunch of code.

  • Quick compilation procedure

With Flutter, it is possible to change your code and observe the changes in real-time in case these are not significant modifications.

  •   Excellent for MVPs

Flutter MVP architecture is fully performant and not different from a native app. If you need to create a mobile application for investors as soon as possible, then Flutter is an excellent choice. It is much cheaper since you don’t need to create two mobile apps for iOS and Android simultaneously.

  •  Great MVVP architecture

Flutter MVVP architecture also has a string of advantages. First, it offers alternatives to Android architecture patterns. Second, it provides a transparent interface to view the controller. Third, it makes testing more accessible by breaking the alliance between app logic and UI.

  •   Flutter architecture Github

At present, Flutter has 34 available repositories on Github. Thousands of developers globally have embraced Flutter’s complete package on Github and left good reviews.

Our Flutter architecture best practices

Surf’s Flutter department has existed for several years thus far, and we have successfully completed numerous corporate projects, ranging from small apps to full-fledged e-commerce and banking applications for some of the largest Russian companies.

At the beginning of our Flutter journey, we have been hesitant about which basic architecture concept to choose among BLoC, Redux, Vanilla, and MobX. Eventually, we have decided to move away from these concepts and focus on our specific corporate tasks. We have set up the goal to create an architecture that would allow our Android and Flutter developers to quickly switch tasks between Android and Flutter.

This is how our team has adapted the MWWM (Model-View-View-Model) pattern for Flutter architecture. Subsequently, we have replaced “View” with “Widget” to make it simpler for devs. 

The major advantage of such an architectural approach is that it allows splitting the layout and the logic, both business logic and the presentation layer logic. At the same time, it is worth noting that we also use regular Flutter widgets as they remain indispensable.At present, our tech stack is a combination of architecture packages put together in a single package, illustrated by the diagram. The package contains a small injector, a relation (or the connection between layers), and surf_mwwm itself. All of our Flutter apps have been built on this tech stack.

Flutter architecture best practices

Surf Flutter architecture samples

Rigla is one of the largest Russia’s pharmacy chains. Approximately 70% of Rigla’s customers make their purchases via mobile devices, and the average app purchase is usually higher than the average offline purchase. The use of Flutter has saved Rigla 40% of the budget compared to native development.

Rosbank ranks 11th among the Russian banks in terms of assets. In partnership with Rosbank, we have created Russia’s first and the world’s second banking app using Flutter.

Medium Quality is the largest publisher of Russian YouTube. In 2020, YouTube still failed to provide a vertical video view option. Nevertheless, Medium Quality wanted to possess a quality streaming platform to enable users to watch its content on mobile phones. In less than a month, we have produced the desired Flutter solution called “The Hole”. Right now, “The Hole” app for Medium Quality has more than 5000 beta-users.

KFC is getting very popular across the Russian Federation. However, up until recently, the company’s general managers, shift supervisors, and area coaches had to conduct numerous pieces of paperwork on hard copy. To enable KFC staff to create digital reports instead, we have developed a cross-platform corporate app for smartphones based on Flutter.

Bottom line

Let’s recap what we’ve learned about Flutter architecture.

  • Flutter architecture is arranged as an extensible, layered system and functions as a sequence of independent libraries.
  • Widgets are the major building blocks of Flutter architecture. Complex widgets are composed of already existing widgets.
  • Being a cross-platform framework, Flutter offers comparable performance to single-platform frameworks.
  • It is possible to embed Flutter in an existing application or embed native controls in a Flutter app.
  • The benefits of Flutter architecture include a simple framework, quick compilation, and active Github community. Besides, Flutter architecture is a great choice to quickly create MVPs.

At Surf, we hold special expertise in developing the best architecture for Flutter apps. You can always contact us and discuss your project ideas.