Flutter — The Next Big Thing!

Photo by Sophie Dale on Unsplash

Most experienced developers have seen many frameworks come and go in their lifetime. Very few stick on to become legendary like ReactJS. So there is always an inertia with any thing new in general. But Flutter has managed to create quite a flutter!

Just officially released in late December 2018, it took roughly a year to gain more popularity than React Native on both GitHub and Stack Overflow.

Just have a look at the survey below!

Why Flutter now

It is more than just a framework. This is a superior next generation framework as a tool. The best choice for MVP i.e. Minimum Viable Product in 2020. If you want to building a sleek mobile app, having only a single codebase for your project, Facebook’s React Native and Google’s Flutter are the most formidable contenders today.

A Flutter app is cheaper compared to the cost of two native apps. The development team is relatively smaller with linear processes. You can spend more time on polishing the app’s features.

Flutter is based on Dart

Dart is relatively easy to pick up and is a good programming language though it does not have the popularity that JavaScript has. A developer trying out Flutter would need to learn Dart. Typically, developers from a C++ or Java background can relate to Dart more than a full-stack JavaScript developer.

The below graphs shows the growing number of queries on Flutter in Stack Overflow.

Advantages of Flutter

1. Use of Dart

Dart is an excellent language with no standardization issues. Dart has some similarity with TypeScript which most full stack developers know. That makes it very natural to adopt.

2. Design

Flutter was designed ground up on top of Dart and a fast high-performance rendering engine, Skia. Flutter is not directly compiled to iOS or Android apps. Apps are launched based on a combination of rendering engine (built on C++) and Flutter (built on Dart). All files generated this way attach to each app and SDK assemblies software for a specific platform.

All apps based on the Flutter SDK replace parts of native frameworks with Flutter elements. Although it can impact the size of the end app, performance is still quite remarkable, rendering is made with speeds up to 120 fps.

Due to native compilation for ARM processors, simple rendering, and a set of integrated widgets and tools, Flutter makes the development process simpler. Also it offers a few very exciting feature like Hot Reload.

Flutter comes with all native widgets for Android and iOS interfaces like Material Design and Cupertino. Besides, the framework can change the behavior of separate elements to create similar UX for the app’s users.

Flutter makes it possible to implement discrete file compilation in the dev mode. JiT compilation speeds up development and software debugging.

Flutter allows for a flexible and scalable backend. It supports plugins like Firebase, SQLite, and many more. Firebase makes the app’s infrastructure scalable, serverless and redundant.

3. Rising Popularity

Just released late 2018, it has already surpassed the popularity of React Native on both GitHub and Stack Overflow. Flutter’s very high performance compilation and different code efficiency factors are the primary contributors to its meteoric rise. These are the reasons why Flutter holds prominence and popularity in the field of mobile app development.

4. Massive Dev Adoption

This means that for your application, there is a greater pool of resources to learn from, more skilled developers available to work on your app, and faster iterations over the technology itself. This also meaning that it will grow and mature faster and stay relevant much longer.

The dev community is evolving and there is a ready resource pool in the market for hiring. Thus companies can take a decision in favor of Flutter without any hiring hiccups. Also there are many Flutter open-source apps.

5. Speed

Flutter applications can easily achieve a steady 60fps on most devices and an incredible 120fps on supported devices . It’s true that building truly native apps is hard to beat in terms of performance and smooth rendering but when it comes to cross-platform frameworks, Flutter has clear advantages over the competition. Instead of being a wrapper on top of native UI components like React Native and Xamarin, Flutter draws the UI from scratch.

Flutter apps are divided into native binaries that are based on graphics and rendering engines built-in C/C++. As a result of which, it produces a fast and high performing app.

6. Cross Platform

The Flutter SDK is a cross-platform tool. It allows us to develop for desktop, mobile, and the Web using a single codebase. It also allows you to create beautiful UIs with Flutter’s widgets, layers and interactive assets.

Flutter Web, one of the most hyped features of Flutter implies that it has entered the web world. With the help of standard web technologies like HTML, CSS, and JavaScript, the apps built-in Flutter can comply and run in any modern browsers.

The same code base that is required to build Android and iOs apps also help in creating Flutter web applications. The mobile UIs for mobile are for large screens as there are different browsers on a desktop or laptop. Many widgets help Flutter to make this possible and responsive. The LayoutBuilder widget builder function has box constraints. The constraints can help show or hide the UI. With the help of the media query method in-built functions, you can know the device size. Thus the mobile app adjusts for the Web.

Flutter for Desktop i.e. macOS Flutter is in the alpha stage. This clearly means that the Flutter team will not stop with web support.

Currently there are a handful of plug-ins available for macOS support. So, there are a lot of considerations as an option for development. But, it is quite stable. New Flutter master, dev, and beta channels provide improved support for the web.

7. Easy learning curve

The Flutter documentation is very comprehensive with lots of good examples. A developers from a C++ or Java background can pick up Dart based Flutter as it is very similar. Also native developers will find it very natural and flowing.

8. Single codebase

Flutter supports both Android and iOS mobile platforms and lets you run everything off one codebase. Having various widgets, a complex UI is built that looks similar on different versions of operating systems.

9. Developer Friendly

Flutter is supported on many different IDEs like IntelliJ and VS Code. Also supported on Android Studio. The user can download Flutter and dart plug-ins to begin the integration.

10. Less development time

You can create high performance applications in record time. Any beautiful interfaces in no time.

In Flutter, the user interface is built with widgets, small UI building blocks assembled using a technique called Composition, very similar to React components.

There are two sets of widgets available out of the box:

1. Material Design, which is compatible with Google’s design guidelines
2. Cupertino, compatible with Apple’s Human Interface Guidelines for iOS.

Flutter manages every pixel of the screen and our widgets will look the same on every mobile device, even the older ones Thus removing device support woes allowing user interfaces that look exactly similar on both Android and iOS.

Very fast development with Hot reload. The hot reload feature provides the ability to introduce changes on-the-fly, allowing you to see them immediately during development. When you click on the Hot Reload button, all changes in code are reflected in gadgets, emulators, and simulators simultaneously. The app continues from where it was before and the code updates while execution continues.

State Management

Flutter may be a young development tool, there are many things that excites us. One thing which is beautifully handled is state management. Let us look at some of the simple approaches to this complex topic.

1. Provider : If you are new to Flutter and you don’t have a strong reason to choose another approach like Redux, Rx, hooks, etc, this is probably the approach to start with.
2. setState : This is a very good feature to manage states. People familiar with ReactJS already know this concept. The very low-level approach to use for widget-specific and ephemeral state.
3. InheritedWidget & InheritedModel
   The low-level approach used to communicate between ancestors and their children in the widget tree. This is what actually providers and many other approaches use under the hood.
4. Redux : A state container approach familiar to many web developers. Redux implementation in Dart relies on the ScopedModel. The state is in one class that has the ability to change by action dispatch within the app. Changing the state further rebuilds the widget.
5. BLoC / Rx : A family of stream and observable based patterns.
6. MobX : A popular library based on observables and reactions. The concept consists of Observables, Actions, and Reactions. Observables are changing data.
7. GetX : A very simplified reactive state management solution.

Drawbacks of Flutter

Nothing is perfect and there is always something that can improve. The road to becoming a legendary framework is beset with some hurdles.

1. As of today, the popularity of dart is low compared to Java/Kotlin for Android or Swift/Objective-C for iOS. Flutter cannot avoid Dart. Even it’s killer feature, Hot Reload will not work without Dart.
2. Flutter apps are quite bigger in size compared to native developed applications
3. It cannot support apps for 32-bit iOS devices like those older than iPhone 5s. It you cannot run Flutter on your 32-bit Windows too.
4. It has limitations in terms of UI rendering on native platforms like video on Apple TV and Android TV.
5. Any features that are newly added on native iOS and Android systems will naturally be introduced in Flutter later. The native versions will always lead ahead.
6. Flutter is a relatively new framework and has limited number of libraries. The developers community did not get had enough time to develop as many libs as native languages offer. Currently there are over 4000 libraries that can be used with Flutter apps.
7. Although Flutter is easy to learn, you might need some experience with native app development to build a production ready cross-platform app.
8. With Flutter, there is always a chance you are the first one facing a particular problem and there is little hope that someone will help you out.

Technology Backing

The brand Google is enough to signal a positive emotion. Also some very big companies have switched to Flutter, such as Google Ads, Alibaba, Reflectly, Hamilton music and many more.

To set a lower the entry barrier, Google has carefully worked out documentation and resources. Also there are different specialization tracks based on your background.

1. Android
2. iOS
3. React Native
4. Xamarin.Forms
5. Web

Better than ReactNative

Flutter uses Dart, an object-oriented programming language that supports static typing and exhibits a syntax that is quite different from JavaScript.

Flutter is written in Dart that eliminates JavaScript Bridge while compiling to native machine code. This compiles and releases an application way faster than you do with React Native.

Also Flutter performs better than React Native because Flutter does not have a JavaScript bridge like React Native to interact with native components. Dart code is compiled to native machine code, hence eliminating the JS bridge. This hugely improves the performance in comparison to React Native.

Conclusion

If Flutter sticks around, it could bring you some exciting mobile development experience and opportunities in the future. You are looking at one very potent future tool.

All the very best Flutter!