Start your next cross-platform mobile app with Flutter

Isuru Jayathissa
6 min readJun 21, 2021

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. (official website)

More about Flutter:

  • It is based on Dart. Dart is a client-optimised language for fast apps on any platform. it is a fast, object-oriented programming language.
  • Made by Google: since Flutter was created and tested by Google, android incompatibility issues are minimum.
  • It provides its own widgets: these widgets are only a starting point, we can customize or create our own widgets.
  • When it comes to developing desktop apps with Flutter, you can compile Flutter source code to a native Windows, macOS, or Linux desktop app.

Flutter architectural overview

  • Since Flutter is a full-fledged SDK, it includes a rendering engine, ready-made widgets, testing and integration APIs, etc. Let’s talk about the main components and the way it works, in general.

The three main architectural layers are;

  • an embedder that uses a platform-specific language and makes the app run on any OS.
  • an engine is written in C/C++ that provides a low-level implementation of Flutter’s core APIs, that includes graphics (through Skia 2D graphics library), text layout, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain;
  • a framework based on the Dart programming language. Its implementation is optional, but it provides a rich set of libraries that can be divided into layers: basic foundational classes, rendering layer, widget layer, and Material/Cupertino libraries.

Flutter’s foundation is Dart. It’s a client-optimised (such as for the web and mobile apps), object-oriented programming language. Dart is capable of compiling native code for mobile and desktop, as well as JavaScript. Because of this direct compilation, it doesn’t require an additional bridge to communicate with the platform such as React Native. This an advantage of Flutter to improve the startup time and the overall app performance.

I am writing this article in June 2021, so in the future, these statistics may change.

Why is Flutter?

When selecting a new cross-platform framework, the below top 7 criteria are considered to be evaluated. Nubank research team (Nubank is a Latin American online bank and the largest financial technology bank in Latin America) has done this research project. Below is a radar chart showing each criteria’s score from 0–5 for each platform (For more information).

  1. Developer experience: What enables a developer to deliver value and to be productive? Example: hot reload, component visibility, debugger tooling, IDE integration, test tooling, CI/CD options
  2. Long-term viability: Depicts the level of confidence in the future of the platform. Will the maintainer keep supporting it in the long term? What is the likelihood of the community supporting the project if the maintainer decides to drop it?
  3. No platform specialisation: Does the code look and behave the same on Android and iOS, with a low occurrence of OS-specific problems?
  4. Incremental abstraction cost: How hard will it be to extend the platform and add new components?
  5. Non-linear abstraction risk: Would they need to make non-trivial changes across the entire codebase to support new components?
  6. Official Documentation & Community Help
  7. API/Tooling stability
A radar chart showing each criteria’s score from 0–5 for each of the platforms.

By looking at this radar chart, Flutter is the most suitable cross-platform mobile framework.

Pros of Flutter:

  1. Fast Development:

Developers can make changes to the codebase on-the-fly, and see them immediately reflected in the application. This is the so-called Hot reload feature, and it typically takes (milli-)seconds for changes to show without even losing the current application state. And this is exactly what makes Flutter app development several times faster due to the increased development speed.

Already Flutter is providing a wide variety of ready-to-use widgets. Most of them are incredibly customisable, saving your time like no other framework before.

2. Rich DevTools:

Flutter framework supports many different IDE including Android Studio and Visual Studio Code. It also provides support for building apps from the command line. These are the very useful DevTools from the list. (the full list)

  • Memory view: it can be viewed how an isolate is using memory at a given moment.
  • Widget inspector: helps to visualise and explore the tree hierarchy. Flutter uses this for UI rendering.
  • Performance view: helps you to monitor your application at a frame-by-frame level. You can also identify rendering and computational work in the timeline view.
  • App size tool: it is allowed to analyze the total size of the app

3. Faster app:

Unlike other cross-platform frameworks, Flutter doesn’t rely on any intermediate code representations or interpretation. Flutter application is built directly into the machine code, which eliminates any performance bugs of the interpretation process. So that without hanging and cutting, Flutter apps work in a smooth and fast manner. To get a better idea about how it works from a technical point of view, read this.

4. One codebase for many development platforms

Flutter has its own widgets and designs so it doesn’t depend on the platform. This means that you have the same app on different platforms. Developers write just one codebase for different platforms (Android, iOS, Web, desktop, and embedded).

5. Less testing:

We can write one codebase for the Unit test, Widget test, and Integration test for different platforms. Because of one codebase, the quality assurance process is faster.

Cons of Flutter:

  1. App size:

Since it has built-in widgets instead of platform widgets, Applications written in Flutter are bigger than native ones. However, the Flutter team is working on reducing the size of apps. (Currently, the developer can analyse app size using App size DevTool.)

2. Community support:

Since Flutter was created and tested by Google, we can assume that Google will keep supporting it in the long term. But we have to consider community support even though Google is a well-recognised company. As it is apparent from the below figures, community support for Flutter is increasing day by day.

  • Open source Github popularity trends show an intense increase in developer interest in Flutter.

3. Dart Language:

Unlike other cross-platform frameworks, not many novice developers will pick up Dart on their journey so finding new people for your mobile team can be a challenge. This should be something to consider when you’re choosing a cross-platform approach.

But Dart is a fast, object-oriented programming language that is in itself easy to learn.

Flutter Vs React Native

Geting started with Flutter

With the above criteria, Flutter has more advantages than risks for business and development teams. It’s a great opportunity to build beautiful and high-performing mobile apps that fit your custom requirements.

It’s worth considering Flutter for your next cross-platform mobile application.

Reference

--

--