How to create attractive container in flutter

What is Container?

Container in Flutter is a box-type widget which is used to wrap any UI element. This widget provides many types of styling, positioning and layout options. You can use properties like padding, margin, alignment, decoration, height, width etc. in it.

The main function of a container is to give style or position to a child widget. It can also be empty and used only for background color or decoration.

Properties of Container
  • You can provide padding and margin.
  • You can add background color, decoration, size, alignment, control.
  • Places another widget inside the child container.
  • padding sets the inner spacing.
  • The margin sets the outer spacing.

When to use a container?

  • When you want to give a widget a background color.
  • When a widget needs to be given padding or margin.
  • When you want to size an element.
  • When adding decoration (such as border or gradient).
Container(
              margin: EdgeInsets.symmetric(horizontal: 20),
              padding: EdgeInsets.all(25),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
                boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 5)],
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _buildCreateOption(Icons.movie, "Video"),
                  _buildCreateOption(Icons.image, "Photo"),
                  _buildCreateOption(Icons.grid_on, "Collage"),
                ],
              ),
            ),
            
          
Code Explanation
  • This is giving 20 pixels space (margin) on the left and right side of the box.
  • There is a space of 25 pixels around the content inside the box.
  • Inside the box is a row that arranges the elements in a horizontal line.
  • mainAxisAlignment: MainAxisAlignment.spaceAround: There is equal spacing between items in the row.

Output 
How to create attractive container in flutter

Post a Comment

0 Comments