Several popular frameworks are currently at the disposal of engineers to do hybrid mobile development. React Native, Ionic, Xamarin, Flutter are all decent options to start building your mobile app. In this blog post we will review Flutter, and make a quick comparison with Progressive Web Applications (PWA). We understand that Flutter is a full scale dev tool, allowing for rich functionality development. PWA is not a traditional mobile development approach, although it helps building mobile experiences for web users, being PWA's main advantage. The determining features of Flutter and PWA are different, and depending on your business goals you may want to opt for either Flutter or PWA.
Here we provide a quick explanation of Flutter technology and compare it with PWA development.
What is Flutter?
Flutter is an open source software framework for applications development for Android and iOS. It was created by Google. Flutter is the main way to build Google Fuchsia applications. The entire Google Fuchsia GUI was developed with Flutter.
Flutter's main blocks are:
Flutter engine - a software engine for rendering, written mostly on C ++ using Google Skia's graphics library. It also uses the Android or iOS platform SDK;
Foundation library - the library consists of classes and functions (written on Dart). They are used for building Flutter programs to interact with Flutter engines;
Widgets. Flutter user interface designs are built from widgets.
The Flutter widget is a fixed object, which describes part of the user interface. All graphics, text, shapes and animations are created using widgets. Complex widgets are created by combining simple widgets.
Flutter currently has two sets of widgets. They respond with the relevant principles of construction:
- Material Design widgets use Google design;
- Cupertino widgets imitate Apple iOS design.
The Flutter architecture is different from some other popular frameworks (React, Apache Cordova). It does not use HTML, CSS, or Javascript to build the interface. It means that it does not use WebView's built-in module. Flutter uses only Dart programming language.
Source: The-Engine-architecture
While developing an application on Flutter using Dart, we remain at the Flutter Framework level (the first vertical block).
The Flutter Framework interacts with the Flutter Engine (second block) through an abstraction layer (Window). This level of abstraction provides a number of APIs for indirect interaction with the device.
Also, Flutter Engine reports to the Flutter Framework through this level of abstraction when:
- an event occurs at the device level (change of orientation, change of settings, memory problem, status of the program operation and more);
- event occurs at glass level (= gesture);
- the platform channel sends some data;
- Flutter Engine is ready to render a new frame.
Flutter's features
Flutter has quickly become a popular mobile dev tool. The benefits of Flutter speak for themselves:
Flutter is a modern, React-like framework having instant gadgets and development tools;
Vast support of creating custom interfaces with unique themes according to the needs of the application;
A new feature known as "Hot Reload". Using this tool, you get access to a wide range of widgets while working on a dynamic interface;
This framework has a high performance portable GPU for rendering the user interface.
Like every other tech tool, Flutter has its pros and cons. Depending on your priorities, you will decide if Flutter can serve your needs.
Pros of Flutter:
- Hot reload allows the programmer to see changes on the emulator or smartphone instantly;
- High application speed and relatively quick launch time;
- Access to native functionality.
Cons:
- A small community of programmers. The technology is comparatively young, so in third-party libraries some restrictions and bugs in the framework itself are possible;
- Difficulties in integrating with native external libraries;
- The Dart programming language is not popular yet, so there may be difficulties finding help and advice in different forums.
Comparison with PWA:
PWA is a development methodology, which allows to have mobile app experiences on the web and mobile. PWA is built with HTML, CSS, and JavaScript.
Flutter and PWA are obviously different in many aspects, like tech stack, intended purpose (mobile or web), scope of features, domains of use, etc.
Major visual differences are:
- Flutter uses Dart programming language; PWA uses JavaScript;
- Flutter is installed on a user's phone through app stores. PWA is installed after first website visiting;
- If you need to make changes to a Flutter app, your users will have to update it via AppStore/Google Play. PWA updates, when the website is reloaded.
- Flutter native functionality is wider than that of PWA, because it accesses native libraries.
Examples of Flutter ready-made solutions
Cinnematic. It is an application for movie fans where you can check reviews, news and trailers;
ClusterMe. A resource for creating and finding new content, as much as images or articles;
PostMuse. It's a free image editing tool;
Reflectly - an application that allows you to record your mental state, helps to structure and analyze daily thoughts and problems.
Final thoughts
In summary, Flutter is a modern and powerful tool for mobile application development. It allows you to develop complex functional solutions. Compared to PWA, Flutter clearly has its advantages, but it does not achieve the same ease and speed of web application development as PWA.