Day 7 Basic Widgets — 3 (Expanded, Scaffold and More…)

Hello, 💙😊

Today we are with you on the 7th day. I hope you have questions and ideas in your mind about the issues we have examined so far. To get answers to these questions and to share your ideas, you can contact me by e-mail.

E-mail: gurkanfikretgunak@gmail.com

We will examine 6 more of the basic widgets, which are our main structures, with you, we will look at which areas we should use these widgets and how they provide ease of use …

🔧

The widgets and classifications we will examine are respectively;

• Expanded,
• Scaffold,
• AppBar,
• Fab (Floating Action Button)
• Drawer,
• NavigationBottomBar,

Especially when it comes to designing the structure on the home screen, some Widgets provide a lot of convenience, especially with the change of screen resolutions, we will examine a structure that can be expanded and shaped according to the number of Widgets in it, in order to avoid the errors that occur, the 2nd Widget we will examine is a structure where the components of the basic structure on our screen are compiled, namely Scaffold. () will be.

Expanded

Based on the meaning of the word, we can call it a Dynamic Container that can expand and scale its size according to a screen resolution.

A widget that expands the child of Row, Column, or Flex.

Using an expanded widget allows the child of a Row, Column, or Flex to expand to fill the available space along the major axis (for example, horizontally for a Row or vertically for a Column). If more than one widget is expanded, the available space is divided between them according to the flexibility factor.

An Extended widget must be a child of a Row, Column, or Flex, and the path from the Expanded widget to the containing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets. You can also review our previous articles on this subject. And you can easily understand this difference.

Let’s take a slow dive into the code.

As we can see, we have added 3 expandable Widgets in 1 column and these structures determine the width ratio according to the Flex parameter value.

The more Flex value in our second widget, the wider the screen space will be. Or vice versa.

From now on It is up to you to shape the “child:” structure and view it faithfully to the design borders of the structure.

And let’s view it as a result.

Bir adet de yatay bir yapı olarak inceleyelim,

As you can see, it is a horizontal Axis and our Widget, which we have examined, scales itself again according to the Flex structures, the screen resolution in width ratio according to the variable ratio. This process provides a dynamic design language. But as you can see, the Container we added is of a fixed value, so it is not affected by screen resolution changes.

And let’s examine it as a result.

If we examine it in more detail,

If you have several widgets that you want to share extra space (but not equally), you can adjust the flex factor.

The first and third particle have a fixed size. The second and fourth widgets in the row share the extra space as they are wrapped in Extended. However, due to the use of flex factors, the second widget will have twice the width of the fourth widget.

We view it as.

Scaffold

We can say that the main components of our application are together and we manage them, let’s briefly talk about some topics,

• Appbar
• Body
• Floating Action Button
• Drawer,
• Bottom Navigation Bar

Constructor of the Scaffold class looks like the following.

Let’s view it on the IDE.

With our multiple parameter capability here, we can use effective, dynamic and other structures efficiently.

AppBar

The Appbar is the part of the Scaffold Widget at the top that gives us transition information about screens or pages.

If we examine its structure, we get an object from the “Preferred Size Widget” class. We use the AppBar class to use it.

AppBar has a wider structure within itself.

Let’s examine it as a code.

And let’s examine it as a result.

Let me view the changes in design by changing the parameters.

Body

Body forms the body of the Scaffold Widget, that is, the section between the AppBar and the Bottom Navigation Bar. Gets an object from the widget class. Places the Widget it has received in the upper left corner.

Let’s examine it with one Body. And this will be a structure that we have displayed in Scaffold.

And let’s view as a result.

And we have many such structures, I request you to develop your applications with a rich design language by making these additions.

Floating Action Button

FAB, short for Floating Action Button, is a floating button that can be positioned inside the Scaffold.

This parameter is inside a Widget object.

Let’s Create a FAB now:

and let’s view as a result.

Drawer

Drawer and EndDrawer are drawers that open from the left or right. The side menu opens from the left side, EndDrawer from the right. These two parameters take one object from each Widget class.

Let’s examine it as a code,

And Let’s View As A Result,

Bottom Navigation Bar

BottomNavigationBar is the engine of Scaffold. It takes an object from the Widget class as a parameter.

Let’s examine it as a code.

And let’s view it as a result.

Summary

Yes, if we summarize the widgets we have examined today, we have examined the responsive adaptation of the structure we created with the Expanded widget. Another widget is our widget that we use while creating the main architecture of our Scaffold structure. In other infrastructures, we took a look at processes such as AppBar, Drawer, BottomNavigationBar. I hope you enrich your designs from another aspect during our development structures.

Stay with Flutter 💙