DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Why should you use Flutter?
Dima Odintsov
Dima Odintsov

Posted on • Updated on

Why should you use Flutter?

Because i told you to. Flutter is the hot new framework and everyone else 's doing it, so why shouldn't YOU?

Seriously: There are plenty of reasons why you should use flutter.
Let's discuss what it offers over other cross-platform tools.

Flutter is an open source mobile application development framework by Google that allows you to use the same codebase for building iOS and Android output. You can write one set of business logic or UI codes and then just share it with either platform as long as the SDKs are available. The developer experience is very similar to React Native, but Flutter works better than RN because it provides a faster development cycle, more widgets support(all those material design components), and very smooth animations due to hardware acceleration.

The first reason why you should consider using Flutter is that there is no need to write additional business logic or UI codes because Flutter comes with excellent features like stateful hot reload, code sharing, deep linking support, and fast development cycle to make your dev experience much better than any other option out there!

Now back to our original topic. Let's discuss the benefits available when using Flutter over other cross-platform technologies like React Native or Xamarin.

Β· Stateful Hot Reload -
The stateful hot reload feature in Flutter allows you to change the code of your app while it's running. In other words, the changes you make to your source files will be applied immediately without restarting or recompiling. This is a life changer! You can imagine that when you're developing an application and even if it takes 2 minutes to recompile, that ~10 seconds of waiting really add up over time. So this feature alone makes a big difference in developer experience by making development a breeze. If this doesn't convince you enough, think about how much time you could save during refactoring when everything would work "as expected" even after changing your source files.

Β· State management -
Flutter allows the developer to manage the state of their app with an easy-to-use framework that provides all the tools developers need without creating too many boilerplate codes. Everything in Flutter is built around this concept, and it's really awesome! When you're working on iOS or Android projects, you would usually find yourself duplicating codes for routing which could be quite time consuming during development; but thanks to this excellent state management feature in Flutter, you can write one set of business logic/UI code and the framework will automatically route the user flow(navigation) by itself depending on how deep you are in the widget tree.

Β· Widgets -
React Native comes with only a handful number of widgets, while Flutter provides over 90 high-quality widgets to choose from. It's difficult to find yourself limited when it comes to the variety of UI components available for you to use during development thanks to this extensive support. Plus, all these widgets are customizable because you can pass parameters as needed. For example, if you need your image's background color or border radius changed, that's easy! Just pass those values as parameters and Flutter will do the job! In contrast, Xamarin Forms doesn't give you great default widgets like those provided by Flutter; instead, the developer must either write their own or use a third-party library, which can be time consuming and error-prone since the widgets themselves may not be standardized into a framework.

Β· Animations -
Flutter uses Skia as its 2D rendering engine. This engine is very performant because it takes advantage of every bit of GPU power you have on your device to make animations as smooth as possible. As I mentioned earlier, Flutter has its own hardware acceleration feature that allows for fast and efficient rendering on mobile devices with limited resources. Additionally, this animation system is completely customizable since developers can fine tune each layer by setting a tag associated with it.

Β· Platform integrations -
Flutter currently provides support for both iOS and Android. The framework is designed with the idea that it would be easy to integrate with other platforms in the future.

Β· Material Design -
Designing mobile UIs are often complicated due to differences between platforms, but not with Flutter! Flutter implements Google's Material Design UI guidelines which means you don't have to worry about things like making sure your widgets are consistent across platform because they're all based on Google's design principles. It also helps that there are many material widgets available out of the box thanks to our friendly community. Just look at ic_menu_share, this button was implemented using Flutter from the ground up using Material as a guideline.

Β· Future plans -
Google has been showing promising progress with Flutter. In fact, there have been talks about replacing Android's bad old WebView with a new modern engine built by Google that uses UI rendering from Chrome which means that one day all your web-based apps can be run natively on mobile devices.

Β· Great documentation -
Flutter is open source so anyone with the knowledge can contribute to our great documentation. The docs are very detailed and have diagrams, written in Google's Material Design language that is easy to read. There are examples of tests using each widget, too!

If you're writing code for both Android and iOS projects instead of just one type of project over another, you'd save time because the codebase would be less extensive due to not needing different implementations for each platform/device you support. You could easily make changes too without worrying about breaking something on another device or platform since you only have to write the code once.

Β· Since Flutter doesn't use native components, you don't need to wait on the platform team to update you when it comes to features and bug fixes! The framework takes care of this for you because these widgets are very lightweight.

Β· Flutter provides great performance due to its built-in hardware acceleration system, which means that it'll be able to get your app running fast without needing too many resources. You wouldn't have to worry about closing other apps running in the background because it uses only 1 core's worth of processing power!

Β· Although not yet supported, Flutter is working towards integrating Google's instrumentation testing.

Β· Flutter provides built-in support for localization so it takes less time to build an app that supports multiple languages You can check out all of the widgets available here.

If you're interested in learning more, visit http://flutter.io for more information!

If you're not sure where to get started, don't worry because there are plenty of tutorials on the website that will help get your development started. I'd recommend checking out their beautifully written getting started guide. There is also a great tutorial on building beautiful user interfaces here!
Additionally, they offer many resources like videos and examples of applications made with flutter.

Make sure to visit my portfolio :)

Cheers!
Thanks for reading. ❀️

Top comments (9)

Collapse
lukeshiru profile image
Luke Shiru

Have they fixed the issue with Flutter's web renderer using a canvas for everything instead of using the platform properly? I recently saw a post showing a portfolio made with Flutter and it was a canvas still, but maybe that post was using an old version.

Collapse
valeriavg profile image
Valeria

Flutter shines when you need cross-platform pixel-perfect designs and 100% identical cross-platform animation. As mentioned in the article it doesn't "map" components to the native analogues, it redraws it completely frame by frame - like a game engine would.
Hence drawing everything on WebGL canvas is as close to native HTML as it gets. They might eventually come up with a way to do SEO on it, maybe with json-ld or hydrating HTML to canvas, but it'll never produce native code.
If Web is the main target platform and project needs SEO and simple UI - take a look at PWAs and PWABuilder instead.
I've seen stunning projects done in Flutter with heavy animations, blurs and all sorts of transitions running like it was nothing- and for that you need canvas.

Collapse
lukeshiru profile image
Luke Shiru • Edited on

A platform that requires megs of JS to load, with opt-in accessibility and exta work for SEO doesn't look compelling at all, for me at least. If I want fancy animations I can always do it with the actual DOM, and if I want it to be cross platform I can always make it a PWA, or use tools like ReactNative which are way better fitted for the Web and at the same time work excellently natively. If Flutter wants to actually be competitive, they need to find a way of mapping their components to real DOM elements, rendering everything in a canvas doesn't make sense at all.

Collapse
mawoka profile image
Mawoka

As far as I know, they still use a canvas, but where is the problem with it?

Collapse
lukeshiru profile image
Luke Shiru

The problem with it? Accessibility, performance, compatibility, inter-operability, reusability, and so much more... this twitter thread has more on the subject. But the short version is: It's bad.

Collapse
svgatorapp profile image
SVGator

Good read. Thanks for sharing!

Collapse
lmail profile image
Liam

Anyone have a performance comparison of Flutter 2.10 and RN 0.67?
And learning curves ?

Collapse
osmankorogluu profile image
Osman Kâroğlu

good

Collapse
smppatel99999 profile image
Sahil Patel

To the point. I just read the ZERODHA tech blog post on how they moved from React Native to Flutter. Thanks for sharing it.

🌚 Turn on dark mode

πŸ”  Change your default font

πŸ“š Adjust your experience level to see more relevant content

Β 

Head to your account's Settings to do all this and more.