What’s Flutter and why should I care?
By: Nidhal Anis Bouzara
Tags: Flutter, Dart, Mobile App Development, Technology, Programming

D iving deeper into Flutter

To understand Flutter, we must first understand its most basic building blocks; widgets!. Much like how “everything is a file” in Linux, everything within a Flutter application is a widget, we’ll cover widgets in more detail in the future but what it boils down to is that widgets make up everything from the images and text displayed on the screen, to the structural elements that shape the way an app looks. Some widgets have other widgets contained within them making them container widgets, while said widgets are referred to as child widgets, it is using this hierarchical order that Flutter developers can do all sorts of cool things with their app.

To familiarize ourselves with the concept of working with widgets, let us do a simple mental exercise, imagine an article that has a title, nine images in a 3x3 grid, and some text under it, our task is to think of how we would lay them out in a Flutter application using containers. There are many ways to go about doing this, but we want to get it done in a way that makes the most sense and requires the least number of widgets, so to get started, we need a container widget that will contain the whole article within it, and a text widget for the Title and another container widget for the image grid, this container widget will have three rows each containing three images, and a widget underneath for the text, and tada! we’ve done it.

Design, Design and design

Now if you’re familiar with both Android and iOS then you might have noticed that the difference in the design language between Google’s “Material Design” and Apple’s “Human Interface Guidelines” would prevent Flutter from truly being suitable for cross-platform mobile development, but Flutter resolves that issue by having Flutter widgets implementing the current iOS design language inside a ready-to-use library called the “Cupertino” library, as well as widgets implementing the Material design guidelines inside the “Material” library, all you need to do, is include either of them inside your source code and you’re ready to roll.

Speaking of design, In today’s market, a branded, custom UI is king. There is no future for Flutter if it only provides native-looking widgets for both platforms, which is why the first order of business for the developers of the Flutter framework was to create the best possible framework for creating customized mobile designs. And for that purpose, they have developed simple yet powerful tools that developers can use to easily customize every aspect of every widget inherent within Flutter and to create new unique widgets to fit their apps’ needs.

Stateful/Stateless widgets

Flutter has two types of widgets that developers can use to optimize their apps’ CPU and GPU usage, as well as its memory footprint. Stateless widgets used to display static elements on the screen, meaning widgets that remain unchanged from their initial call state (except in certain exceptions), and stateful widgets that display dynamically changing widgets. Using this feature, say if your page has a ticking clock, rather than putting the state at the top of the page and rebuilding the entire page each time the clock ticks, you can create a dedicated clock widget that only updates itself.