Flutter
The next generation of mobile development
Flutter?! But we already have Ionic, Xamarin, Reat Native and so on… Why another framework?
Well, Flutter has a different perspective from what we are used to see. It has nothing about HTML, CSS or Javascript (only for web version) to build a native mobile app.
So what? How is that possible?
First, let’s introduce you to a new way to code native applications for iOS and Android like an Object-oriented language and only that.
What language is Flutter written?
Dart. It is an object-oriented language, similar to Java but with few features that you would like to know when coding with it.
But, wait! Why not just keep going with Kotlin or native Android language?
Since Flutter was created by Google… Well, I would say it must have something new to bring us new features and for sure a better view to code with cross platforms at once.
Is Flutter really fluid as a native app?
Yes. And I am suspect to say, but with Flutter you gain more performance rather than the other frameworks and also can be compared to the native language of each of the platforms for real.
Why has Google created Flutter?
Flutter is the first major step to its new dream of a hybrid OS: Google Fuchsia. We can talk about it on the next time ;)
The syntax
In this section, we are going to present some features about Dart language that Flutter uses in order to build the applications. They are kind of unique so that’s why I thought the syntax would be something interesting to show. And if you know any other big feature, tell us in the comments :)
As an object-oriented language Flutter has hierarchies and a new option to extends from multiple classes: with. In the below code we can see that LoginScreenState is extending from State and TickerProviderStateMixin.
What about asynchronous methods? For that Flutter has a type of return for a method, called Future<Any>, where inside the <> you put the type of return you want, like String, bool, Null, for example. When you choose for a Null it’s like a non-return method, a void. Let’s see another gist.
In the above gist, you also see the name of methods and variable starting with a _ (underscore). Here we go again to another feature! This indicates a private type, only accessible in the class that the method is in it. In the next gist, we are also going to see how the class constructor is built: LoginMessage({this.snapshot}).
To end this section with what really matters, the structure of the layout part is literally all inside the classes and methods, especially the Widgets. The Widget type is all about how Flutter is and how the hierarchy of the elements are arranged. In the docs you can search for the grand library behind the scenes.
Some of the Widget elements should have more attention:
Scaffold: implements the basic for entire Flutter layout structure. This class provides all of the app components to be inside it.
Container: the provider of the positions, sizes, and styles to its children components. It is also the body’s app builder.
Another important architecture from Flutter is inside Scaffold object. Here we have the appBar and the body by turning them to the parents of the application. Inside one of each, we have also other names like title, child, and children.
The child and children elements are used to create the sub-elements of the layout. It means, as the name itself, the location of each part of the layout inside the whole page container.
We can say the HTML of Flutter is the classes by themselves, the Javascript is the Dart language by itself. And where is the CSS?
As you could see in the last gist some styles can be applied to each element by writing it down as a CSS property. However there are other ways to insert styles: it can also be applied as a Widget class.
Try that out
All the above knowledge is just a part of what Flutter is capable of. Google did a great job by creating native libraries to this new framework when we talk about Firebase, for example.
There are already a lot of information about Flutter to start building Hello World apps and for that a conference by Google, in Google I/O, take a part of it to teach a bit more about Flutter.
Google has provided great tutorials in Google Codelabs to get started with Flutter those you can free access by the following links:
I let you with a sample app image built in Flutter. See you next time! :D
