Container class in Flutter - GeeksforGeeks

01 Jul, 2021
Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position it on the screen according to our convenience. Basically a container is like a box to store contents. A basic container element that stores a widget has a margin, which separates the present container with other contents. The total container can be given a border of different shapes, for example, rounded rectangles, etc. A container surrounds its child with padding and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null).
Check out this post to understand the scaffold widget which we will be using in our examples.
The constructor of Container Class:
Syntax: 
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});
Properties of Container Class:
1. child:  Container widget has a property ‘child:’ which stores its children. The child class can be any widget. Let us take an example, taking a text widget as a child. 
Dart
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("Container example"),                           ),                     body                   : Container(child                               : Text("Hello! i am inside a container!",                                      style                                      : TextStyle(fontSize : 20)),                              ), ), );  }}
  
2. color:  The color property sets the background color of the entire container. Now we can visualize the position of the container using a background color. 
 
Dart
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("Container example"),                           ),                     body                   : Container(color                               : Colors.purple,                               child                               : Text("Hello! i am inside a container!",                                      style                                      : TextStyle(fontSize : 20)),                              ),                  ),    );  }}
  
3. height and width: By default, a container class takes the space that is required by the child. We can also specify height and width to the container based on our requirements.
 
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          color: Colors.purple,           child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
4. margin: The margin is used to create an empty space around the container. Observe the white space around the container. Here EdgeInsets.geometry is used to set the margin .all() indicates that margin is present in all four directions equally.
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          color: Colors.purple,          margin: EdgeInsets.all(20),          child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
5. padding: The padding is used to give space form the border of the container form its children. Observe the space between the border and the text.
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          color: Colors.purple,          margin: EdgeInsets.all(20),          padding: EdgeInsets.all(30),          child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
6. alignment: The alignment is used to position the child within the container. We can align in different ways: bottom, bottom center, left, right, etc. here the child is aligned to the bottom center.
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          color: Colors.purple,          alignment: Alignment.bottomCenter,          margin: EdgeInsets.all(20),          padding: EdgeInsets.all(30),          child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
7. decoration: The decoration property is used to decorate the box(e.g. give a border). This paints behind the child. Whereas foregroundDecoration paints in front of a child. Let us give a border to the container. But, both color and border color cannot be given.
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          //color: Colors.purple,          alignment: Alignment.center,          margin: EdgeInsets.all(20),          padding: EdgeInsets.all(30),          decoration: BoxDecoration(            border: Border.all(color: Colors.black, width: 3),          ),          child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
8. transform: This property of container helps us to rotate the container. We can rotate the container in any axis, here we are rotating in the z-axis.
Dart
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("Container example"),        ),        body: Container(          height: 200,          width: double.infinity,          color: Colors.purple,          alignment: Alignment.center,          margin: EdgeInsets.all(20),          padding: EdgeInsets.all(30),          transform: Matrix4.rotationZ(0.1),          child: Text("Hello! i am inside a container!",              style: TextStyle(fontSize: 20)),        ),      ),    );  }}
9. constraints: When we want to give additional constraints to the child, we can use this property. 
10. clipBehaviour : This property takes in Clip enum as the object. This decides whether the content inside the container will be clipped or not.
11. foregroundDecoration: This parameter holds Decoration class as the object. It controls the decoration in front of the Container widget.
Note: There can be many more operations that can be performed to container class. Moreover, the container class is used often while developing flutter applications. This is just basics to get started with. Find more properties and attributes in the given link which is the official flutter documentation.
ankit_kumar_
Flutter
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
ListView Class in Flutter
Getter and Setter Methods in Dart
Flutter - Flexible Widget
How to Append or Concatenate Strings in Dart?