Flutter - why you may love it or hate it
Tags: earning, mobile, android, programming
Published: 2019-04-11 06:49:10

---
title:Flutter - why you may love it or hate it
published: true
description: Flutter is a new Google's framework for creating cross-platform applications. So far, I haven't tried to create any cross-platform projects so I wanted to give it a try. This won't be a next basic tutorial for creating apps with Flutter. I'll just present my first impression of things that have made me love and hate Flutter after a few hours of having fun with it.
tags: earning, mobile, Android, programming 
---

Flutter is a new Google's framework for creating cross-platform applications. So far, I haven't tried to create any cross-platform projects so I wanted to give it a try. This won't be a next
basic tutorial for creating apps with Flutter. I'll just present my first impression of things that have made me love and hate
Flutter after a few hours of having fun with it.

**Dart**

Before I started implementing my first application, I had thought it would be wise to prepare myself for new language syntax. 
Flutter is just a framework. Language which it uses is called Dart. Dart is an object-oriented, class defined, garbage-collected language created by Google. It is pretty similar to Kotlin, C# or Swift. Everything you need to know about it
you can find on Flutter's [Get started](https://www.dartlang.org/guides/language) page.

# Flutter #

One thing that is worth knowing is that Flutter’s application are not compiled like React Native or NativeScript code. It's not only UI elements, which are compiled, but the whole thing is. Flutter doesn't use a special bridge to communicate between
our code and native code, it uses a C/C++ library for compilation, so it's much closer to a machine language and it gives 
us a much better performance.

**First application**

I've decided to continue my journey with Flutter's "Get started" documentation. The first application I've created was
developed step by step from [this](https://flutter.io/docs/get-started/codelab) tutorial.
You can see the complete code of an application below:

```
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider();
          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
```

A first few things you can notice is that:

* It's only one file - we don't create UI's in a separate file like I'm used to in Android development,
* It's short - about 50 lines for application which creates a never-ending list? It's pretty awesome!
* Everything is **Widget** - the whole Flutter application is created using Widgets. Every UI element (and even the main screen block) is a Widget. Creating Flutter app is just creating a tree of Widgets.

Let's just quickly explain what is going on step by step:

- we start an application in the `main()` function calling `runApp()`,
- in `MyApp` class, we return `MaterialApp` with a title and the rest of the layout - `RandomWords` class (which of course is a Widget),
- in `RandomWordsState` we create `State` which is a logic for `RandomWords` class of what we would like to show inside,
- overriden `build` method creates the Widget - Scaffold, which in its `body` calls the function `buildSuggestions()`, 
that will return us a `ListView` Widget,
- `buildSuggestions()` for odd indexes creates a Divider (simple horizontal line) and for the even once, inflates a `ListTile` 
Widget using `buildRow()` function,
- finally the `buildRow()` creates a simple Text widget using a string generated by the `english_words` library which is 
being held in a `suggestions` array.

Combining layout and logic code in a single place seemed strange to me at first, but I got used to it after some time.

**Hot Reload**

Flutter supports a great development feature. Hot Reload allows you to rerun your application after some simple changes in 
no time. That is great! I won't have to wait a minute every time I make a simple change, shall I? Well.. not necessarily, because 
it doesn't work every time. Let's say that we want to change Text's color in our application. 
We adjust `_biggerFont` implementation to :
```
final _biggerFont = const TextStyle(fontSize: 18.0, color: Colors.green); 
```
then save (saving the file applies Hot Reload as well) and... nothing happens. Texts inside the list
doesn't change their color. We have to rerun the application completely to see the changes. 
Now, if we try to change the text color to blue after pressing save, Hot Reload does work but as you see, in most cases it is better
to just rerun application completely to be sure something does or doesn't work. Nevertheless, rerunning Flutter application 
seems to be a lot faster than rerunning traditional Android code.

**Material Design**

As you could have already noticed, everything in the Flutter app depends on Material Design. Even the main application container
is called `MaterialApp`. Personally, I think that is great, because I love all the UI designs there, but for iOS user it might
be strange. Every Flutter app looks exactly the same on every platform. You can obviously change some layouts, depending
on the device it's running but it doesn't automatically adjust the style of the components to match a specific platform.

**Things I love in Flutter**
- a lot of predefined Widgets - if you want to add Floating Button, Drawer Navigator or even some action buttons to the toolbar,
it will take you only a few lines of the code to implement. All the basic features (like Toolbars - back button or 
Drawer's - open) are already implemented, 
- easy implementation of animations,
- still developed - Google is adding new features all the time, new third-party libraries are being created and you can
find a lot of help on StackOverflow already,
- better performance than all the JavaScript's methods,
- Hot Reload - it actually helps :D.

**Things I hate in Flutter**
- .yaml files - I've spent some time trying to fix a simple bug, which was caused by one additional white-space. 
When you add image, you need to specify it in `pubspec.yaml` file and I've made a typo there. Fortunately, [online validators](http://www.yamllint.com/) came to the rescue,
- ending each Widget's argument's with comma - after adding the last argument of a Widget, you should end it with `,`. 
Otherwise the code will be badly / ugly formatted. This sometimes leads to the code which in the end looks like this:
```
        ],
      ),
    ),
  ),
);
```
- ending lines with a semicolon - after getting used to Kotlin, it's really annoying that I have to add the semicolons again (but that's more of a Dart thing I guess).

**Should I use it?**

Everything depends on a scope of a project. If you want to develop multi platform application by yourself it's easier to use
a cross-platform method, rather than writing native code for each one. Choosing between Flutter and React Native / NativeScript depends on you. Thanks to the constant development, it seems to me that it can outrun his competitors, but it hasn't done it yet.
You also need to bare in mind that cross-platform methods always lack some features. It is highly probable that for the
very specific task, you would have to add some native code. Fortunately, it's also not so hard to do with Flutter. 

Originally published at [brightinventions.pl](https://brightinventions.pl/blog/) 

By Łukasz Reszetow, Android Developer @ Bright Inventions
[Email](lukasz.reszetow@brightinventions.pl)