Today’s businesses are looking for ways to reach more people regardless of the device they use while maintaining high quality, consistency, and experience. All this, without losing flexibility and avoiding increasing the complexity of maintaining an application for each platform. This is where cross-platform applications come into play. Among the tools to build applications for multiple platforms, we have Flutter.

In this post we will share an overview, it does not matter if you are new or already have some experience with this tool, we will share some points that can help you decide if Flutter is your ideal tool for building your next project!

What is Flutter?

First of all, Flutter is an SDK, although its website defines it as a popular framework. It was created by Google in 2017 and uses Dart as a programming language, this was created by Google and first appeared in 2011. Its main advantages are that it can quickly compile code on any native platform and it is easy to learn.

This framework has a declarative and reactive programming style, these are inspired by React Framework, which means we describe how our UI will look and how the elements will interact from its construction.

So, why Flutter? What’s so special about it? Well, there are a few reasons that we can consider about this framework:

Allows cross-platform development

One of the main advantages of Flutter is that we can build our application for multiple platforms with a single code base. By creating applications in Flutter, we have the advantage that they can be built for Android and iOS mobile platforms, desktop apps for Windows, macOS or Linux (Ubuntu and Debian), and web platforms.

Access to Native Features

By allowing us to create cross-platform applications, another advantage is that we can access all the native features that these platforms can offer, for example, we can request access to use location services, storage, camera, sensors, and more.

Open Source Framework

This is another attractive feature, It is open source, which means that we can access, modify, and contribute to its source code. This offers several benefits, such as lower development costs, faster framework updates that can patch security vulnerabilities, and the latest improvements and innovations provided by the community.

Enables Fast Development

Flutter has a feature called “hot reload”, which takes advantage of the Dart VM to inject the changes we make in the code almost instantly. The nice thing is that only the section we are adjusting will be updated without affecting the current state of the view, this is useful in cases where we are in the middle of an action process we will no longer have to start over.

Highly Customizable

The elements we see on screen are fully customizable, both in style and behavior, and the best thing is that the elements will keep the same configuration on all platforms.

All these advantages are possible due to the clean structure on which this Framework is built. It is created from libraries grouped in three layers:

Framework

At this level, is where we interact with the Framework itself, this is where we will place all the business logic we need to build our application. And all this application will start with the execution of a parent Widget inside the function main.

What is a widget? Well, it’s an immutable object that has properties that can build a visual or functional element, It’s the equivalent of components in React. Flutter has a large collection of them to cover almost all the elements on the screen. They are grouped into these categories(briefly explained from left to right):

• Accessibility: To determine the meaning of the application.
• Animation and Motion: To add animations to widgets.
• Assets, Images, and Icons: To handle the media files.
• Async: To manage asynchronous loading tasks.
• Basics: They are widgets that every application must have, for instance, Row, Column, Text, Icons, etc.
• Cupertino: Widgets with iOS style.
• Input: To manage the user inputs.
• Interaction Models: To manage user interactions like gestures.
• Layout: They help us to place our widgets on the screen
• Material components: Widgets with Material 2 and Material 3 design
• Painting and effects: Help us to transform our widgets as rotation, opacity, etc.
• Scrolling: Help us to handle the list views.
• Styling: To set themes and manage the responsive behavior in our apps.
• Text: To handle text labels.

The main idea of Flutter is to allow us to combine them to create our views.

Now, let’s see that theory in action, shall we? Let’s take a look at a simple Flutter login screen and see what widgets compose it

And if you’re wondering what the code looks like, well, here it is:

CupertinoApp(
  color: const Color.fromRGBO(244, 244, 245, 1),
  home: CupertinoPageScaffold(
    backgroundColor: const Color.fromRGBO(247, 250, 252, 1),
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 36),
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.only(bottom: 24),
              child: FlutterLogo(size: 80),
            ),
            const CupertinoTextField(
              placeholder: "Email",
            ),
            const SizedBox(height: 14),
            const CupertinoTextField(
              placeholder: "Password",
              obscureText: true,
            ),
            const SizedBox(height: 24),
            CupertinoButton(
              color: const Color.fromRGBO(182, 112, 255, 1),
              child: const Text("Login"),
              onPressed: () {},
            ),
            const SizedBox(height: 14),
            const Text(
              "Forgot password?",
              style: TextStyle(
                color: Color.fromRGBO(161, 161, 170, 1),
                fontSize: 14,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Following with the next layer of this framework, we’ve got the engine

Engine

The Flutter engine is the second level, this package, mostly written in C++, is responsible for rasterizing the widget scenes on the screen of our devices. It uses the Impeller rendering engine for the iOS platform, and the skia, rendering engine for the other platforms.

Embedder

This is the last layer and connects the host operating system to this framework and manages the application lifecycle. It also configures the base layer for rendering, access to services, accessibility and data entry.

Web Platforms Architecture

Closing Thoughts

Flutter offers numerous benefits that can be leveraged to create applications for various platforms. We have swiftly examined the core components of each level of Flutter’s architecture, which comprises framework, engine, and embedder layers. Flutter is an excellent choice for developers who aspire to build impressive apps for multiple platforms with a single codebase and a consistent user interface.

We hope you find this overview of Flutter informative, and encourage you to give it a try for your next project.

References

• Flutter - Widgets
• Flutter - Architectural Overview
• Flutter’s Benefits and Drawbacks