Getting to know Flutter

Getting to know Flutter

Flutter might be the millionth technology for creating cross-platform apps for iOS, Android and the web. Still it was recommended to me multiple times and has a very active community, which was why I decided to try it out on my own.

What makes Flutter the unicorn on the cross-platform technology market is, that it is not just embedding web pages in a native web view. This is for example the basic principle behind the popular  framework Apache Cordova, which is often used for cross-platform mobile applications by embedding existing web applications. Such approach might be sufficient in many use cases, but usually feels worse compared to a real native app for Android or iOS. Flutter is compiling all components to produce a real native app, which can reach the same level of User Experience (UX) of usual native apps.

The Flutter SDK

Flutter is not just a framework – it is a full grown SDK, that contains everything you need in order to create your own app from scratch. All you need to do, is to download and install the SDK and configure an IDE like IntelliJ IDEA. This process is a matter of a few minutes and  is explained in detail on the official Flutter website.

A Flutter app consists of a set of widgets where every widget can contain multiple other widgets to create a tree-like structure of components. Unlike the name might suggest, a widget is not forced to produce any visual output to the user. This means, that some widgets might be used to pass data down the widget tree, where it is somewhere used to render the UI. Widgets can either be stateful or stateless and either way contain a build function, which is used to create the tree of its child widgets.

The syntax used within widgets follows a declarative rather than a imperative programming style, meaning that instead of creating a widget like this ...

Component component = new Component();
component.setColor(Colors.Red);
Component childComponent = new Text("Hello World!");
component.setChild(childComponent);

... you would create it like this, ...

Component component = new Component(
  color: Colors.red,
  child: new Text("Hello World!"),
);

... which is a lot easier to read, when a complex compositon of widgets is created.

Flutter also provides a rich set of UI widgets, which contain essential design components following the Material (Android) and Cupertino (iOS) design languages. In my opinion it is very nice, that this Google project has a set of iOS components as well, but the list of Material design widgets is a lot longer and also better documented. The Flutter website contains a widget gallery containing all the widget you can simply integrate in your own app and even some exemplary apps you can use in the browser.

Documentation is in my opinion one of the major downsides of Flutter in general, as many documentation articles contain only the implementation of a certain class or function, without giving any additional insights on how to use them. As Flutter is still in a very early stage, this will probably change over the next month.

One thing, that I really love about Flutter is its hot reloading capabilities. After the initial compilation of the app, which takes a lot longer compared to other tools, saving a file in your project will trigger a re-rendering of the UI on your device simulator or connected smartphone. This process often takes less than a second so the UI might be updated before you have even moved your eyes between devices, which is a very impressive and practical feature!

The Dart programming language

One of the main arguments for (or against) using Flutter, is that you are bound to use the Dart programming language, which is a relatively new programming language developed at Google. Dart is a multi-paradigm programming language, which means that you can implement your code either in a functional or an object oriented way (or mix both styles). When you are familiar with Java or C# you won’t have much trouble getting started with Dart, as it has a very similar syntax. One of the core aspects and distinct feature of Dart is its focus on asynchronous communication between software modules, which is usually implemented through its powerful set of streaming features. A popular architecture pattern that makes use of this, is the so called Business Logic Component (BLoC) pattern, which requires an additional introduction.

The BLoC architecture pattern

This pattern is as an architecture approach that is similar to the traditional Model View Controller (MVC) pattern and the Model View ViewModel (MVVM) pattern, often used within web applications today.

BLoCs are dedicated components containing all the business logic, which is therefore separated from the View and the Model just like in a MVC architecture. A BLoC is usually connected to one or multiple data providers like database systems or an external APIs, while all communication with these providers will be implemented in an asynchronous manner.Information is provided to View components through Event Streams containing State objects, that a View component can interpret to render the UI. User input is feed back to the BLoC through the Sink of the Stream. The beauty of this pattern is, that it allows for a very modular structure of View components, as every component can subscribe to the Event Stream and listen for relevant updated States. In other architecture designs data is passed down the widget tree through multiple components, which is especially challenging when a widget is moved to another location inside the tree. This might require changes too many different widgets in order to ensure, that data is still passed to the widget.

My opinion on Flutter

In only a few days I was able to learn the basic principles of Flutter and Dart by creating a small Todo app similar to Things 3. Along the way I got familiar with the BLoC pattern, which resulted in me completely refactoring my app, because I really wanted to try it out as well. While the iOS support in general is great, the available list of Cupertino style widgets is rather small and not so well documented, which is why I would recommend using Material components at the moment.

When you are looking for a tool allowing you to create cross-platform apps, that really feel native on your users device, you should definitely try it out. Please note, that Flutter as well as Dart are both relatively young technologies, so you might encounter some problems along the way for which you won't find a quick solution. For example the compilation to a web application is currently only a beta feature, which is probably not your best option for a commercial app.

I am really excited what the future will bring for Dart. *Cough* Google Fuchsia... *cough*.


Share this article


Subscribe for more

Check your inbox and click the link to confirm your subscription.
Please enter a valid email address!