Container In Flutter

Container In Flutter

Container is a box like widget that can be shaped, colored, and sized according to your needs. In this section, you will learn how to use container widget, style it, add border, padding, margin, and background color.

Key Features of a Container

• Size: You can specify its height and width.
• Color and Decoration: You can paint it with a color or add more complex decorations like borders, rounded corners, or shadows.
• Alignment: It lets you align its child (what you put inside the container) to center, left, right, etc.
• Padding and Margin: Think of padding as the space inside the box between its edges and the content. Margin is the space outside the box, between the box and other elements.

Example 1: Display Container In Flutter

In this example, you will learn how to display container in flutter. In the child there is Text widget.

Container(
  child: Text('Raj Sharma'),
)

Example 2: Style Container In Flutter

In this example, you will learn to style container by adding padding and color to it.

Container(
  child: Text('Raj Sharma'),
  color: Colors.blue,
  padding: EdgeInsets.all(20),
)

Example 3: Add Border To Container

In this example, you will learn how to add border to container. You will learn to add border using Container widget.

Container(
  child: Text('Raj Sharma'),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
  ),
)

Example 4: Add Margin & Padding To Container

In this example, you will learn how to add margin and padding to container.

Container(
  child: Text('Raj Sharma'),
  color: Colors.blue,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(20),
)

Example 5: Add Background Color To Container In Flutter

In this example, you will learn how to add background color to container.

Container(
  child: Text('Raj Sharma'),
  color: Colors.blue,
  padding: EdgeInsets.all(20),
)

Example 6: Add Shadow To Container In Flutter

In this example, you will learn to add shadow to container.

Container(
  child: Text('Raj Sharma'),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 10,
        offset: Offset(4, 4),
      ),
    ],
  ),
)

Example 7: Add Rounded Corners To Container

In this example, you will learn how to add rounded corners to container in flutter.

Container(
  child: Text('Raj Sharma'),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
  color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
)

Example 8: Add Gradient To Container

In this example, you will learn to add gradient to container.

Container(
  child: Text('Raj Sharma'),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Colors.blue,
        Colors.green,
      ],
    ),
  ),
)

Example 9: Add Image To Container In Flutter

In this example, you will learn to add image from internet using container in flutter.

Container(
  child: Image.network(
    'https://avatars.githubusercontent.com/u/33576285?v=4',
  ),
)

Example 10: Create Square Blue Box

In this example, you will learn to create a square blue box with the text “Hello World” in the center.

Container(
  height: 100.0, // Height of the container
  width: 100.0, // Width of the container
  color: Colors.blue, // Background color
  alignment: Alignment.center, // Align the child to the center
  child: Text('Hello World'), // Child widget
  padding: EdgeInsets.all(10.0), // Padding inside the container
  margin: EdgeInsets.all(20.0), // Margin outside the container
)