Flutter Single Child Layout Widgets

4 min readSep 8, 2019

When we start developing with Flutter it is essential to have good knowledge about Layout widgets as they help us to build amazing UIs with Flutter.

Since everything is a widget in Flutter, Layout can be also constructed through widgets.

There are 2 types of Layout Widgets in Flutter.

In this article, I am going to give a brief explanation about single child lists in Flutter.

Single Child Layout Widgets

As the name suggests, it can have only one child widget inside the parent layout widget.

There are many single child layout widgets available in Flutter, all of them will make your life easier if you choose the correct widget according to your requirement. You don’t have to remember all widgets just in the beginning of flutter, but get the experience of the widgets about their appropriate usage.

Using Appropriate Widget will save your time, make the code more readable.

Here are some of the Single child Layout widgets.

Let’s have a brief understanding about some important widgets.

Container

This is the most popular layout style widget, this widget provides customizable options for size (Height and Width), painting and positioning.

Container code example

Decorations with Container

Check the Code for Container Decorations Code Here

Padding

This Widget help to build the layout by adding Padding to its child widget.

Padding(
  padding: EdgeInsets.all(20.0),
  child: Container(
    height: 200.0,
    width: double.infinity, // expand in one dimension
    color: Colors.teal,
  ),
),

Use EdgeInsets class to have padding for the desired side as you wish, Here in the example we have added padding all around the child widget which required padding.

instead, you can use “EdgeInsets.fromLTRB” where you have more control over the padding for the child widget. Arguments should be passed int the following order as the name suggests.

LEFT, TOP,RIGHT,BOTTOM

padding: EdgeInsets.fromLTRB(20,5,20,8),

Different Methods available with EdgeInsets

Check the Code for Padding Example Here

Center

You can center the child widget with the Center widget.

Full Code Example for Center

Align

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.

Container(
  height: 200,
  width: double.infinity,
  color: Colors.indigo,
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      color: Colors.teal,
      height: 100,
      width: 100,
    ),
  ),
),

Check the code for Align Example Here.

SizedBox

Use Sized box if you need to have exact same height and width to the child widget through all screens.

A box with a specified size.

SizedBox(
  width: 300.0,
  height: 300.0,
  child: Container(
    color: Colors.teal,
    child: Center(
      child: Text(
        'Hello World!',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
),

Check out this video for more info.

AspectRatio

A widget that attempts to size the child to a specific aspect ratio.

Regardless of the exact dimensions, it tries to keep the aspect ratio of its’ child widget in the given aspect ratio.

aspect ratio : width/height

AspectRatio(
  aspectRatio: 3/2,
  child: Container(
    color: Colors.teal,
  ),
),

Aspect Ratio full code example

Video About Aspect Ratio

Baseline

A widget that positions its child according to the child’s baseline.

Baseline example complete code

For more information about Baseline widget visit this link

ConstrainedBox

A widget that force additional constraints on its child.

Use this widget if you want to force your child widget to have specific constraints without changing properties of the child widget.

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 50.0) ,
  child: Container(
        color: Colors.teal,
      ),
),

Complete Code Example for Flutter Box Widget

There are many other Single Child Layout widgets available in Flutter. Using the correct widget will help you to reduce the development time, the code will be more readable.

See you in another article…

Your claps will encourage me to write more articles in the Future. If you have any questions or anything to be improved please write a comment in the comments section or send me an email — chamithc25@gmail.com