Flutter container: The simple guide to use it in Flutter

AHT Tech

Flutter is a popular cross – platform framework that helps you build applications with just a single code. In this blog, we will deliver you detailed information about Flutter Container – a useful widget in Flutter framework.

What is Flutter Container?

Firstly, we must know what Flutter Container is. Simply speaking, it a parent widget that contains a lot of child widgets. Container in Flutter can manage child widget effectively with width, height, padding and so on. What’s more, this widget combines common painting, positioning and sizing of the child widgets. Also, if you want, you can store one or more widgets in Flutter Container. Then, position it on the screen as you like. As that said, container Flutter can work as a box for storing contents. Thanks to that, users will be able to decorate its child widgets. For example, they can use margin to separate the container with other contents

Just like < div > tag in html, if the flutter container widget doesn’t contain any child widget, it will fill the whole screen area. On the other hand, if there are child widgets, the container widget will wrap them based on the specified height and width. Moreover, one thing to keep in mind is that this widget can’t render directly without any parent widget.

>>> Related post:

Construction of the container class

Here is the syntax of the construction of the container class

Property

To learn about Flutter Container, you need to fully understand its property first. Now, we will deliver you detailed information about its property.

Child – Flutter container

Coming to the first property – child. This property allows you to store the child widget of the container. In this example, we’ll take a Text widget as the widget. Then, the syntax will be as follow

Color

The second property in Flutter Container is Color. It lets you set the background color of the text, or the entire container. Then, suppose we want to change the color of the text to green, we syntax will be

Height and width

You can change the height and width of the container with this property. In case you don’t make any change, the container will take the space based on its child widget. In the example below, we set the width to 200 and height to 100

Container(
width: 200.0,
height: 100.0,
color: Colors.green,
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

Margin – flutter container

With Margin, you can surround the empty space around the container. For example, you want to set equal margins in four directions, then, you can use the syntax EdgeInsets.all(20) like the following example

Container(
width: 200.0,
height: 100.0,
color: Colors.green,
margin: EdgeInsets.all(20),
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

Padding

This property of Flutter Container allows you to set the distance between the border of the container and its child widget. In the example below, we are using an EdgeInsets.all(35), After this, we can set the space between text and all four corner directions

Container(
width: 200.0,
height: 100.0,
color: Colors.green,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

Alignment

Alignment helps you set the position of the child widget in the Flutter container. As you might know, you are able to align Flutter elements in various ways. For example, you can align them as center, bottom center, topLeft and so on. In this example, we will align it in the bottom right position

Container(
width: 200.0,
height: 100.0,
color: Colors.green,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
alignment: Alignment.bottomRight,
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

Decoration

This Flutter Container property allows you to add decoration to the widget. Specifically, it will decorate or paint the widget behind the child. In case you want to decorate the widget in front of the child, you’ll need to use forgroundDecoration parameter.

When it comes to decoration property, you’ll have many options of parameters. For instance, colors, gradients, background image and so on. Thanks to that, you have many freedom to decorate your widget. However, keep in mind that you can either use the color property or decoration property in the Flutter Container, not both. To further understand this property, consider the example below. In this one, we add a border and shadow property to decorate the box

import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(“Flutter Container Example”),
),
body: Container(
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 4),
borderRadius: BorderRadius.circular(8),
boxShadow: [
new BoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),),
],
),
child: Text(“Hello! I am in the container widget decoration box!!”,
style: TextStyle(fontSize: 30)),
),
),
);
}
}

Outcome

Transform – Container Flutter

You can use this property to rotate the container in any direction. Moreover, you can change the container coordinate in the parent widget as well. Now, suppose you want to rotate the container in the z-axis, the syntax will be as follow

Container(
width: 200.0,
height: 100.0,
color: Colors.green,
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
alignment: Alignment.bottomRight,
transform: Matrix4.rotationZ(0.1),
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

constraints

Finally, if you want to add additional constraints to the child widget, you can use constraints property. This property of a Flutter container includes various constructors, like tight, loose, etc. Let’s dive deeper into this property

Tight

If you use size property in size, it will set fixed value to the child

Container(
color: Colors.green,
constraints: BoxConstraints.tight(Size size)
: minWidth = size.width, maxWidth = size.width,
minHeight = size.height, maxHeight = size.height;
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

expand

This one allows you to choose the height, width, or both to the child

Container(
color: Colors.green,
constraints: BoxConstraints.expand(height: 60.0),
child: Text(“Hello! I am in the container widget”, style: TextStyle(fontSize: 25)),
)

To understand further about this property of the Flutter container, consider the following example. In this example, we will try to cover most of the container properties. To do this, open the main.dart file and replace it with the following code

import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyContainerWidget(),
);
}
}
class MyContainerWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(“Flutter Container Example”),
),
body: Container(
width: double.infinity,
height: 150.0,
color: Colors.green,
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(35),
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.1),
child: Text(“Hello! I am in the container widget!!”,
style: TextStyle(fontSize: 25)),
),
),
);
}
}

Output

In conclusion

We hope to deliver you sufficient understanding about Flutter Container. If you want to understand further about Flutter, or make a stunning app with it, don’t hesitate to contact AHT Tech . Being one of leading Flutter app development company, AHT Tech has gained expertise over this emerging technology recently introduced by Google. Contact us here