UNDERSTANDING FLUTTER WIDGETS

Introduction

“Everything in flutter is a widget”… we all would agree that this is a very common line among the flutter community. It can be found on documentation, codelabs, articles, and tutorials. Well, this doesn’t exclude flutter layouts.

Understanding how layouts are structured in flutter can go a long way in helping anyone better structure their app.

 It is important to know that a flutter rendering engine is a bit unique in the case that it doesn’t use just one specific layout system. Flutter allows developers to combine different forms of layouts to build flutter apps.

In this article, you will understand what flutter layouts are, how they work, and how to use it to create beautiful apps.

Flutter Layouts

Flutter widgets are high-level classes that describe a view. We also have lower-level widgets that know how to just paint onto the screen.

This simply means that the layout system is abstracted away from the developer, and this in turn opens up many possibilities like using several paradigms together to sometimes mix and match these systems to achieve the layout we want.

However, there are widgets that make use of the flexible layout, this is commonly referred to as FlexBox in web development.

And there are also widgets that allow us to specifically place widgets on the screen at given coordinates. So, with flutter, you’re either painting or placing.

It is important to note that besides layout widgets, there are constraints in flutter. Constraints in flutter play a huge role in understanding layouts.

Constraints tell a widget how much space they can take up, and then widgets decide what they will take up. This works in pairs and gives us well-aligned flutter widgets.

While building UI with flutter, you are bound to get some really annoying errors especially when you make use of the Row and Column widgets, as well as other layout widgets.

Most of these errors are layout-constraint errors. One example of this error is the “flutter infinite size error.

In flutter, there are visible and non-visible widgets. Examples of the visible widgets are icons, texts, and images, while the non-visible widgets are column, row, and stack.

To build layouts, we have to combine widgets to create more complex widgets. Visit the Flutter Layout Documentation for more.

It is very important to note that all layout widgets have either of the following:

NOTE: A child could be referred to as an instance of a widget. So, a layout widget either has one child or it has more than one child.

We can never summarize a topic as important as flutter layouts without mentioning that there are basically two major kinds of flutter layout styles:

The Row And Column Widgets

In normal natural languages like the English language, words are written from right to left(RTL). And in this case, flutter supports  RTL settings for layouting and would change the behavior of the Row widget.

The most commonly used layout pattern in flutter is the flexible layout, this layout is a lot like the Flexbox layout for some people coming from the web development background.

The flex layouts work a lot with the row and column widgets.

The column widget is a vertically arranged widget. This widget displays its children in a vertically arranged array.

While working with the column widget, it is important to note that when the column gets more than enough children than the screen can have, we have an error.

In this case, we could wrap the child of the column in an expanded widget.

An expanded widget is a widget that takes up extra space in a row or column. When you have a need to give more space to a particular widget, it is very important we wrap the child with an expanded widget.

The Row widget, on the other hand, is a lot like the Column widgets but lays out its children in a horizontally arranged array.

And the row widget does not scroll, so in order to allow a row widget scroll, we need to wrap it around a listview.

The most commonly used properties of the Column and Row widgets are:

Although they do share similar properties, the way they are laid out is a bit different. And you can only tell when you try. So, why not try out the samples attached?

Scaffold

A scaffold widget is one of the basic widgets you’ll use 99% of the time when building flutter layouts.

A scaffold widget provides a frame that helps developers to implement basic material design visual layouts structure of a flutter application.

The scaffold widgets provide an API that allows us to use Appbars, drawers, navbars, bottom navigation sheets, FloatingActionButton e.t.c.

Normally, we could decide to style all these ourselves, but making use of the scaffold widget gives us a default frame and allows us to style it as we want.

Stack

A stack widget allows multiple child elements stacked on each other. In designing UI, we sometimes have a need to place some widgets on each other, like placing just a pattern on a scaffold widget or designing a card game, where we need to have a stack of cards.

The stack widget allows the list of widgets to be stacked on top of one another. So, when it renders, the children are rendered from bottom to top.

Every child of a stack widget is either non-positioned or positioned.

Conclusion

In understanding flutter widgets, there is a whole more than reading an article or scanning through the internet to watch people create magic. I highly recommend you practice these widgets.

However, there is a lot more to layouts than what was covered here. But then understanding these is a start.

We already discussed the very important factors in understanding flutter layouts. We now know there are multi-child and single-child layouts in flutter.

You could visit the flutter official layouts catalog for more lists of widgets that could help in creating beautiful layouts. There is always a widget for every layout. It’s either a single layout or a combination of more than one widgets.

Thank you for reading!

Acodez is a renowned web design and Mobile app development company in India. We offer all kinds of web application development services to our clients using the latest technologies. We are also a leading digital marketing company providing SEO, SMM, SEM, Inbound marketing services, etc at affordable prices. For further information, please contact us.