Day 5 — Basic Widgets — 1 (Text, Container, Padding, Column)
Hello Flutter Loverssss 💙
Today, we will start to examine the widgets slowly with you, this topic will consist of 4 titles completely, Today I started to slowly enter one of them, tools that we have developed in our front interface visually and dynamically The panel where we process all our mistakes will help us in our skin.
Our widgets that we will examine today,
Text,
Container,
Padding,
Column
These structures, which give us really fast results while creating designs, will make the content appear richer while developing the application.
We will talk briefly about the usage area and ergonomics of each widget.
Text Widgets,
Usually everyone uses Text widgets in one use.
This tool has been designed to be examined under 3 subtitles,
Text style to be applied to alt Text widgets with no obvious styles.
It is worth noting that it is tiring in terms of flexibility and strenuous flexibility in terms of usage compared to other Text Widgets.
The RichText widget displays text using multiple different styles. The text to be displayed is described using a tree of TextSpan objects, each with an associated style used for that subtree. Depending on layout constraints, text can be split into multiple lines or all displayed on the same line.
We can say that by hosting more than one TextStyle and String data in terms of usage, using more than one Text Widget really saves us from the unnecessary code crowd in our projects.
A string of text with a single style. The difference between RichText represents a single value. They allow us to create more original content on its own.
Let’s view our Text Widgets in a simple structure.
After you define a Text Widget in the DefaultTextStyle widget that you specified in the blue box, we see that you need to define an extra style.
Your mistake will be corrected automatically as soon as the design style is entered. And you can continue the design of your text structure. But, as we said, it is worth mentioning that it is a bit tiring in terms of loss of time in intensive projects and in terms of the content of the project because more than one content is entered in this process.
The Text Widget structure we have specified in the green box is stated plainly and simply. In this process, the only factor we need to add and display will be the style: TextStyle () class.
Most importantly, and I want you to use the applications intensively. And in the following processes, RichText, which we have specified in the Yellow Box, is the tool that provides great flexibility and comfort in projects.
When we try to examine its structure, we use TextSpan to define more than one text text in one place. And we do not neglect to create TextSpan as much as the Text structure we want to intervene, as a result, by creating a children [] from the duplicate in TextSpan.
The first TextSpan that we have determined in RichText can affect the TextStyle of the other TextSpans we created, and we can achieve a fast result by making single changes only in other TextSpan’s. We can view this in our Code Learners.
As a result ⬇
Expected File Name to Be Created:TextWidgetsDemo.dart
Source Code: https://carbon.now.sh/IKtVTEZ1RS1kKKTRVjn0
I am sure that you will provide a fast learning by examining the source code, running your project,
editing the style structure of the text structures in your project.
If there is a process in your mind, you can ask me any question you want …
Container
A useful widget that combines common painting, positioning and sizing widgets.
One of the main features of this structure helps it to form the boundaries of the widgets it has identified. This widget, which has a practical and flexible structure in terms of use, can be sure that it helps us reach our limits in design to the point we want. If we think in a simple structure, we can say that geometric structures are one of the ideal tools to view more efficiently in material design.
Let’s examine our widget in a simple way,
Let’s View Our widget
If we want to develop our structure further, this example shows how to use many features of the container at the same time. Constraints adjust to fit the font size as well as the wide headroom vertically while expanding horizontally to fit the parent element. Padding is used to make sure there is space between content and text. Color makes the box blue. Alignment causes the widget to be centered in the box. Finally, the transformation applies a slight rotation to the entire mechanism to complete the effect.
and Let’s get a result …
and as an extra, you can also look here.
Padding
A widget that places its children based on the given fill.
When transferring overriding constraints to its children, the padding collapses the constraints with the given padding, causing the child to layout at a smaller size. The padding then sizes itself to the size of the child, is inflated with padding and effectively creates free space around the child.
Let’s view as a result.
At the point you see here, the structure becomes displayed by adjusting the space range within itself. You can be sure that we will talk about a lot of details and weight on this subject, you can be sure that an application saves a life with a small change in the interface. End user processes are always very important for us.
Column
A widget that displays its children in a vertical array. To make a child expand to fill the available vertical space, wrap the child in an Expanded widget. The Column widget won’t slide (and it’s generally considered an error to have more sub-items in a Column than would fit in the current room). If you have a set of widgets and you want them to be able to scroll if there is insufficient space, consider using ListView.
And as a result, we see the structure we are viewing ..
As you can see, we have shown that more than one tool is working together regularly, when we want to display more than one tool on your screens, Column will be sufficient for us. Here, our aim is to determine our designs beforehand and to display them in our application and to get the results of these in the application you are viewing, and to provide flexible use.
To explain in another example,
Let’s examine a paragraph structure here.
and it comes across as a result.
Summary
We have seen that the tools you have examined today are all different from each other, and the tasks in the structures we want to work in our applications are different from each other, and we need to understand the dynamics of each tool better in order to better understand these tasks. To use them in a more detailed way, we need to formulate our ideas, ideas, designs well, and preliminary studies will provide more efficient results when combined with these tools while developing our applications.
Our Next Series Basic Widgets — Will Be 2
Stay with Flutter 💙
