Easy Flutter essentials for beginners

In this article we will make a short introduction about Flutter. We will cover its foundation history, its structure and its most essential element: the widgets. However, to get into context first we are going to define that technology so as to shape the concept.

What is Flutter

Well, according to Google on the documentation page,

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter.dev

So, as they say, it is an UI software development kit (SDK) built by them that allows developers to make apps for iOS, Android, the web, Windows, Mac, Linux, inclusive Google Fuchsia, that strange open source operating system under development currently by Google. Yes, just as you read it. In advance (later we will explain its limitations) we can assume and summarize that it is a pack, a collection of software tools for development in one installable package with which you can easily make great cross-platform apps. Now let’s see the origin of this SDK.

A little history

Flutter went out to this world with the name “Sky” during the Dart Developer summit of 2015, already telling their purpose of rendering on a single base-code an app built for both Android and iOS at 120 Frames Per Second (FPS).

Then Google released Flutter alpha, the V-0.06, in May 2017. Later, in June 2018 at the GMTC front-end conference in Beijing they announced Flutter Release Preview 1, showing a new phase of the development into the final stages of stabilization for 1.0 and the 2nd preview of Flutter back in September 2018.

It was at this moment when developers started to feel the delusions and the magic. Even before the version 1.0 was launched, many Flutter apps came in to the stores. Apps like – Alibaba, Google Ads, Tencent, Reflecty were proof that Flutter could change the front-end app building.

Finally, Google launched Flutter 1.0, the stable version, on 5th of December, 2018. For this they worked tiwh 2Dimensions to build a beautiful app called “The History of Everything”, which was a some-kind of arranged timeline of the known history from Big Bang to our times. This app was great and showed how powerful Flutter could be.

Well, insteresting history, but what does that package contain exactly?

Framework Architecture

Flutter has roughly the following components:

• The Dart platform. Dart is the coding language with which Flutter apps are made.
• Flutter engine, mostly written in C++ and using Google’s Skia graphic engine
• Foundation library (basic classes and function to create apps and the API for the engine)
• A bunch of specific widgets

Wait… but what are those things named “widgets”?

Widgets

If you are used to programming with OOP (object oriented programming) languages widgets will be familiar to you. We have to remember that Flutter is a useful UI toolkit to build cross-platform apps. So we can say that a widget is a fully description of a part of the user interface. Coding in Flutter is about creating widgets from other widgets, making composition and resulting in a complex widget tree. The build() function makes a widget to be described through other widgets of lower levels.

This modern framework takes inspiration from React. Widgets describe how has to be the view given their current configuration and state. By changing their state, the widget rebuilds its description, the framework realize it and compare against the previous description so as to apply the minimal changes needed in the underlying render tree to transition from one state to the next.

However, not all widgets are the same or similar: there are many types of widgets. For example, StatefulWidget() and StatelessWidget() differ between them in the widget state. While StatelessWidgets are static in terms of state, StatefulWidgets have a state which changes in runtime. Moreover, they also diverge in their interpretation. A Container() is a widget that represents some view, but BoxDecoration() inside that container is also a widget giving a characteristic to this container. There are widgets that do special things, like FutureBuilder, etc.

That widget composition is what builds an app. In fact, a Flutter app is a widget frequently called MyApp that includes and contains all other widgets, the larger widget of your UI.

Finally, there are some widgets that are made to conform determinated design guidelines. Those are the “bunch of specific widgets” mentioned before. While Material Design widgets follow the design rules of Google (Android), Cupertino widgets use the Apple’s Human Interface Guidelines iOS design.

Flutter present and summary

Flutter is a new modern front-end technology for native UI cross-platform development. Its use is simple because of the widgets, a way of coding taken from react programming that makes coding easier and beautiful. However, it is still a young framework and doesn’t work completely right. While using it for Android an iOS development is a great idea because results in few errors and there is already a lot of feedback and code and libraries developed, the desktop and web versions are yet limited, because they are on alpha and beta releases respectively.