Flutter Container is the most used widget. It is similar to div layout if you are familiar with web development. Just like div act as a box in web development, container act as a box in a flutter. It has many properties like margin, border, padding, content in the box that allows you to design it to look beautiful. In this entire tutorial, you will learn the implementation of the flutter container.
Syntax of Flutter Container
Below is the syntax of the container.
Container({Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Clip clipBehavior: Clip.none});Explanation of the arguments
alignment: It is used to align the child of the container.
padding: Empty space around the child.
color: Color of the container.
decoration: Its use is to decorate the container, like a shadow, border e..t.c. It is used to paint behind the child.
foregroundDecoration : It is used to paint the front part of the child.
width: Width of the container
height: Height of the container.
constraints: Use it if you want to add an additional condition to the child.
margin: Empty space around the container.
transform: The transformation matrix to apply before painting the container.
child: It is the child of the container.
clipBehavior: The clip behaviour when Container. decoration is not null
These were the arguments you can use inside the container class. The most used arguments are padding, margin, decoration, child, width, height, decoration and color.
In the next section, you will know the various examples of flutter container. And we will use most of the arguments of it.
Examples of Flutter Container
In this section, you will know the various examples of the container. Let’s look at each of them.
Example 1: Create a Simple Container
To create a simple container you have to use the widget Container(). Inside the container, you can add single or multiple child widgets like text, icon, row, columns e.t.c. Below is the code for a simple Container Creation.
Please note that Here I am creating Stateful Widget for the app. But You can also use Stateless Widget.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(ContainerApp());
}
class ContainerApp extends StatefulWidget {
@override
_ContainerAppState createState() => _ContainerAppState();
}
class _ContainerAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text("Container App"),
),
body: Center(
child: Container(
child: Text("Welcome to Code the Best"),
),
),
)
);
}
}Output
Example 2: Add Background Color to the Container
In the above example, you are seeing only text. Let’s add background color and increase the width and height of the Container. You can add a background color using color argument and to increase the size of the container you have to use the width and height argument. The width is automatically adjusted according to the screen.
Below is the code to add color to the container.
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
height: 100,
color: Colors.redAccent,
child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white ))),
),Output
Example 3: Add Border to the Container
You can add a border to the container using the decoration argument. Inside the decoration, you have to use BoxDecoration() and define the border color and width for the container. But make sure that include color of the container inside the decoration instead of outside, otherwise it leads to error.
Use the below lines of code to add the border to the container.
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
height: 100,
child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white ))),
decoration: BoxDecoration(
color: Colors.redAccent,
border: Border.all(color:Colors.pink,width: 10),
),
),Output
Example 4: Add Circular Border to the Container
To add a circular border to the container you have to use borderRadius argument with BorderRadius.circular(your_radius). Below is the code to add a circular border to it.
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
height: 100,
child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white ))),
decoration: BoxDecoration(
color: Colors.redAccent,
border: Border.all(color:Colors.pink,width: 10),
borderRadius: BorderRadius.circular(10)
),
),You can see I have added a circular radius of 10 around the corner.
Output
Example 5: Add box shadow to container in flutter
You can also add a shadow around the container. To do so you have to use the boxShadow argument. Use the following lines of code inside the decoration to add a box shadow to the container.
Container(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
height: 100,
child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white ))),
decoration: BoxDecoration(
color: Colors.redAccent,
border: Border.all(color:Colors.pink,width: 10),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(5,5)
)
]
),
),The color and position of the shadow are defined inside the BoxShadow() using color and offset argument. You can also add other things like opacity, blur radius, spread radius. But for more understanding make it simple.
Output
Conclusion
The Flutter container allows you to design a custom widget for your UI. You can use a container to build a custom style card. These are the examples I have compiled for implementing Container in Flutter. I hope you have liked this tutorial. If you have any query then you can contact us for help.
