For many years, creating a truly cross-platform product has been the holy grail of app developers. Having to make a separate version of the same product for every platform seems not only inefficient but also challenging in later maintenance. In recent years, we’ve seen the rise of various technologies aimed to tackle the problem. React Native, Xamarin and Ionic are examples of well-established frameworks that have paved the way for more efficient cross-platform development. But in many ways, Google’s Flutter is a whole different beast and deserves a closer look.

Shrine app

It bridges the gap between platforms and slashes development times.
Image source

What is Flutter?

It is a free, open source mobile UI framework created and maintained by Google. Based on Google’s Dart programming language (dubbed the JavaScript killer by some), Flutter provides a fast, frictionless way for developers to build native apps on both iOS and Android. It can also be used to develop applications in Windows, Mac, Linux, Google Fuchsia and, as of recently, also the web.

Flutter is not just a framework. It’s a complete software development toolkit with all the bells and whistles the developer might need to build cross-platform applications. With an integrated rendering engine, ready-made widgets, testing and integration APIs and command-line tools, it is truly a full package, and a very solid contender to React Native.

What makes Flutter so good?

It has quickly gained popularity among developers and is now among GitHub’s top trending software repositories. In this article, we will briefly discuss the advantages of Flutter and talk about its typical use cases.

Faster development

Flutter was engineered with the goal to speed up the application development process. This is possible primarily due to a couple of unique features and benefits it brings to the table:

Stateful Hot reload in Flutter makes coding reminiscent to writing an HTML page. You can change the code and then click “Hot Reload” and see the effect immediately in the app preview, without having to restart the app. It also ships with a rich set of customizable widgets, all built on a modern reactive framework.

Single codebase across iOS and Android means that you may no longer need two separate teams working on the code for your cross-platform project. This should go without saying, but working on a single codebase also drives the overall development cost down. Developers can launch, update, test apps and add new features on both platforms at the same time.

Less testing – because test engineers are working on a single version of the app, time to test the application is cut by more than half, saving the test engineers a lot of time.

Great performance

Flutter does not rely on OEM widgets, and the JavaScript bridge is not needed for reactive views. As a result, applications created with Flutter are characterized by great performance and are found to be noticeably better performing than in non-Flutter cross-platform apps.

Widgets

Google has made sure Flutter ships with (almost) everything you need on board. Flutter’s core principle is “everything’s a widget”, and delivers on this promise by using a consistent, unified widget-based object model. Widgets are the basic building blocks of the app’s user interface. This makes Flutter different from other frameworks where views, view controllers, layouts, and other properties are all separate.

widget in Flutter can define:

  • a structural element (like a button or menu)
  • a stylistic element (like a font or color scheme)
  • an aspect of layout (like padding)
  • etc.

Widgets make it easier to design interfaces that users feel at home with, regardless of the device they are using. Widgets provide layouts APIs for animations, effects, gestures, etc. Android widgets follow the Material Design design language, and the Cupertino components are reminiscent of iOS stock system components – they follow Apple’s Human Interface Design. This includes an impressive catalog of a built-in UI components mimicking Android and iOS.

Cupertino widgets

Example Cupertino widgets.
Source

All widgets and their respective renderers are integrated with the app and the app does not have to rely on the platform itself. This fixes various compatibility issues – there is no need for any additional libraries installed in the system.

Android Material component widgets

Examples of Android Material component widgets.
Source

Growing community and resources

There are a plethora of open-source packages (for example, to open images, share media, etc.) for Flutter that help developers create apps much faster and with ease. This library, supporting both Android and iOS, is growing exponentially with the help of the ever-growing developer community.

There is a vast trove of open packages making development with Flutter even easier and faster. With a growing community around the framework, it is basically future-proof.

Simpler UI design

Being Google’s brainchild, Flutter makes it easy to create native-like user interfaces for cross-platform app development.

Assigning the proper theme for a user’s platform is as easy as using a ternary if statement to check which platform the user is running on. Then, your UI makes instantaneous decisions about which UI components to launch.

Truly cross-platform

In December 2018, Google announced a version of its toolkit that would allow developers to build web apps in Flutter. Hummingbird (aka Flutter for Web) is a code-compatible implementation of Flutter rendered using standards-based web technologies: HTML, CSS and JavaScript. As of Flutter version 1.9, web support is available as a tech preview.

With Flutter for Web, you can use all the features of Flutter, and you don’t need a browser plug-in for any of it.

Frontend and backend

Unlike in Android coding, where there are separate files for frontend (Views), which are referenced by backend (Java), flutter uses a single language (Dart), which does both the job and uses a reactive framework.

Dart has been built on a lot of the most popular features of other languages without losing the familiarity of Java or similar languages. Dart was built with the developer’s ease in mind and thus makes a lot of common tasks much more easily.

[Updated 29 December 2019] What’s new in Flutter 1.12

recent update introduces a few changes to Flutter – among the main highlights of the release web support is now in beta and assistance for macOS desktop switched from a technical preview to alpha. This means that Flutter projects running on macOS can now take advantage of ‘Flutter Create’.

There are also many new improvements in the desktop app support: menu dropdown keyboard navigation, visual density assistance, radio buttons, checkboxes, and much more.

For now, Linux and Windows support are still in the tech preview stage.

Flutter is here to stay

It is currently all the rage as more and more companies are experimenting with it to develop their mobile applications.

Flutter has its limitations and growing pains, but the benefits it offers are undeniable for specific use cases. The possibility to cut development times and release the app on all available platforms simultaneously is a tantalizing prospect for many agencies.

Programmers themselves appreciate the benefits behind Flutter, as it makes the coding faster and more efficient, and the resulting product is great-looking and consistent with the design language the platform.

vibbl2

Vibriti app developed by Better Software Group

We are strong advocates of Flutter ourselves, and our recent work was a Flutter-based mobile app with a web-based backend, allowing celebrities to send personalized video messages to platform users on request. The app was very positively reviewed by our client, who gave it a 5.0 review on Clutch.

THE CROSS-PLATFORM, FLUTTER-BASED SYSTEM, HAS RECEIVED POSITIVE FEEDBACK FROM EXTERNAL STAKEHOLDERS. BETTER SOFTWARE GROUP COMMUNICATED REGULARLY AND PRIORITIZED TRANSPARENCY, ENSURING SMOOTH COOPERATION. CUSTOMERS CAN EXPECT A KNOWLEDGEABLE AND DEEPLY ENGAGED PARTNER. – TULUM TECHNOLOGIES

Want to learn more? Head over to Google Play Store, install the Flutter Gallery app and play around with it to get a fuller taste of it. Also, visit https://flutter.dev/ for more information about the framework.