A brief Introduction to Flutter

A brief Introduction to Flutter

A little bit of history….

yeah yeah I know, learning about history of anything in the world is boring….. Unless, the ‘history’ is not that far away.

Flutter was first announced 4 years ago in 2015 at the Dart Developer Summit. It was initially called “SKY”. I think that would’ve been cooler.

Flutter alpha (V-0.06) was released in May, 2017

Later, Google launched the 2nd preview of Flutter back in September 2018.

That’s when the developers around the world started to feel the heat. Even before the Flutter 1.0 was announced, many Flutter apps came in to the stores. Apps like – Alibaba, Google Ads, Tencent, Reflecty were proof that Flutter could be so Awesome.

Finally, Google launched Flutter 1.0, the stable version of Flutter on 5th of December, 2018. Just 4 months back when I’m writing this article.

As I was a Flutter fan at the time, I was lucky enough to watch the Flutter 1.0 official launch live .

 

History of Everything Source – https://github.com/2d-inc/HistoryOfEverything

At this launch, Google released ‘The History of Everything‘ app. A timeline of the world from the Big Bang to the age of WWW. An app built with Flutter with a single code base that can run in any Android or IOS device smoothly. This app has smooth animations because Flutter is able to run apps with a of 120 Frames Per Second. (Others only can achieve a maximum of 60 FPS).

To build apps with Flutter, you need to know Dart as flutter runs on the Dart virtual machine and flutter uses Dart as the Programming Language.

Let me give you a brief introduction to Dart too.

  • Dart – A object oriented programming language developed by Google
  • Dart was first released in 2011 and the latest stable version (Dart 2.2.0) was released in February 2019.
  • Many sources mentions that Google initially released Dart as a alternative to Java-Script. But, in the official Dart website, they deny it.
  • For dart beginners, dart devs say “You probably already know Dart, you just don’t realize it”.
  • Why?, because dart is a lot like java, c# or js. If you know any of those languages, you only need to study a few syntax changes.
  • Also with dart, you can do both server side and client side developments.
  • Dart is compatible with all major browsers, and can be converted into JavaScript.

 

Now, to the most important part….

Flutter : Google’s newest cross platform mobile application development technology.

 

A page from History of Everything…
Source – https://github.com/2d-inc/HistoryOfEverything

  • An app made with flutter can run on Android, IOS and the Fuchsia operating systems. Fuchsia is the Google’s newest OS. Rumors say that Fuchsia can run on many platforms, from embedded systems to smartphones, tablets, and personal computers. If it becomes successful as many of Google’s products, it will replace android.

Anyway, the important things is, Flutter drives the entire Fuchsia OS. If fuchsia replaces everything as expected, being a mobile developer and not knowing Flutter will be a huge disadvantage for you.

  • With flutter, you can achieve up to 120 Frames per Second. That’s unbelievably smooth for a mobile device.
  • Apps built with flutter have full native performance on both Android and IOS devices without the use of a JavaScript bridge. Now that’s a huge step forward.
  • In flutter, EVERYTHING is a widget. Literally EVERYTHING.

You want to add text field? It’s a widget

You want to add a button? It’s a widget

You want to add the above button and the text field to a container? It’s the Container widget

You want to Position the above container to the center of the screen? It’s the Center widget

 

 

  • There’s a rich set of inbuilt widgets, you can customize them as you want.
  • If you want to make the IOS app different from the Android app, like if you want to use two separate themes for them or if you feel like having the same theme is a bit dull, having two themes is easily possible with flutter.
  • As flutter and Fire-base are both from Google, Flutter has a straightforward integration with Fire-base.
  • Do you ever wonder why google chrome is so speed compared to other browsers? It’s because chrome uses a graphic engine called SKIA to render it’s components. Well, Flutter uses SKIA too, to render it’s widgets.

And finally, my favorite part, the Hot Reload..

If you have ever used android studio to develop an android app, you’ll get what I’m saying.  If you wanted to do a small change to a page in your app, say the text color, text size, position… and after doing that, to check what it looks like you have to restart the whole app. This simply takes 10-15 seconds. Multiply this with the number of changes you do to a single app. That’s a huge time wasted.

But with flutter, after a small change, you just have to hit hot reload. In less than a second, you can view that. That’s another amazing feature of flutter.

A little bit of competitor analysis.

When it comes to hybrid mobile applications, React Native is at the top. So here’s a quick analysis of Flutter with react native.

Community – React Native is popular and old in the industry. So it has tons of community support. Regarding the development process, skilled JS developers make sure to come up with a solution to any problem.

On the other hand, since Flutter is new to the industry, there’re only a very little tutorials available online. Still the community is building around flutter. So you might not have the answer to all your problems regarding flutter. It’ll be harder than developing with react native without the community support.

Popularity –  Flutter has 30K stars and trending in GitHub while React Native has 65K stars. But don’t forget, Google backs Flutter, they’ll support it till Flutter becomes popular among all developers. So google got you covered.

Third Party Libraries – Since React Native is really old and popular, it has many many 3rd party JS libraries to enhance the usability of a hybrid app. On the other hand, Flutter only has a little amount of 3rd party libraries. But there’s a coming wave of libraries for flutter.

There’re separate documentations available in the flutter website for different devs starting flutter (Android, IOS, React Native, Web, Xamarin). So flutter devs also got you covered.

 

 

A simple hello world from flutter:

import ‘package:flutter/material.dart’;

void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {

   @override
   Widget build(BuildContext context) {
       return new MaterialApp(
           home: new Material(                                  //Material Widget
              child: new Center(                                    //Center Widget
                  child: new Text(“Hello world!”);    //Text Widget
               ),
          ),
     );
}