Single Child Layout in Flutter.

Updated 27 April 2023

Save

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

As we know everything is a widget in Flutter.
We design layouts using widgets.

Read more about Flutter app development services from mobikul.

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

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home