Flutter for the Future

Flutter is Google’s UI framework for building beautiful, high performance applications for web, desktop and mobile, both Android and iOS, from a single codebase. 

Flutter is written in Dart code, a programming language made by Google as well but previously only used for inside projects, a good example would be Google Ads. The use of Dart though has grown remarkably since Google announced the release of Flutter back in 2017.

I personally first heard about Flutter from one of my students. He happened to mention coming across it while doing some research and told me to check it out. A few weeks later, the memory of his words came back to me while I was looking up memes on one of my regular breaks between work, don’t judge, I’m pretty sure you do it too. The story might not win me any writing awards but that’s how it all begun. 

At first, like most people would, I found having to study Dart, another programming language altogether, a little off putting at first. But after a relatively short period of time, I was able to pick it up with ease. This was thanks, in part, to how dart is structured seeing as it resembles languages like JavaScript, Java and so on. This makes it feel more familiar and definitely makes it easier to wrap your head around. It also has some very intuitive features that make it very versatile and powerful but in a subtle way.

Let’s turn our attention now to some of the things that make Flutter stand out from the pack and why you’re gonna love it.

  1. Highly performant.

Flutter apps compile to JavaScript for the web and ARM and x64 machine code for mobile and desktop. This goes a long way in making them sleek, smooth and fast. This also reduces the size of the app which heavily improves app startup times, that’s the amount of time it takes for your app to become interactive after being launched.

  1. Fast Development Cycle.

For those of you who have a background in web development, switching over to mobile app development can be frustrating at times because of all the time it takes to build your code, run it and finally see what you have built. Flutter does away with this by implementing hot reload when updating bits of changed code after the app is built initially. 

This makes development very fast seeing as you can get instant updates for changes you make in your code. In the long run, development times are greatly reduced.

  1. Artistically Liberating.

Flutter widgets, the building blocks of every flutter app, are very customizable. This allows the developer ample room to be creative. When it comes to UI designs with Flutter, the sky is the limit really. With beautiful pre-built widgets for both iOS and Android, all of which are customizable, and the possibility to combine different widgets to come up with new designs, the range of possibilities is near infinite.

  1.  Beautiful.

Even without adding any custom styles yourself, flutter UI components have a very sleek signature look and feel about them. This is because Flutter comes with Google’s Material Design principles straight out of the box. If you’ve never heard of Google’s Material Design principles, these are like UI design standards set by the design team at Google. If you’ve used Materialize CSS before then you’ve already come across another one of its implementations. These principles are what Google apps are made in top of. A good example would be Gmail, YouTube, Google Play, the whole batch.

Considering how much freedom one has when customizing UI components with Flutter, the fact that they already look neat to begin with is pretty handy. This reduces the number of hoops you have to jump to make beautiful UI. Those of us with a background in HTML and CSS know how painstaking it is to have all your styling start from zero.

Now that you have an idea of Flutter’s capabilities, let’s look at one of its core working principles, that is, widgets.

What is a widget?

In Flutter, this is a very simple question to answer because everything is a widget. Absolutely everything in Flutter is a widget. Every single UI component is either its own standalone widget or a tree of multiple ones. Getting yourself familiar with all the different prebuilt widgets would therefore be a good place to start. With this basic knowledge you can now move on to building your own custom widgets when need may be. This actually doesn’t happen that often owing to the huge collection of pre-built ones covering almost eve.  

There are widgets for layout, animations, UI components like Date-Pickers, Lists, icons and so many more.

Conclusion.

Flutter might only be relatively new to the developer community, attracting a lot of attention with some developers being super into it while other still hold a level of reluctance to it. Considering my own experience in using it, there is a lot that Flutter has to offer. Seeing as the Flutter and Dart teams at Google keep working to improve these platforms each day, things can only get better.

As far as cross platform development is concerned, there is only one that ticks all the boxes, Flutter for the future.

If you would like to do some more research on Flutter and Dart, the links below might be a good place to start.

  1. My previous blog on Dart.
  2. Dart’s official site.
  3. Flutter’s official site.
  4. Examples of apps built in Flutter.
  5. Flutter’s YouTube channel.
  6. Google Developers YouTube channel.

Dart Vs JavaScript

The first thing I would like to bring to your attention is that both these languages have a valid claim at being pretty amazing tools at the hands of any seasoned developer. Each has its strengths over the other, similarities notwithstanding. 

I’ve personally had time using both languages having been a JavaScript die-hard and NodeJs fanatic for almost 2yrs now and a dart enthusiast for the best part of the last two or three months. My thoughts though have seen a rapid and unforeseen shift recently since the onset of my using dart and the Flutter framework over recent times. What follows from this point onwards isn’t me trying to coax you into the dart-side and neither am I downplaying the awesomeness of JavaScript as a language but rather my wish is to take you on a journey that will hopefully open you up to a whole new style of cross-platform web and mobile app development and the world of possibilities opened up to us by the Flutter-Dart environment. 

Let’s take a moment and understand what exactly both of them are in more definitive terms.

What is JavaScript?

JavaScript is a scripting language with object-oriented capabilities used mainly on the web. It started off as a client-side language but ever since the introduction of NodeJs, all that changed and now JavaScript can be used to run both client-side and server-side scripts, which is pretty cool if you ask me. This is one of the reasons why it has gone on to become the most used programming language in the world as we speak. This was further aided by Facebook when they rolled out React Native, a JavaScript framework for making cross-platform mobile applications.

The list of frameworks and libraries built in JavaScript just goes on and on from here. This makes life easier for web and mobile app developers alike because of the variety of tools at their disposal.

The sheer magnitude of JavaScript’s online community, the vast resources at your disposal as a learner, the reliable documentation and general “you will never walk alone” atmosphere that comes with it is more than enough reason to feel at home as a JavaScript developer.

Before going any further though, let’s take a look at dart for a few moments and gain a better understanding about it as well.

Flutter-Dart

What is Dart?

Dart is an object-oriented language that is optimized for building UI. It runs on the dart VM using the dart SDK and is remarkably fast on all devices as it compiles to machine code for every platform. It was initially used internally by Google to make web and mobile applications with its existence really getting public notice when Google rolled out Flutter in 2018. Now everyone who wanted to use Flutter had to learn dart to begin with. This might seem off-putting at first but from my own experience I have to say, dart isn’t that hard to pick up especially if you have a history with any other programming language like Java or JavaScript. 

Now that we have a slight understanding of what both are and a rough idea of their capabilities, let’s take a look at why I find flutter-dart such a prospective venture, so much so that I had to write a blog about it.

And so without much further ado, we begin:

Reasons Why I choose Dart over JavaScript.

1. Speed.

On average dart is twice as fast as JavaScript on every platform. This isn’t an estimate or absurd exaggeration seeing as there is data to back up this statement on experiments and analysises you can find free on the web. 

Dart’s incredible numbers are made possible by the fact that it compiles down to machine code for each respective platform, as had been mentioned earlier, making its apps run smoothly and its animations very fluid.

2. Animations.

I had mentioned something about animations in the last section and I have to say that there’s so much to be added under it. First of all, in the JavaScript world, animations are done hand-in-hand with CSS which has its own learning curve especially when trying to execute more complex animations.

This hustle is completely unheard of with flutter as it has a vast plethora of animation widgets which can be used to easily implement complex animations which you probably would have had to jump through hoops to replicate in Js and CSS.

The resources at your disposal get even richer with prebuilt animations in Flutter are boosted with the use of libraries like Rive and Flare which come packed with even more tools to build more user-friendly UI designs.

3. Robust syntax.

Darthas some very fun incorporations into its syntax that make using fun altogether. If you enjoy JavaScript’s syntactic sugar like spread operators, object literals and so on, you’ll find all and more of these features implemented in dart. The best way to experience the beauty of dart as a language is however not from a blogger’s post but by getting down to the code yourself. I almost guarantee you’ll be fascinated by how many subtle tweaks it has within it that make it such a potent tool.

4. Widgets!! Widgets!! Widgets!!

I can’t get enough of these little bundles of pure magic. Before I get carried away, let me explain what these are. For those of us who have done some React or Angular, you can think of widgets as components. And as it is commonly said in the flutter world, everything is a widget.

From text, to style, to your animations, inputs, images, you name it. Everything is a widget. A flutter app is basically an assortment of nested widgets. The concept of nesting should settle well with anyone who has done HTML. The philosophy is largely similar, you can have a row widget with multiple container widgets each of which would carry an image widget, for example.

5. Code reusability. 

Flutter and the dart VM make code reusability so easy I don’t think there’s any other ecosystem that makes it this easy. 

You can define a single widget that can be reused in multiple pages of your application with incomparable ease. You think I’m kidding? Try it.

6. The pub.

Not the one at the other side of town that you go to on weekends hoping nobody you know notices you, no. In this context, pub is dart’s package manager. In that light it can be compared to npm for JavaScript.

Being a relatively new platform in the market, pub doesn’t yet boast the big numbers of packages that npm does, it’s community only being but a fraction of that of JavaScript. 

Nevertheless, pub boasts some good stuff like it’s package rating that gives every package a rating from 0-100 depending on a number of factors like the quality of code, how often it is upgraded, reviews by other developers and so on.

Something else to note about it is that downloading dependencies to your project can be done without even opening up the console. Sounds ludicrous right? Build your first project and see it for yourself.

7. Future secure.

While most people would generally keep away from relatively new languages and technologies sighting, among other things, the possibility that it may be short-lived, this is a case that I find inapplicable to flutter-dart.

If you wonder why I’m so confident about this fact, let me first point out that even JavaScript, as big a community it may boast at present, was once ‘the new kid on the block’ too. At some point people might have thought twice about investing their time with it as much as you are right now about dart. Secondly, flutter-dart is a project by Google which brings some level of confidence seeing as you wouldn’t expect them to do away with it any time soon. On the contrary, the team working around this project are working towards making flutter-dart even better. So if you ask me, learning flutter and dart isn’t a question of if but of when.

Best sooner rather than later I guess.

Conclusion.

While it might be said that I have downplayed JavaScript’s capabilities, it can also be said that I have barely even scratched the surface when it comes to the many things that make flutter and dart such a prospect going forward.

To wrap things up I’d like to say that JavaScript has had a very long stay at the top of the food chain, something that might change a few years from now. And I won’t be surprised if dart takes that place someday.

I hope this read has at the very least made you curious enough about dart to actually go and write your first program. If so, I’ll attach a list of resources I myself found useful along the way. 

I will be writing about flutter on its own in my next publication, feel free to leave a comment highlighting areas you would like me to cover at length. 

Until next time.

Useful resources:

  1. Official Dart documentation.
  2. Official Flutter documentation.
  3. Flutter YouTube channel.
  4. The Net Ninja Flutter course on YouTube.
  5. Traversy Media Flutter crash course on YouTube.
The force will be with you.

Design a site like this with WordPress.com
Get started