Day 6 Basic Widgets — 2 (Row, Icon, SizedBox, Center)

Hello guys, 💙💻

Today, we continue to examine the basic Widgets with you. Today, we continue to share your ideas about the usage areas of our Widgets in our 2 series. Let’s examine our 4 more Widgets and talk about their structures, I hope you have started to use Widgets and structures in your applications.

⚜

The widgets we will examine are;

Row,
Icon,
SizedBox,
Center

Before examining the structure of our widgets, we should always anticipate the following. From the moment the structures of the designs are planned, it will always be easier for us to use Widgets when it comes to the design phase. It is very important to have an idea about your designs, your colors, the arrangement of the objects and a design language. Therefore, I would like you to read and watch my Design story💙 and YT content in your spare time to use.

Row

As in the structure of the column, you need to provide a horizontal use of some of our components. Among them, Row Widget provides the most ideal processes for us. One of the beautiful features is that we keep more than one Widget in it and we realize the use of Widgets by wrapping the interior correctly.

The process we need to pay attention to is the structure with the number of Widgets and the size that we try to fit into the area of the screen width. If it is more than normal, your application will run with an error, but during the time your application is running, the process that you call overflow in the screen resolution will appear as an error.

As you can see in our code structure above, it contains one more structure and provides their alignment in the horizontal plane. As the name suggests, we see that it is displayed in an array structure.

We have no limits on how we can shape our widgets into it. It is all about how we shape the designs we want to use in our apps and how we understand the structures of the widgets that surround each other.

Now let’s examine the result.

As we mentioned above, if we search for the nested array, we will encounter some errors if the Row widget width exceeds the limits.

Yes, when we view the code structure we mentioned above, it will reflect an error.

By providing barrier overrun on the right, we can say how many Display Pixels we have seen in the warning. This error will enable us to quickly edit our designs with HOT Reload by making quick revisions with the errors that will appear as predicted in our interface design. You know that Flutter allows us to view our designs by pressing the screen, instant changes.

If we talk about another subject,

We can make comments about their alignment by editing the structures of Text Widgets as follows.

The TextDirection property controls the direction that children create. TextDirection.ltr is the default textDirection of Line children, so the first child is created at the beginning of the Line, on the left, and the next children after the right. If you want to sort the children in reverse direction (right to left), textDirection can be set to TextDirection.rtl. This is illustrated in the example below

And what we view as a result,

Tips:
To better understand these structures, do not go through the MultiChildRenderObjectWidget structures. Nobody tells this tip 🤩

Icon

The use of Icon provides such a great convenience for every application that sometimes it is a great convenience to use icons rather than text. Imagine a detailed explanation rather than a small icon button, rather than making a long explanation, users can navigate quickly by switching applications according to the meaning of the icon icon.Therefore, our icon Widget is very important for us and using its own library will also provide great efficiency.

In addition to the Material Icon Library that comes in Flutter, we can improve our applications in the future with the cupertino icon that we support as a package. This process is related to our imagination and preliminary design details. This allows us to improve without relying on the existing material library alone. We can access more than one icon library in the package searches we will do on pub.dev.

The time you are viewing here has been used by pulling from our Icons library.

and viewing.

The nice thing about using icons is that we can get the results faster by giving the color we want with our icons and a dynamic design.

SizedBox

It is sized in a certain size and it can be used by adding any Widget into the box. This use is usually used for spaces between applications, but as we said, you can use it efficiently by adding a Widget in it.

To examine it from another angle, I would say review this content.

https://www.youtube.com/watch?v=EHPu_DzRfqA

Center

It is one of the most ideal Widgets to know if the Widget in the center is aligned. This is ideal for objects that are seen in a single or single group structure at some points in our applications. The flexibility of use may change your experience during the design process.

Let’s examine the structure below.

and Let’s View as a Result.

We view our center widget by wrapping it with a text widget. View using the code sample above.

Summary

While creating our structures, the use of Widgets helps us a lot. As we quickly understand their working principles and their usage frequency increases, it enables us to produce more practical products. But one of the important factors is to make pre-planning, and to make preparations according to the suitability of our designs in developer kits.

Stay With Flutter 💙