Know Your Widgets: Container in Flutter

Ashish Rawat

Published in

FlutterDevs

6 min readFeb 19, 2019

If you are new to flutter you must be wondering what is Container then,

A Container is a convenience widget that combines common painting, positioning, and sizing widgets.

You can use Container to any widgets to add some styling properties.

Let’s look into the parameters of a container.

Container({
  Key key,
  this.alignment,
  this.padding,
  Color color,
  Decoration decoration,
  this.foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
})

That’s a lot of properties, but no worries we have everything sorted.

Let’s dive into each and every property.

Color :

Center(
  child: Container(
    color: Colors.amber,
  ),
),

Child :

We can only add one child to the Container as it is a Single-child layout widget.

Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 400,
    ),
  ),
)

Alignment Property:

You can use Alignment, FractionalOffset, and AlignmentDirectional class for the alignment property in Container.

Alignment

In Alignment (0,0) means the center of the screen so if you assign Alignment(0,0) to the alignment property then it will be on the center of the screen.

Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),
   alignment: Alignment(0, 0),
  ),
)

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(1.0, 1.0),
)

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, -1.0),
)

child: Container(
    color: Colors.amber,
    child: FlutterLogo(
      size: 200,
    ),alignment: Alignment(1.0, -1.0),
  )

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment(-1.0, 1.0),
)

You can use constants that are already defined by Alignment Class.

Example:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: Alignment.bottomRight,
)

There are many other constants :

// The top left corner.
static const Alignment topLeft = Alignment(-1.0, -1.0);// The center point along the top edge.
static const Alignment topCenter = Alignment(0.0, -1.0);// The top right corner.
static const Alignment topRight = Alignment(1.0, -1.0);// The center point along the left edge.
static const Alignment centerLeft = Alignment(-1.0, 0.0);// The center point, both horizontally and vertically.
static const Alignment center = Alignment(0.0, 0.0);// The center point along the right edge.
static const Alignment centerRight = Alignment(1.0, 0.0);// The bottom left corner.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);// The center point along the bottom edge.
static const Alignment bottomCenter = Alignment(0.0, 1.0);/// The bottom right corner.
static const Alignment bottomRight = Alignment(1.0, 1.0);

FractionalOffset

You can also user FractionalOffset with the alignment property of the Container.

In FractionalOffset, (0,0) means the top left of the screen so if you assign Alignment(0,0) to the alignment property then it will be on the top left of the screen.

FractionalOffset(double dx, double dy)

Example:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset(0,0),
)

You can use constants that are already defined by FractionalOffset Class.

Example:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: FractionalOffset.topLeft,
)

There are many other constants :

/// The top left corner.
static const FractionalOffset topLeft = FractionalOffset(0.0, 0.0);/// The center point along the top edge.
static const FractionalOffset topCenter = FractionalOffset(0.5, 0.0);/// The top right corner.
static const FractionalOffset topRight = FractionalOffset(1.0, 0.0);/// The center point along the left edge.
static const FractionalOffset centerLeft = FractionalOffset(0.0, 0.5);/// The center point, both horizontally and vertically.
static const FractionalOffset center = FractionalOffset(0.5, 0.5);/// The center point along the right edge.
static const FractionalOffset centerRight = FractionalOffset(1.0, 0.5);/// The bottom left corner.
static const FractionalOffset bottomLeft = FractionalOffset(0.0, 1.0);/// The center point along the bottom edge.
static const FractionalOffset bottomCenter = FractionalOffset(0.5, 1.0);

AlignmentDirectional

You can also user AlignmentDirectional with the alignment property of Container

AlignmentDirectional(this.start, this.y)

An offset that’s expressed as a fraction of a Size, but whose horizontal component is dependent on the writing direction.

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional(-1,1),
)

You can use constants that are already defined AlignmentDirectional Class

Example:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),alignment: AlignmentDirectional.topEnd,
)

There are many other constants :

/// The top corner on the "start" side.
static const AlignmentDirectional topStart = AlignmentDirectional(-1.0, -1.0);/// The center point along the top edge.
///
/// Consider using [Alignment.topCenter] instead, as it does not need
/// to be [resolve]d to be used.
static const AlignmentDirectional topCenter = AlignmentDirectional(0.0, -1.0);/// The top corner on the "end" side.
static const AlignmentDirectional topEnd = AlignmentDirectional(1.0, -1.0);/// The center point along the "start" edge.
static const AlignmentDirectional centerStart = AlignmentDirectional(-1.0, 0.0);/// The center point, both horizontally and vertically.
///
/// Consider using [Alignment.center] instead, as it does not need to
/// be [resolve]d to be used.
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);/// The center point along the "end" edge.
static const AlignmentDirectional centerEnd = AlignmentDirectional(1.0, 0.0);/// The bottom corner on the "start" side.
static const AlignmentDirectional bottomStart = AlignmentDirectional(-1.0, 1.0);/// The center point along the bottom edge.
////// Consider using [Alignment.bottomCenter] instead, as it does not
/// need to be [resolve]d to be used.
static const AlignmentDirectional bottomCenter = AlignmentDirectional(0.0, 1.0);/// The bottom corner on the "end" side.
static const AlignmentDirectional bottomEnd = AlignmentDirectional(1.0, 1.0);

Constraint Property:

Container(
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  alignment: Alignment.center,
  constraints: BoxConstraints(
    maxHeight: 400,
    maxWidth: 400,
    minHeight: 100,
    minWidth: 100,
  ),
)

Decoration Property:

The decoration parameter is to paint behind the child.

We can use the BoxDecoration class to decorate the container.

To know more about B0xDecoration I have linked a blog below.

Margin Property:

A margin is a property specifying to add space to surround the container.

We do it with EdgeInsets.

EdgeInsets.all

EdgeInsets.all(double value)

Example :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),margin: EdgeInsets.all(50),
)

EdgeInsets.symmetric

EdgeInsets.symmetric({ double vertical = 0.0,
                           double horizontal = 0.0 })

Example:

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.symmetric(horizontal: 70, vertical: 30),
)

EdgeInsets.fromLTRB :

EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

Example :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.fromLTRB(20, 30, 40, 50),
)

EdgeInsets.only:

EdgeInsets.only({
  this.left = 0.0,
  this.top = 0.0,
  this.right = 0.0,
  this.bottom = 0.0
});

Example :

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  margin: EdgeInsets.only(left: 70, bottom: 50),
)

Padding Property :

When we add padding to a widget, we just add space inside of a widget, unlike margin which adds space outside the widget.

Container(
  alignment: Alignment.center,
  color: Colors.amber,
  child: FlutterLogo(
    size: 200,
  ),
  padding: EdgeInsets.only(left: 70, bottom: 50),
)

Before and after padding

EdgeInsets properties will be the same as of margin.

You must have got an overview of a Container widget.

Now you are good to go.

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Originally published at flutterdevs.com.

Know Your Widgets: Container in Flutter

Color :

Child :

Alignment Property:

Alignment

FractionalOffset

AlignmentDirectional

Constraint Property:

Decoration Property:

Margin Property:

EdgeInsets.all

EdgeInsets.symmetric

EdgeInsets.fromLTRB :

EdgeInsets.only:

Padding Property :

Before and after padding

Written by Ashish Rawat