Flutter – an overview of cross-platform framework

Flutter is a cross-platform framework for building iOS and Android mobile apps made by Google. It is open-sourced and it can become a game changer in the industry because of unique architecture with own rendering engine, quick development cycle, and a stable environment.

Google has introduced Flutter in 2015 and now it has a stable version of 1.4.x. Flutter has a set of tools such as Visual Studio Code with Flutter plugin for hot reload, package manager and packages.

The architecture of Flutter has several layers:

  • Framework – Dart language
  • Flutter engine
  • Embedder – platform specific integrations
  • Widgets

Flutter engine

The unique part of the Flutter is the highest performance and own UI system independent from native elements, the real cross-platform development. It uses Skia Graphics Library a 2D graphics library which used in Chrome, Android, Mozilla Firefox as a rendering engine. The use of own rendering engine gives the highest performance in rendering and animations. From the documentation:

Flutter aims to provide 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120Hz updates.

Own graphics library is the key factor of cross-platform portability, no more platform-specific UIKit or Android layouts. Though it has own implications, the UI components (widgets in Flutter) need to be recreated from scratch because it is not reused from native.

Widgets

The flutter framework allows creating the application for iOS and Android. The basic UI block is called Widget. It is similar to React components. And each widget encapsulates UI presentation, configuration, and state. A hierarchy of widgets makes the interface itself. As mentioned above, Flutter has its own replica of UI components. For iOS, it is called Cupertino and it basically has all UIKit components.

Flutter draws the user elements in their own context and any changes to the native libraries (e.g. UIKit) doesn’t impact the framework. Imagine, that Apple changes UIKit in the new iOS version and all code which works around this API need to be rewritten. The backward compatibility in the hands of vendors. But it is not the case with Flutter with its own 2D engine. So the Flutter holds minimum dependencies to the system.

A view system is based on Widgets: StatefulWidget and StatelessWidget. Flutter fixed the main problem of UIKit, the shared state. And it uses lightweight immutable interface objects. StatefulWidget can be mutated and configured with state changes.

Widgets are built upon the composition and it enables widgets to have multiple behaviors such as being ScrollableandAnimatable. In the composition way, it is easier to design a flexible user interface.

Hot reload

A useful feature of Flutter is hot reload. The developer doesn’t need to recompile the whole application to see a small UI change or fix a bug. The injected code can be reloaded in the Dart Virtual Machine by saving the edited file with the running app.You just need to install the VS code plugin and run the app in the debug mode.

Installation and the sample app

Time to try flutter. You need to download the latest Flutter framework with an official page or use this tutorial installing on macOS.

Using terminal:

$ flutter create flutter_app
$ cd flutter_app

Then open iOS Simulator, list connected devices and when you see connected simulator, run the project

$ flutter devices
$ flutter run

When the project is compiled, open VS Code, menu Debug, Start Debugging. And you see a debug panel. You can force the update by pressing the reload button or just save an edited file.

The sample application will increment count on button touch. The full implementation is here.

 

 

 

 

The code below shows the layout whereText and CupertinoButton widgets  are aligned vertically within Container and Column .

https://gist.github.com/ykobets/e8160ab3c330ec82fb39f7805b858dd9

There is only one way to create an interface in Flutter, programmatically layout widgets, no XML, no visual editor. The elements hierarchy is seen from the code. It is not a visual way of editing but it simplifies collaboration in a large team, usually merge conflicts happen on the UI layout and it can be easily resolved with code than with XML or Interface Builder.

Creating TabBar is very simple with Cupertino widgets. We add BottomNavigationBarItem and create a builder to instantiate widgets:

https://gist.github.com/ykobets/adcc6ce9c8230351b41a71d25a16d293

And here is the main entry point to the application where top import gives us access to the Cupertino UI widgets.

https://gist.github.com/ykobets/4820cc9b1a5f5a9880ec7c722eb5a8d6

My impression of Flutter after years of iOS development with Xcode was how predictable and simple it is. Using one tool the developer can create cross-platform apps with native performance. Here are several takeaways from the article:

  • The highest performance with own rendering engine.
  • Hot reload has improved the development cycle by reducing compilation time.
  • Flutter gives us only the one way of layout – code.
  • Projects on Flutter are easy to support because of the unification of the development process and tools.
  • And the Flutter has the stable version.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.