Flutter — Container Cheat Sheet
A convenience widget that combines common painting, positioning, and sizing widgets.
The Container widget is used to contain a child widget with the ability to apply some styling properties.
If the Container widget has no child it will automatically fill the given area on the screen, otherwise it will wrap the height & width of the given child element.
NB: Container Widget should not render directly without any parent widget. You can use Center widget, Padding Widget, Column Widget, Row Widget or Scaffold Widget as parent.
Lets start with en empty container and apply a red color property. The container will fill all the screen.
Center(
child: Container(
color: Colors.green,
),
);
Let’s add a child for the container
Center(
child: Container(
color: Colors.green,
child: Text("Flutter CheatSheet."),
),
);
We can see that the container take the size of the child. (We will talk later on the Text Widget)
Color Property
You can use the color property to apply a background color for the container.
You will use the Color Class or Colors Class with the color property like below:
Colors Class
use Colors Class with the color name
Center(
child: Container(
color: Colors.green,
),
);You can add a shade also
Center(
child: Container(
color: Colors.green[400],
),
);OR
Center(
child: Container(
color: Colors.green.shade400,
),
);Color Class
use Color Class with a full 8 hexadecimal digits not 6. If you only specify six, then the leading two digits are assumed to be zero, which means fully-transparent.
Color(0xFFFFFF); // fully transparent white (invisible)
Color(0xFFFFFFFF); // fully opaque white (visible)You can use the .fromARGB (A = Alpha or opacity, R = Red, G = Green, B = Blue) with the color number or hexadecimal number
Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color.fromARGB(255, 66, 165, 245);And you can use the .fromRGBO (R = Red, G = Green, B = Blue, O = Opacity) with the color number
Color c = const Color.fromRGBO(66, 165, 245, 1.0);Child Property
Provide a child widget to be contained by the container, the container will wrap the width & height of this child.
This widget can only have one child. To lay out multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
child: new Text("Flutter Cheatsheet"),
),
);Alignment Property
We use an Alignment Class with the alignment property to be applied for aligning the child widgets.
Alignment take 2 parameters x and y.
Alignment(0.0, 0.0) represents the center of the rectangle.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
child: new Text("Flutter Cheatsheet",
style: TextStyle(
fontSize: 10.0
),
),
alignment: Alignment(0.0, 0.0),
),
);
Alignment(-1.0, -1.0) represents the top left of the rectangle.
Alignment(1.0, 1.0) represents the bottom right of the rectangle.
Alignment(0.0, 3.0) represents a point that is horizontally centered with respect to the rectangle and vertically below the bottom of the rectangle by the height of the rectangle.
The below picture show the graph of X and Y
You can also use a constant name with the Alignment Class
Alignment.bottomCenter The center point along the bottom edge same as Alignment(0.0, 1.0)
Alignment.bottomLeft The bottom left corner same as Alignment(-1.0, 1.0)
Alignment.bottomRight The bottom right corner same as Alignment(1.0, 1.0)
Alignment.center The center point, both horizontally and vertically same as Alignment(0.0, 0.0)
Alignment.centerLeft The center point along the left edge same as Alignment(-1.0, 0.0)
Alignment.centerRight The center point along the right edge same as Alignment(1.0, 0.0)
Alignment.topCenter The center point along the top edge same as Alignment(0.0, -1.0)
Alignment.topLeft The top left corner same as Alignment(-1.0, -1.0)
Alignment.topRight The top right corner same as Alignment(1.0, -1.0)
Alse you can use FractionalOffset Class with the alignment property.
FractionalOffset and Alignment are two different representations of the same information: the location within a rectangle relative to the size of the rectangle. The difference between the two classes is in the coordinate system they use to represent the location.
FractionalOffset uses a coordinate system with an origin in the top-left corner of the rectangle whereas Alignment uses a coordinate system with an origin in the center of the rectangle.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
child: new Text("Flutter Cheatsheet",
style: TextStyle(
fontSize: 20.0
),
),
alignment: FractionalOffset(0.5, 0.5),
),
);
You can also use a constant name with the FractionalOffset Class
FractionalOffset.bottomCenter The center point along the bottom edge same as FractionalOffset(0.5, 1.0)
FractionalOffset.bottomLeft The bottom left corner same as FractionalOffset(0.0, 1.0)
FractionalOffset.bottomRight The bottom right corner same as FractionalOffset(1.0, 1.0)
FractionalOffset.center The center point, both horizontally and vertically same as FractionalOffset(0.5, 0.5)
FractionalOffset.centerLeft The center point along the left edge same as FractionalOffset(0.0, 0.5)
FractionalOffset.centerRight The center point along the right edge same as FractionalOffset(1.0, 0.5)
FractionalOffset.topCenter The center point along the top edge same as FractionalOffset(0.5, 0.0)
FractionalOffset.topLeft The top left corner same as FractionalOffset(0.0, 0.0)
FractionalOffset.topRight The top right corner same as FractionalOffset(1.0, 0.0)
Alse you can use AlignmentDirectional Class with the alignment property.
An offset that’s expressed as a fraction of a Size, but whose horizontal component is dependent on the writing direction.
This can be used to indicate an offset from the left in TextDirection.ltr text and an offset from the right in TextDirection.rtl text without having to be aware of the current text direction.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
child: new Text("Flutter Cheatsheet",
style: TextStyle(
fontSize: 20.0
),
),
alignment: AlignmentDirectional(0.0, 0.0),
),
);You can also use a constant name with the AlignmentDirectional Class
AlignmentDirectional.bottomCenter The center point along the bottom edge same as AlignmentDirectional(0.0, 1.0)
AlignmentDirectional.bottomEnd The bottom corner on the “end” side same as AlignmentDirectional(1.0, 1.0)
AlignmentDirectional.bottomStart The bottom corner on the “start” side same as AlignmentDirectional(-1.0, 1.0)
AlignmentDirectional.center The center point, both horizontally and vertically same as AlignmentDirectional(0.0, 0.0)
AlignmentDirectional.centerEnd The center point along the “end” edge same as AlignmentDirectional(1.0, 0.0)
AlignmentDirectional.centerStart The center point along the “start” edge same as AlignmentDirectional(-1.0, 0.0)
AlignmentDirectional.topCenter The center point along the top edge same as AlignmentDirectional(0.0, -1.0)
AlignmentDirectional.topEnd The top corner on the “end” side same as AlignmentDirectional(1.0, -1.0)
AlignmentDirectional.topEnd The top corner on the “start” side same as AlignmentDirectional(-1.0, -1.0)
Constraints Property
A constraint is just a property specifying the size or space a widget can take up. Most of the widgets and UI can be build by using simple BoxConstraint.
A BoxConstraint only cares about minWidth, maxWidth, minHeight and maxHeight.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
As we know before, if the container widget has no child it will automatically fill the given area on the screen, and because we have a max-width and max-height so the container will fill only the area size of the max-width and max-height.
Let’s add a Text widget to the container.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
child: Text("Flutter"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
Because there is a child in the container, it will wrap the height & width of the given child element, and because we have a min-width and min-height, so it will take the size given in the BoxConstraints.
Lets try with a long text.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
child: Text("Flutter Cheatsheet Flutter Cheatsheet"),
constraints: BoxConstraints(
maxHeight: 300.0,
maxWidth: 200.0,
minWidth: 150.0,
minHeight: 150.0
),
),
),
);
We can see in the screenshot that the container is not able to expend more than the max-width and the max-height.
If we need to expand our container to the maximum size even if it has a child we can use the BoxConstraints.expand()
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
child: Text("Flutter"),
constraints: BoxConstraints.expand(),
),
),
);
We can see that the the container has not wrapped the height & width of the given child element, it has expended to the maximum.
also you can send a width and height as parameter.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
child: Text("Flutter"),
constraints: BoxConstraints.expand(
width: 350.0,
height: 400.0
),
),
),
);
Margin Property
A margin is just a property specifying to add empty space to surround of the container using an EdgeInsets constant value.
EdgeInsets.all()
if you need to add margin on all sides
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
margin: new EdgeInsets.all(20.0),
),
),
);
EdgeInsets.symmetric()
If you need to add margin with symmetrical vertical and/or horizontal offsets
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
margin: new EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 50.0
),
),
),
);
EdgeInsets.fromLTRB()
If you need to add margin from offsets from the left, top, right, and bottom.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
margin: new EdgeInsets.fromLTRB(20.0, 30.0, 40.0, 50.0),
),
),
);
EdgeInsets.only()
If you need to add margin with only the given values non-zero.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
color: Colors.green,
margin: new EdgeInsets.only(
left: 20.0,
bottom: 40.0,
top: 50.0
),
),
),
);
Padding Property
A padding is just a property specifying to add empty space to inscribe inside the container using an EdgeInsets constant value same as the margin.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
margin: new EdgeInsets.only(
left: 20.0,
bottom: 40.0,
top: 50.0
),
padding: new EdgeInsets.all(40.0),
color: Colors.green,
child: Text("Flutter Cheatsheet"),
constraints: BoxConstraints.expand(),
),
),
);
Decoration Property
A decoration property can be applied behind the given container.
The value can be
- BoxDecoration Class
- FlutterLogoDecoration Class
- ShapeDecoration Class
- UnderlineTabIndicator Class
We will talk about the above class later in a different article
ForegroundDecoration Property
A decoration property can be applied in front of the given container.
The value can be
- BoxDecoration Class
- FlutterLogoDecoration Class
- ShapeDecoration Class
- UnderlineTabIndicator Class
We will talk about the above class later in a different article
Transform Property
Perform a transformation on the container when it is laid out. We use Matrix Class as value.
Center(
child: Container(
color: Color.fromARGB(255, 66, 165, 245),
alignment: AlignmentDirectional(0.0, 0.0),
child: Container(
padding: new EdgeInsets.all(40.0),
color: Colors.green,
child: Text("Flutter Cheatsheet"),
transform: new Matrix4.rotationZ(0.5)
),
),
);
We will talk about the Matrix class later in a different article
Hope you enjoy the article! Leave a comment below or tweet me if with any questions / suggestions!
