Redeem Now
Read More
Read now

Single Child Layout in Flutter.

Save

In this blog we will learn Single Child Layout in Flutter.

As we know everything is widget in flutter.
We design layout using widgets.

Types Of Layout Widgets in Flutter.

There are two types of Layout Widgets in Flutter.

  1. Multi-child layout widgets
  2. Single-child layout widgets

Single-child layout widgets

As we are getting a normal idea from naming “Single child layout” that a is  parent layout that
contain single child widget.

Flutter provides many single child layout widgets.
You have to choose it according to your need.

List of some Single child Layout widgets.

Align
Container
SizedBox
AspectRatio
Baseline
ConstrainedBox
CustomSingleChildLayout
Padding
Center
and many more..

In this blog, we will discuss about Align and Container single child layout.

Align

Using align class we can control the alignment of child widget.
It allow us to place child widget at position you want.
With Align Class you will have more control over the exact position of the child widget. It allows place the child widget in the exact place you need.
A widget that aligns its child within itself and optionally sizes itself based on the child’s size.
Align Widget can change its size according to the size of its child.

Let’s take an example.

 

Out Put :

 

 

 

centre_align

We can change this text alignment to centre left by changing

left_centre_align

We can use below to put our widget at desire position

Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.bottomRight

Container

Like other, container class is also a widget.
A container can contain multiple child widgets.
It is a widget that combines common painting, positioning, and sizing of the child widgets.
A container is just like box which have any content inside it.
We can change background of container, can give margin to separate child widget. A container surrounds its child with padding.

Let’s take an example-

Output:

 

Container_with_background

 

Wants to know more about Single Child Layout in Flutter  visit here.

Conclusion :

In this blog, we learn about Align and Container Single child layout in Flutter.

Hope ! this will help you in finding what you are looking for.

Thanks For Reading

 

. . .

Comment

Add Your Comment

Be the first to comment.

css.php