Flutter Container
The container widget is used to wrap a child widget and manage it view using width, height, padding, background color, etc. This provides many properties available to the user for decorating the child, such as using margin, which separates the container with other contents.
A container widget is similar to a <div> tag in html. If it does not contain a child widget, it will take the whole screen automatically. Otherwise, it will wrap over the child widget.
A container have a margin, border, and padding surrounding the child, as shown below:
Constructors of the container class
Syntax of container class constructor is show below:
Container({Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
double width,
double height,
Decoration decoration,
Decoration foregroundDecoration,
BoxConstraints constraints,
Widget child,
Clip clipBehavior: Clip.none
});
Properties of Container widget
Let us learn about some essential properties of the widget in detail.
1. child: Child property is used to store the child widget. Suppose we add a Text widget as its child widget to the container.
2. color: This is used to set the background color of the container.
3. height and width: Using this we set the container’s height and width according to our needs. By default, the container always wraps around the child widget.
4. margin: This is used to surround the space between the container and the other widgets.
5. padding: This is used to add padding space between its border and its child widget.
6. alignment: It is used to set the position of the child in the container. We can align the elements in various ways such as center, bottom, bottom center, topLeft, centerRight, and many more.
7. decoration: It allows the developer to add decoration on the widget using the BoxDecoration widget.
The BoxDecoration widget supported many parameters such as color, gradient, background image, border, shadow, etc. We can either use the color property in a container or decoration, but not in both. Checkout the below code where we added a border and shadow property to decorate the box:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
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! container widget decoration box!!",
style: TextStyle(fontSize: 30)),
),
),
);
}
}
Output:
8. transform: This property allows developers to rotate the container. It can rotate the container in any direction Using a Matrix4 property, i.e., change the container coordinates in the parent widget. Below example, we rotate the container in the z-axis by 0.1.
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! Container widget", style: TextStyle(fontSize: 25)),
)
Let us understand a container with all its properties with the example given below. Open the main.dart and replace the file with below code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
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!container widget!!",
style: TextStyle(fontSize: 25)),
),
),
);
}
}
Output
