Why you should jump on Flutter?

Jigar Patel
Mindful Engineering
6 min readDec 25, 2019
Unsplash: Alex Radelich

Till now, satisfying a designer’s creative thirst and convert their innovative designs into reality was a never-ending endeavour for developers. Specifically, when one is expected to twist and tweak the default behaviours and make tailor-made experiences for apps.

There enters Flutter, Before 2 years back, I got introduced to Flutter (Announced in May 2017 — Alpha release) and as usual, I got my hands dirty with it when it was initial days of Flutter. It was so good that when they released the stable version, I was like “Aweee”. I didn’t even notice that it was in Alpha till now.

Let’s see some of the cool features of Flutter, which can help in reducing development time, create great user experiences and a few other things.

1. Flutter has it’s own widgets

Other cross-platform SDKs converts your code into OEM(Original Equipment Manufacturer) widgets while Flutter has it’s own sets widgets. So what does this mean and how could this affect to you?

Giphy: DallasK

To understand it, let’s see how Flutter renders widgets? It actually takes the canvas of native platforms and draws the widgets of its own.

If you take an input field in Flutter, it will have exactly the same UI design feel in all platforms. But that experience may vary when we use any other cross-platform SDK.

2. Single codebase

As we live in an era of continuous improvements, it is essential to make those changes as soon as possible, pass quality control/assurance checklist and provide a smooth transition to new builds.

In this cycle, if we develop apps using native SDK, we need to still keep all platform developers on the floor to make updates and the same effort will be required in further path of developer lifecycle.

What if we can write code once and run everywhere without any hiccups? Look no further, because Flutter is the toolkit(From Heaven) which can give you benefit(Superpowers!!!) of writing code in a single source and create apps for different platforms. Yet, many things remained to explore for Web and Desktop applications.

Along with this, you can create your own widgets with desired behaviors or animations (Tathastu Designers!) that simply works with Android and iOS without any extra efforts.

3. Animations

Flutter uses its own high-performance rendering engine Skia (a 2D rendering engine) to draw widgets. It is highly optimized and already being used in Google Chrome, Chrome OS, Android, Mozilla Firefox, Firefox OS, and many other products. It plays a significant role to achieve 60 FPS and sometimes more than that as well which helps to develop smooth animations.

Along with this, Hero animation, AnimatedContainer, AnimatedPositioned, etc. All these can be used to create awesome user experience within fraction of time.

Some of the Material widgets have inbuilt motion effects defined and we can customize it too. Basically, there are two types of animations: Tween animation and Physics-base animation

Tween Animation: It’s been named after In-betweening. Need to define start point, endpoint, duration of animation and curves which defines time and speed with transition.

Physics-base Animation: In this animation, motion is defined to mimic the actual world’s behaviour. Like when we release a spring after expanding, how does it translates and even has velocity variations at different states.

If you notice It also includes a bit of bouncing effect which makes the motions lively. In listings, we can achieve such effect using BouncingScrollPhysics as scrolling behaviour.

So you can get that bouncing over-scroll effect just by placing a single line of code. Isn’t it fabulous?

4. Speed up development — Hot Reload

Developers often need to do minor UI changes and review it in a device, Most of the time it takes a big chunk of development time in just waiting for the changes to be reflected in the device.

What if as soon as you finish writing your changes, it reflects instantaneously in your device? At first sight, it looks like Mirage but it’s not. Hot Reload provides exact same feature and it is one of the best features of Flutter. The way it works like a charm.

Let’s see what is it and how it works? According to the official document,

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes.

I was surprised to see a change being reflected which I have just written, it just took less than a second. Simply mind-blowing 😳. Although there are some limitations in this one as well. So major changes should be checked by hot-restart rather than hot-reload.

5. Basic UI design features

Flutter provides basic UI features that may not be easily available in Native Toolkits such as Shadow, Corners, Borders, Customisation and many more. Let’s take an example of Shadow.

In Android, the developer does not have access to modify Shadow parameters(i.e. color) by any default API. So, this amazing feature of Flutter can help developers to create elegant UI design with shadows the way designers wanted.

// Shadow
BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
blurRadius: 40,
spreadRadius: 20)
// Border and Corner
BorderRadius.all(Radius.circular(10))
BorderRadius.only(topLeft: Radius.circular(10))
BorderRadius.circular(10)

6. Developer community

It will not be wrong to say that developer communities have played a vital role in making Flutter more appealing.

Moreover, any question posted on QA site like Stack Overflow gets quick resolution and surprisingly even without use of much more bounty. While I am writing this, it’s been more than 7K issues have been created and more than 22K issues been closed which demonstrates the quick responsiveness of the Flutter developer/support team. I really appreciating it.

7. Packages and Plugins

From top, both of them looks similar but they are not. A library or module written in dart language to fulfill predefined task is known as Package. While a library or module written in native SDKs is known as Plugin.

According to reports of Octoverse, Dart is the fastest growing language and numbers to prove is like 532% growth in 2018–19 which depicts that Dart is gaining contributors these days. That’s a really good sign for any language. According to the official blog,

In GitHub’s 2019 State of the Octoverse report, Dart and Flutter ranked #1 and #2 for fastest-growing language and open source project respectively over the last twelve months, and Flutter is now one of the ten most starred software repos on their site. And in a recent analysis by LinkedIn, Flutter is described as “the fastest-growing skill among software engineers”.

Furthermore, dart pub spec introduced a new concept of managing verified publishers. Basically they do verification of publishers and then give Verified Badge for packages/plugins published by the same publisher. This helps developers to choose authenticated package/plugin.

I will try to continue exploring things for Flutter and share my knowledge with upcoming stories. Till the time, If you have any questions then feel free to ask in comments.

--

--