First experience of Flutter for a Web Developer

It is always a challenge to learn a new technology for a software developer. As a Frontend Developer I have experience of working with ReactJS and VueJS frameworks. One of my latest projects was checkin2go.de — an application which serves as a digital extension for recording contact data and enables users to check-in contactless and data-safe when entering authorities, cafes, restaurants, bars, hotels or leisure facilities. When the basic functionality for a web application was implemented my team decided that it will be useful for users to have access to the service on any platform including mobile devices.

To start creating a mobile ‘Checkin2go’ application we had to decide which developing platform to choose — React Native or Flutter. Of course, React Native currently is one of the most popular frameworks with pretty good documentation and really big community. On the other hand, Flutter is a fast growing framework for mobile apps and is becoming more and more popular. Also we found a huge Flutter advantage — its performance. React Native uses Javascript to connect to native components via a bridge. Flutter doesn’t have a need to use bridge to interact with native components. As a result, the speed of development and run time gets much higher with Flutter. In addition, Flutter is compiled into the native ARM code for both iOS and Android. It can be created as a whole topic explaining the difference between Flutter and other mobile frameworks. In this article, as a Frontend Developer, I want to share my experience of learning Flutter: challenges I faced, what was familiar for me, what I liked and what I didn’t.

Another Programming Language

Before starting to learn Flutter it is important to know that it is based on a programming language called Dart, which was initially intended as a replacement for JavaScript. In terms of syntax and coding style, Dart has Java-like syntax and developers with experience of working with OOP languages usually can easily work with Dart. Having experience with TypeScript generally I didn’t face lots of difficulties with learning Dart.

Here are some examples of differences between JavaScript and Dart developer will mention first:

1. Declaring Variables:
   Variables cannot be typed in JavaScript, unless it is not TypeScript. In Dart it is required either to create explicitly typed variables or the system will give the proper type automatically.

// JavaScript
var name = 'JavaScript'
//Dart
String name = 'dart'; // Explicitly typed as a string.
var otherName = 'Dart'; // Inferred string.
// Both are acceptable in Dart.

2. Default Values:
Uninitialized variables in JavaScript are alway ‘undefined’, while in Dart it is ‘null’:

// JavaScript
var name; // == undefined
// Dart
var name; // == null
int x; // == null

The important thing is that in JavaScript truthy and falsy values can be easily used for writing conditional statements:

// JavaScript
var name; // == undefined
if (!name) {
console.log('falsy'); // falsy
};

In Dart the same condition will return an error: ‘Failed assertion: boolean expression must not be null’ because only the boolean value ‘true’ is treated as true. So, the correct condition will be:

// Dart
if (name == null) {
console.log('true'); // true
};

3. Asynchronous programming:
In JavaScript for asynchronous calls we use the Promise object to receive the success or a failure. For this can also be used async/await. In Dart Asynchronous programming works in a similar way. The only difference — instead of Promise, Dart has a Future object.

From my point of view, I think Dart is a programming language which is pretty similar to JavaScript. So, Frontend Developers having basic understanding of OOP and typization principles should not have big issues with learning Dart.

Flutter Framework

After a few weeks working with Flutter I found it very similar to ReactJs framework, especially if we talk about React class components. Here I’m going to give a list of features which differ Flutter and ReactJS and which are showing their similarity.

Differences that I found during developing on Flutter:

1. Widgets:
   In popular Frontend frameworks the blocks building an app are called Components. In Flutter these blocks are called Widgets. Component class is extended from ‘React.Component’ that is imported from ‘react’ library. Flutter Widgets are provided by MaterialApp library. Every widget is a Class, while Components in React can be functional components.

2. MaterialApp library provides Scaffold. Scaffold class provides an API that can show a drawer, snack bar or bottom button which we usually see in a lot of mobile applications. Even if popular UI libraries provide different components with styling and logic, they don’t provide such an easy way to build a page as it is with Scaffold.

3. Gesture recognition. Flutter provides a wider variety of gesture recognition compared to web browsers and frameworks. But this feature is more related to whole mobile app development than to Flutter only.

4.Styling the components/widgets. For web development we use CSS or preprocessors like SASS for styling elements by tags, classes, id’s etc. In Flutter there is no such thing as CSS — widgets styling can be done in app theme and directly in Widget class. Also, for adding properties like padding or margin MaterialApp provides Padding and Container classes which work as wrappers, for placing widgets in column or row there are Column and Row classes.

5. In Flutter for making the screen (page) scrollable, it is needed to wrap the screen’s widgets by SingleChildToScroll() class. The content which is overflowing the screen in Web app pages make this screen scrollable automatically.

6. Debugging in Flutter is different than in the browser. Flutter provides a debug tool, but it needs lots of improvements and it is not comfortable for a person who is making first steps with Flutter. The console.log() which we use on the web in Flutter is called print().

After playing with Flutter and creating some basic logic for a mobile app I mentioned that the structure of the Widget class I was creating is very similar to React Class Component. It includes lifecycle methods, the functionality returns widgets the same as react component returns JSX, the same reactivity etc.

What I have found similar between Flutter and ReactJS:

1. The structure of Widget Class is similar to the React Class Component — it has a build() method which returns the widget the same way as the render() method returns JSX.
   Also it contains other lifecycle methods if needed.
2. Widgets can be Stateful and Stateless which means that they can be with or without their own state as it is in ReactJS, VueJS or any other framework. But unlike VueJS and similarly to ReactJS, the state in Flutter should be changed by a setState() method. So reactivity works in a similar way with ReactJS.
3. Passing the props from parent Widget to child Widget works with the same principle as in ReactJS or VueJS. The only thing is different — data binding and passing methods between parent and child in Flutter is similar to React but not to VueJS. In VueJS we use emit for that, in React and Flutter just pass the callback with props. So, in Flutter we have two way data binding.
4. Lifecycle methods are having the same idea as in other Frontend frameworks, just with different naming. For example, React’s componentDidMount() and Vue’s mounted() in Flutter are called onInit(), componentDidUnmount() and unmounted() are the same as dispose(). In addition, Flutter has lifecycle method that reacts on setting the app on background and launching it back to foreground — didChangeAppLifecycleState();

During developing my current mobile app project I would like to share what I enjoyed and what was difficult for me in Flutter.

Here is a list of features which were familiar for me or what I found good in Flutter:

1. Familiarity with ReactJS. As I had experience working with ReactJS framework it helped me a lot with understanding how widget works and I felt really comfortable developing Flutter.
2. MaterialApp provides a lot of widgets like AppBar, Buttons, NavigationBar and many other stuff with implemented logic with it which helps developers to not spend time writing additional lines of code and to create whole screens really fast without big efforts. Of course, we have material libraries such as MaterialUI and Vuetify, but for me Flutters MaterialApp gives more build-in features.
3. Flutter can be combined with libraries which we often use with frontend frameworks like Redux, GraphQL, i18n, Google Maps and many other cool instruments! On my current project we are using GraphQL and it is pretty the same as I used on our web version of the same project. Especially I want to emphasize libraries created by Google, for example Google Maps. As Flutter is created by Google, it perfectly works with Google’s APIs which is a really great feature.
   But currently the Flutter’s ecosystem is rather small compared with the JS community. There are not many contributors of different useful and powerful libraries like GraphQl etc. As a result, if a developer has faced an issue with a specific library he might not find a solution for it. So it can take a lot of time and effort to handle this problem. In such cases it’s always risky to use libraries developed not by Google. So I, as a Flutter developer, strongly recommend to be active in the Flutter community and if you handle some issues which have not been solved before, please share your experience and knowledge!
4. Learning Dart was easier than I expected. This programming language is kind of mix of JavaScript and any other OOP language like Java or C#. Developers having experience with TypeScript and basic principles of OOP should have no problems with learning Dart.

What I didn’t like or found difficult in developing with Flutter:

1. Debugging process. The developer tool provided by Flutter is not that comfortable as web developers have in a browser. For me, developer tools in browsers are more powerful and I hope Flutter team will make some improvements related to that point in the near future.
2. Due to the fact that the Flutter community is not as big as JS (React, VueJS, Angular) or any other big communities, sometimes it is unclear what tools would be most recommended and work better with Flutter applications. For example, the best state manager for VueJS is Vuex, for React the most common tool is Redux (MobX is pretty popular as well). Flutter does not give information which tool will be the best solution for a specific task, it just provides a list of state manager tools which are supported and shows their features, advantages and install instructions. So when it comes time for choosing the specific tool, developers should spend additional time to analyse and make a decision which one fits to a project the best.
3. According to a fact that MaterialApp library helps a lot with building a mobile app really fast, providing widgets that have ready logic and styling, sometimes it’s very difficult to customize and override it to something specific required by a project. I could spend a couple of hours making buttons or navigation bar working or looking the way business need. But I guess frontend Frameworks are having the same issues while using UI libraries.
4. Enabling some specific device features like background services can be a real challenge. The features like that should be configured on both platforms — Android and iOS separately, and then applied in a codebase. For a person, who has no experience working with such things can be a real challenge. In addition, there are a lot of requirements related to user permissions.
5. Process of applying an app to the Apple Store sometimes can be really difficult. This part of development is not exactly related to Flutter, and iOS developers are facing this problem as well. But still, before starting creating a project for iOS, developers should be aware of the really accurate process of filling information, explaining a need for different user permissions and a lot of additional information for applying an app to the Apple Store.
   In addition, Flutter community doesn’t provide information how to make an app automatically update when its new version is available.
6. Testing with an emulator does not always represent how the application will behave on a real device. So for proper testing it is needed to connect to a real device or to publish an app to a TestFlight or any other testing tool.

This Flutter overview of course can be more detailed and include lots of code examples with explanation, but the purpose of this article was to share my experience of learning this new technology for a web developer without a mobile apps development background. As a conclusion, I’d like to mention that for a developer familiar with OOP and TypeScript, with experience of work with ReactJS, learning the Flutter should not be such a big challenge and definitely worth trying!