Flutter: a full introduction to the framework

Category:
Mobile Development
Sergey Nikolaev
Human Resources Manager
Business Development Manager
Business Development Manager
Business Development Manager
Business Analyst
Business Analyst
Project Manager
Project Manager
UX/UI Designer
IT Lawyer
Chief Technology Officer
Chief Executive Officer
Head of Back-End Chapter
Head of Mobile Chapter
Marketing Manager
Head of QA Chapter

Flutter is a cross-platform software development framework that was presented by Google in 2015 and received its first release in May of 2017. Flutter nowadays has steadily grown and provided possibilities not only for iOS and Android mobile development but also for web and desktop applications as well. Let’s dive into the topic and try to understand why it is so popular nowadays.

Table of Contents:

  1. Dart: the language used by Flutter
  2. Flutter Framework
  3. Flutter Architecture
  4. Conclusion

Dart: the language used by Flutter

Before we start deconstructing the Flutter framework, let’s dig into the language that was used to build it - the Dart. Dart is an object-oriented programming language that was first unveiled by Google in 2011. Since then Dart steadily evolved by releasing different features. Among others, it is worth mentioning the “dart2native” feature that allows compiling it for Windows, Linux, and macOS platforms as a desktop application. As of the writing this article, the desktop solution is not production-ready but the outlook seems promising. Aside from this, the Dart program can be composed into a self-contained executable file or compiled to JavaScript. The last one is especially notable because with compiling to JavaScript you can run Dart programs in every modern web-browser. But pay attention that the web solution is not production ready and currently in beta release. 

Dart logo

In general, the Dart language is easy to study. Its syntax is pretty similar to Java, Swift, or Kotlin languages. Moreover, the Dart software development kit (SDK) is shipped with a stand-alone Dart Virtual Machine (VM) that allows you to build the code in a command-line interface (CLI) environment and if you are not familiar with CLI then you can play around with the Dart in DartPad. DartPad is an online editor that provides access to Dart’s API and allows you to compile the Dart code. 

Flutter Framework

As was previously mentioned, the Flutter framework was first unveiled by Google in 2015. Its code name was “Sky” and it ran on the Android operating system. The first stable release was delivered on the 4 of December 2018 and on May 6, 2020, the Dart SDK version 2.18 and Flutter version 1.17 were released delivering a build with Metal API integration. This has provided performance improvements to the iOS platform. 

The framework is written using C, C++, and Dart languages and uses Google’s Skia Graphics Engine for user interface rendering. This graphics engine is used for such known products as Google Chrome, Chrome OS, Chromium OS, Mozilla Firefox, Mozilla Thunderbird, Android, Firefox OS, and now the Flutter. 

Flutter logo

Flutter runs using Dart virtual machine (VM) on Windows, Linux, and macOS operating systems. The Dart VM uses a just-in-time (JIT) code compilation which provides a development-time-saving feature such as hot-reloading. While the developer writes and debugs the mobile application, the JIT compilation injects new code into the running application. It provides a stateful hot-reload feature, where, in most cases source code changes can be immediately reflected in the running application without requiring a restart or any loss of state. This saves the developers’ a lot of time in the end. 

When it comes to releasing the application, the Dart VM uses the ahead-of-time (AOT) compilation which further converts Dart code into a native platform-dependent machine code making Flutter’s high performance on mobile devices possible. 

The Flutter framework was designed using some principles that should be described separately. These principles are “Everything’s a widget”, “Composition > Inheritance”, “Widget tree”. 

In Flutter almost everything is a widget and it is the basic building block of the application. Compared to other frameworks Flutter does not have separate controllers, views, or layouts. Almost every aspect of Flutter development is covered by a unified building block - the widget. A widget can be a unique button, style element, or a separate pop-up screen, etc.

The composition approach is better than inheritance. Often widgets are composed of other smaller widgets and that is the composition based approach. Using a Flutter API allows you to combine multiple widgets to elicit the exact behavior you need. 

Flutter System Overview, source: flutter.dev

A widget tree concept is basically an implementation of nested widgets that represent user interface components. These widgets could be stateless or stateful and the difference between them is in keeping with the widget’s state. A useful feature that helps in managing the applications’ states. 

The most interesting thing about Flutter is the user interface components that were delivered with the latest releases. Google went by its own path and created two sets of widgets, Cupertino (iOS) and Material (Android). These sets of widgets are responsible for the user interface (UI) and include every component that you may need for Android and iOS development. These widgets are not connected with the native API of iOS or Android like in React Native but work as standalone Flutter components with appropriate rendering speed and animation. That is one of the key selling features of Flutter. Users will not be affected by poor user experience, because of it. 

Want to hire a Flutter developer?
In Axon, we engage experienced Flutter developers to provide first-class custom development services.

Flutter Architecture

Aside from the core concepts that we have previously discussed, Flutter delivers the basic architecture that you can apply to your application and manage its state easily. The architecture that is used in Flutter is called the Business Logic Component (BLOC). Basically, it is an event-state based approach that allows you to trigger events and handle state changes based on them. The BLOC is a good approach that separates your business logic from the user interface and oversees business logic key points by testing. The core ideas that were used for BLOC architecture are simplicity, scalability, and testability, and all these goals were definitely achieved within the BLOC architecture. But this is a separate topic that we may cover at a later date. 


Flutter Architecture, source: bloclibrary.dev


Conclusion

The Dart language with its features, like stateful hot-reload, syntax simplicity, and “to-native” compilation coupled with Flutter framework components like widgets or BLOC architecture and driven by experienced developers will eventually provide an attractive solution for the software development market. Based on what we previously mentioned and our own Flutter development experience we can definitely say that Flutter is here to stay and will take its market share of not only mobile applications development but also web and desktop solutions as well. One code base for all platforms is a very attractive approach that can sell itself. We will definitely keep an eye on Flutter and share our experience in the next articles. 

Stay tuned!  

Axon Development Group
June 22, 2020
Mobile Development

readers who are obsessed with delivering great customer service.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Expertly curated emails that’ll help you deliver an exceptional customer experience.

Contact with us

Upload file with the file dialog or by dragging and dropping onto the dashed region

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.