Skip to main content

What is Container ? Properties and Example of container

Image
By SimplexTech

What is Container 

The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background-color any many more we are discussing all the properties with examples.

Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets like margin, padding, and border.

If we have a widget that needs some background styling like color, shape, or size constraints, we may try to wrap it in a container widget. This widget helps us to compose, decorate, and position our child widgets.

From this diagram, you can understand how these container properties are working. Now let's discuss all the properties in detail with examples.

Properties of Container widget:-

1. color

This property is used to set the background color of the text. It also changes the background color of the entire container. You need to set the color property for that as shown in the below example:

 Container(
        color: Colors.blueGrey,
      ),

2. child

This property is used to store the child widget of the container. Suppose we have taken a Text widget as its child widget and need to show that text which has some styling and show in the center of the container that can be shown in the below example:

 Container( 
    child: Center(
              child: Text(
                "What is Container? ",
                style: TextStyle(
                    color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
              ),
            )
        )

3. height and width: 

This property is used to set the container's height and width according to our requirements. By default, the container always takes the space based on its child widget. See the below code:

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

If we want to set the height and width which covers the whole screen then you need to use double.infinity which is shown in the below code :

 Container(
        height:double.infinity,
        width: double.infinity,
        color: Colors.blueGrey,
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

4. margin:

This property is used to give the space outside of the widget. Suppose we need space from four sides of the widgets then we can use the EdgeInsets.all(25) that set the equal margin in all four directions.

You can see in the diagram how the margin is working it will give the space from outside of the WidgetBorder.

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        margin: EdgeInsets.all(20.0),
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

Also set the margin individualy like EdgeInsets.only(top:25) same for the Bottom, Left and Right Margin as shown in the below example:

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        margin: EdgeInsets.only(left: 15.0,top: 10.0,right: 15.0,bottom: 10.0),
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

5. padding 

This property is used to set the distance between the border of the container including all four directions and its child widget. We can observe this by seeing the space between the container and the child widget. Here, we have used an EdgeInsets.all(35) that set the space between text and all four container directions:

You can see in the diagram how the padding is working it will give the space from inside of the Widget Border.

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        margin: EdgeInsets.all(20.0),
        padding: EdgeInsets.all(20.0),
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

Also set the margin individualy EdgeInsets.only(top:25) same for Bottom, Left and Right Padding as shown in the below example:

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        margin: EdgeInsets.all(20.0),
        padding: EdgeInsets.only(left: 15.0,top: 10.0,right: 15.0,bottom: 10.0),
        child: Center(
          child: Text(
            "What is Container ? ",
            style: TextStyle(
                color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      )

6. alignment

This property is used to set the position of the child within the container. Flutter allows the user to align its element in various ways: center, bottom, bottom center, topLeft, center right, left, right, and many more. In the below example, we are going to align its child into the top right position.

 Container(
        height: 400,
        width: 400,
        color: Colors.blueGrey,
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      ),

7. decoration

This property allows the developer to add decoration to the widget. It decorates or paints the widget behind the child. The BoxDecoration class provides a variety of ways to draw a box.

BoxDecoration provides multiple provide like border, borderRadius, boxShadow, Color, and many more I have given an example that shows the border or container and radius of that border.

 Container(
        height: 400,
        width: 400,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.orange, width: 5),
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            new BoxShadow(
              color: Colors.redAccent,
              offset: Offset(10.0, 10.0),
            ),
          ],
        ),
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )

8. transform

The transform property allows developers to rotate the container. It can rotate the container in any direction. If we want to change the container coordinate in the parent widget.

In the below example, we will rotate the container on the z-axis and skewY. 

 Container(
        height: 400,
        width: 400,
        transform: Matrix4.rotationZ(0.2),
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )

 Container(
        height: 400,
        width: 400,
        transform:Matrix4.skewY(0.3),
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )

9. constraints

This property is used when we want to add additional constraints to the child. It contains various constructors, such as tight, loose, expands, etc. Let's see how to use these constructors in our app:

A. Expand

A loose constraint, Creates box constraints that expand to fill other box constraints. it will set the widget width, and height as per the given constraints and dimensions.

 Container(
        height: 400,
        width: 400,
        constraints: BoxConstraints.expand(height: 50.0),
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )

B. Tight

A tight constraint offers a single possibility, a tight constraint has its maximum width equal to its minimum width and has its maximum height equal to its minimum height.

 Container(
        height: 400,
        width: 400,
        constraints:BoxConstraints.tight(Size size)
           : minWidth = size.width,
             maxWidth = size.width,
             minHeight = size.height,
             maxHeight = size.height;
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )

C. Loose

A loose constraint, sets the maximum width and height, but lets the widget be as small as it wants. In other words, a loose constraint has a minimum width and height both equal to zero:

 Container(
        height: 400,
        width: 400,
        constraints: BoxConstraints.loose(Size size)
           : minWidth = 0.0,
             maxWidth = size.width,
             minHeight = 0.0,
             maxHeight = size.height;
        alignment: Alignment.topRight,
        child: Text(
          "What is Container ? ",
          style: TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        ),
      )
Labels:

Comments

Post a Comment

Popular posts from this blog

Flutter BottomNavigationBar

By SimplexTech
BottomNavigationBar A material widget that's displayed at the bottom of an application. Which shows around three to five items and it includes labels and icons. BottomNavigationBar allows you to select one item at a time and quickly navigate to a given page. Properties of the BottomNavigationBar : items: It defines the list of BottomNavigationBar Items to display the bottom navigation bar. currentIndex: It determines the current active bottom navigation bar item on the screen. onTap: It is called when we tapped one of the items on the screen. iconSize: It is used to specify the size of all bottom navigation item icons. fixedColor: It is used to set the color of the selected item. If we have not set a color to the icon or title, it will be shown. type: It determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are:  1. fixed: Default it is fixed and If it is null, it will use fixed. 2. shifting: It will use shifting where w...
Post a Comment
Read more

Flutter TextField with Examples

By SimplexTech
Introduction to TextField TextField in Flutter is the most commonly used text input widget that allows users to collect inputs from the keyboard into an app. We can use the TextField widget in building forms, sending messages, creating search experiences, and many more. By default, Flutter decorated the TextField with an underline. We can also add several attributes with TextField, such as label, icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to remove the decoration properties entirely, it is required to set the decoration to null. 1. decoration It is used to show the decoration around TextField.The most common attributes in decoration are as follows: border : It is used to create a default rounded rectangle border around TextField. labelText : It shows the label text on the selection of TextField. hintText : It shows the hint text inside TextField when there is no text entered.   TextField(             ...
Post a Comment
Read more

MaterialApp and Scaffold in Flutter with Example

By SimplexTech
What is MaterialApp Material design is for Google Android material design which is used to create UI for Android.MaterialApp is a predefined class in a flutter that extends the Material Design class. It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. It is a class that creates an instance of [WidgetsApp] . Text widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, and many more widgets that are accessed using MaterialApp class.  For iOS, there is the Cupertino widgets class which I'll describe or discuss or explain in another article. What is Scaffold In Flutter Scaffold is a very useful and highly flexible class. Scaffold implements the basic material design layout structure. A Scaffold Widget provides a framework that implements the flutter app's basic material design visual layout structure.  The developer can implement a wide...
4 comments
Read more