Widgets: Container

 

The Container widget is used to contain child widgets whilst also providing the ability to apply some basic styling properties on itself to be applied when laid out on screen.

If the container has no children then it will automatically fill the given area on the screen (dependant on constraints), otherwise it will wrap the height & width of the given child elements.

For example, given the screenshot above, we could use a container to build this given layout like so:

new Container(
  color: Colors.amber.shade400,
  alignment: FractionalOffset.center,
  child: new Text('Just an example!'),
)

This will allow us to contain the given child (in this case, a Text widget) and apply the given color / alignment properties. There are also other properties which can be applied to the Container widget:

  • alignment — Provide a FractionalOffset to be applied for aligning the child widgets. This could include bottomCenter, bottomLeft, bottomRight, center, centerLeft, centerRight, topCenter, topLeft and topRight
alignment: FractionalOffset.center
  • child — Provide a child widget to be contained by the container, the container will wrap the width & height of this child
child: new Text('This is an example')
  • constraints — Constraints to be applied to the container widget
constraints: new BoxConstraints.expand(
  width: 200.0,
)
  • decoration — Apply a decoration to applied behind the given child
decoration: new BoxDecoration(
  color: Colors.blue.shade100
)
  • foregroundDecoration — Apply a decoration to applied in front of the given child
foregroundDecoration: new BoxDecoration(
  color: Colors.amber.shade400
)
  • margin — Apply a margin to the container using an EdgeInsets constant value
margin: const EdgeInsets.all(16.0)
  • padding — Apply padding to the container using an EdgeInsets constant value
padding: const EdgeInsets.all(16.0)
  • color — A background color which is to be applied to the container
color: Colors.amber.shade400
  • transform — Perform a transformation on the container when it is laid out
transform: new Matrix4.rotationY(0.4)

Enjoy the other snippets in this publication! Leave a comment below or tweet me if with any questions / suggestions!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s