Introduction To Flutter: All You Should Know

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 introduction to Flutter and try to understand why it is so popular nowadays.

Here is a typical bloc architecture example, a bare minimum stateful widget:

class MyApp extends StatefulWidget {
  @override
  State < StatefulWidget> createState() {
    return MyAppState()
  } 
}
class MyAppState extends State < MyApp> {
  @override
  Widget build (BuildContext context) {
    return OneOrMoreWidgets;
  }
}

Dart: the language used by Flutter

Before we start the Flutter introduction, 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. 

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 in the overview of Flutter, the 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 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. 

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. 

Get inspired by the software guide on Adyen integration!

Flutter Architecture

What is flutter architecture? Aside from the core concepts we have previously discussed, Flutter delivers the basic Flutter framework architecture 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 later. 

Conclusion

Thanks for your attention. It was the intro to Flutter. 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!  

Wanna dive deeper into mobile development? In our next article we are talking about Apple Pay and its integration into the mobile apps.