Day 4 — What is State? What is LayoutBuilder and Sample?
Hellooooo!! 🤩💙
Let’s continue where we left off today, especially now we have started to understand more or less the processes related to the communication of the situational structure, We need to understand what architecture the building has as a basic working class in order for the state structure to use the communication between the vehicle trees in the application efficiently. let’s talk today and review our first widget today.
The main purpose of use of the state structure is by capturing instantaneous changes of situational structures that are connected to each other, in communication with each other. We know that it helps us a lot in viewing the results it shows on the screen.
We stated that we made use of our Widgets so that we could call state objects.
One of them is Stateful and Stateless.
We can clearly see that we need an intermediate bridge in order to ensure the communication of the application in the widget tree with each other.
If we examine its structure in detail;
The framework creates a State object by calling StatefulWidget.createState.
The newly created State object is associated with a BuildContext. This association is permanent: State object never changes BuildContext. However, BuildContext itself can be moved around the tree along with its subtree. At this point, the State object is considered mounted.
The framework calls initState.
State, due to its structure, receives instant updates in the renewal process in the Page, in communication with the previous definitions in order to be in contact with other good situations. automatic room dynamically reflects the screen and we see that our application results in efficient changes.
Another advantage of state structures is that they quickly adapt itself to processes such as adapting, renewing, displaying, instead of providing data exchange dynamically and finally terminating.
Widgets that it interacts with;
StatefulWidget
StatelessWidget
InheritedWidget
Let’s come to another issue, now we’re starting to slowly inspect widgets.
Layout Builder
These structures provide multiple flexibility that will help you view multiple different interfaces while performing operations at different screen resolutions.
For example, it is a tool that offers us everything we need to correct some distortions in designs according to changes in browser or screen resolutions.
Let’s examine it as a code.
Source Code:
LayOutBuilderDemo.dart
https://carbon.now.sh/5JDf1nBkfxn4M6Nz3LoN
To make a statement that we have shown with the Blue Arrow and Box, Layoutbuilder helps us to quickly manage that the structure of the screen changes from the design as the screen resolutions change.
We call the Layoutbuilder widget in the area where we show the Blue Arrow again and we create a function in it by using the build parameter in it. With this function, we provide a statement to provide constraints, ie maximum width.
Now we only have to create two Stateles or Stateful widgets in our subclass and display the change according to the resolution.
If you Noticed the change in the Yellow Arrow and box.
By using the Text Widget, you can see the text change according to the resolution in the same way.
You can say that the Layoutbuilder saves many points.
💙
And Consequently 💻> 📱
⚠ Useful information;
The use of if else, as you have seen above, comes up with an alternative. My preference is to adopt the second way of use because it becomes more practical after a certain period of time, especially if you design with Flutter, it will provide comfort in the widget. 😎
Summary
If you design an application with situational communication, it is in your hands to get fast results, if you want your application to react to the data you want to display dynamite instantly, you need to understand the State structure very well.
In addition, with Layoutbuilder, this example is displayed very clearly. As we learn the working structures of widgets, it will be easier for us to develop designs on Flutter.
Stay with Flutter 💙
#google #dart #flutter
