Day 8 Basic Widgets (Stack, GestureDetector)

Hello there 💙

Today, we will examine 2 more of the main widgets, which are our main structures, and we will see in which areas we should use these widgets and how they provide ease of use …

I leave my e-mail address below for you to express your questions and opinions on the topics, you can reach from there.

E-mail: gurkanfikretgunak@gmail.com
🔧

Widgets and classes we will examine are respectively;

• Stack,
• GestureDetactor

Search completely in the widgets that we will examine today is more dynamic, more permanent and can increase the flexibility of the application within itself, show better quality of usage processes, and we will see that the design language is also permanent when looking back in forward processes.

Stack

The stack widget allows us to place multiple widget layers on the screen. The widget takes multiple kids and sorts them from bottom to top. So the first item is the bottom item and the last item is the top item.

Stack Widget When we look at the process, we are examining one of the hierarchical principles of material design on the day we mentioned in the previous articles.

Wherever you are, it is worth mentioning that we cannot perform operations without Stack in design processes.

Let’s take a look at the image below to better understand the layer structure.

The child Widgets size in Stack Widget is the size of the largest member in the layer. So if the bottom layer covers the entire screen, the size of the Stack is full screen. Each member in the stack needs to be positioned or aligned otherwise it ends up in the upper left corner by default.

As an example, let’s examine,

And let’s view as a result.

If you notice, the smaller widget has a lot more room to go, and so it’s on the top left by default. To change this, you can align or position your widget using the Align or Positined widget. Align widget usually takes the widget to extreme positions. For example, if we enter the top right, we need to add extra padding to keep it neat and organized. A Positioned widget combines these two things and allows us to keep a Positioned widget instead of Alignment and Fill. We will see how it will be a little later. We will modify our example to use Align and Positioned. Let’s embroider an Alignment in Internal Widgets and then a Positioned widget.
Note: Positioned must be a Stack child element. There cannot be any other widgets between the stack and the widget. To simply align a widget:

Let’s view this now in the children: [] array in Stack.
This Widget will help us to view the movements in the stack.

Another Widget to help us is Positoned.

And let’s view it as a result.

Let’s examine it with another example.

And let’s view as a result.

I want you to examine this Widget in detail in order to use your imagination and your products more effectively in the designs you want to use, and I would appreciate if you share these works with me.

GestureDetector

The most beautiful feature of this tool is that we can provide a dynamic use on the application by throwing more than one movement, let’s give an example, it will allow us to get a return with movement such as one click, double click or one click drag. Let’s see it all together.

The motion system in Flutter has two separate layers. The first layer contains the events of the pointers such as touches (finger gestures) and the raw pointer events that define the position and movement of the mouse cursor on the screen. The second layer has gestures that define semantic actions consisting of one or more pointer gestures.

Let’s Examine With A Case Study

And let’s view the result.

As you can see in the example you have examined, we can see the movement change in the object by defining an object in the container.

Summary

The effective use of the design language within the structure within the Widgets we are reviewing today provides us greater convenience in use and we need to examine the properties of the Widgets in order to view the structures within your applications more clearly. Changes according to the requested planning movements within the applications will enable you to develop more effective applications.

Stay With Flutter 💙