Single Child Layout in Flutter

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.

Multi-child layout widgets
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.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Container(
height: 200,
width:500,
color: Colors.grey,
child: Align(
alignment: Alignment.center,
child: Text(
"Text centre alignment",textDirection: TextDirection.ltr
),

),

);
}
}

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return Container(

height: 200,

width:500,

color: Colors.grey,

child: Align(

alignment: Alignment.center,

child: Text(

"Text centre alignment",textDirection: TextDirection.ltr

);

}

Out Put :

We can change this text alignment to centre left by changing

alignment: Alignment.centerLeft

1	alignment: Alignment.centerLeft

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-

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home
         : Scaffold(appBar
         : AppBar(title
         : Text("Example of container"),
     ),
       body
           : Container(
         color: Colors.green,
         padding: EdgeInsets.all(30),
         transform: Matrix4.rotationZ(0.1),
         margin: EdgeInsets.all(20),
         child
           : Text("this is a Contanier ",
           style
               : TextStyle(fontSize : 20)),
       ), ), );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

home

: Scaffold(appBar

: AppBar(title

: Text("Example of container"),

body

: Container(

color: Colors.green,

padding: EdgeInsets.all(30),

transform: Matrix4.rotationZ(0.1),

margin: EdgeInsets.all(20),

child

: Text("this is a Contanier ",

style

: TextStyle(fontSize : 20)),

), ), );

}

Output:

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

Pankaj Tyagi 27 April 2023

. . .

Single Child Layout in Flutter.

Types Of Layout Widgets in Flutter.

Single-child layout widgets

List of some Single child Layout widgets.

Align

Out Put :

Container

Output:

Conclusion :

Leave a Comment Cancel Reply

Message Sent!