ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


This exercise will focus on using a Container widget to modify the presentation of a `child` widget. Using a Container widget we will be able to add:

* Padding
* Margins
* Backgrounds
* Transformations
* and more

Container Widgets

We have a widget but we want to modify how it's presented. Maybe we want it wider, or to have more padding, or moved to the left. How do we do this in Flutter?

The **Container widget** is a powerful tool to manipulate the presentation of our content. Creating a Container box around a `child` widget allows us to modify parameters such as colors, borders, and padding to change the way the widget is displayed.

We use a Container widget by placing it around a child widget, such as in the following example:

```dart
Container(child: Text("I'm in a container"))
```

Adding just an empty Container widget around a `child` won't do anything, we need to add parameters.

When we create the Container, we use constructor parameters like the following to specify how we want to modify the child widget's presentation. We might use only one parameter, or we could use several at a time:

Constructor parameter | Purpose
--- | ---
`alignment` | Optional parameter to change the alignment of the child widget within the container.
`child` | Mandatory parameter. Specifies the widget to be contained inside this container.
`decoration` | Optional parameter to decorate the container using a border, background color, shading etc.
`margins` | Optional parameter to specify the space around the outside of the container.
`padding` | Optional parameter to specify the space inside the container around the child widget.
`transform` | Optional parameter to perform a visual transformation, for example, turn it 90 degrees.
`width, height` | Optional parameters to specify the widget and height of the container.

Let's try practicing with the Container widget.
  


Introduction to Container Widgets

The first parameter of the Container widget that we will discuss is `decoration`.

Decorations can be thought of as ‘painting instructions’: data passed to the graphics library to tell it how to paint a widget a certain way.

Decorations can be used to add visual decorations to Widgets, such as: 

* Borders (including border colors & shapes such as rounded borders)
* Colors (including gradients of multiple colors)
* Images
* Shadows

We pass decorations into the Container via the [BoxDecoration class](https://api.flutter.dev/flutter/painting/BoxDecoration-class.html). This class has parameters such as `border`, `color`, and `borderRadius`. Let's look at an example:

```dart
import 'package:flutter/material.dart';

void main() {
  var myDecoration = BoxDecoration(
      color: Colors.green,
      border: Border.all(color: Colors.blueAccent, width: 10),
      borderRadius: BorderRadius.circular(12));

  runApp(MaterialApp(
      home: Scaffold(
          body: Container(
                  decoration: myDecoration,
                  child: const Icon(Icons.image, size: 50)))));
}
``` 

This example provides a circular [BorderRadius](https://api.flutter.dev/flutter/painting/BorderRadius-class.html) (giving the edges of the border curves), a 10 pixel blue [Border](https://api.flutter.dev/flutter/painting/Border-class.html), and a green background [Color](https://api.flutter.dev/flutter/dart-ui/Color-class.html).

Let's try adding some `decorations`.


Decorate the Container

We often will want space separating our element from others. We are able to do this using a Container.

The `margin` is the empty space *around* the outside of a widget. An **[EdgeInset](https://api.flutter.dev/flutter/painting/EdgeInsets-class.html) object** is used to specify the amount of space. 

We can create our EdgeInset using its `all` constructor. This `all` is used to create a dimension where the left, right, top, and bottom are the same. There are other options such as `.symmetric(vertical: 10)` for top and bottom symmetrical margins or `.only(left: 40)` for just a left margin.

Once we have created our EdgeInset, we pass it to the `margin` parameter of the Container object. Here we will create a margin on every side of 50 pixels. Add this beneath the existing `decoration` parameter:

```dart
Container(
  margin: const EdgeInsets.all(50)
)
```

Keep in mind we can combine the `margin` with what we've already learned.

Let's try adding margins.

Adding Margins

While a `margin` adds empty space *outside* a widget, what do we use when we want our widget to have more space *inside* of it?

This is the role of **padding**. Padding adds space within a container. The syntax for `padding` is very similar to adding `margin` to a container. Again we declare an EdgeInset object and apply it to our container.

```dart
Container(
  child: Text('Hello There')
  padding: const EdgeInsets.all(50)
)
```

This will expand the space within our container without moving the container away from other widgets. The space between the inner content of the container and the container's outside edge will grow. Let's see this in an application:

Adding Padding

Containers can also be used to provide interesting visual effects on a widget. Let's showcase adding **[transforms](https://api.flutter.dev/flutter/widgets/Transform-class.html)**. 

A `transform` can be applied to mathematically change the appearance of a widget within a Container. We can tilt (or `skew`) with syntax like:

```dart
Container(child: const Text('Hello World'), 
  transform: Matrix4.skewX(0.3))
```

We can rotate with:

```dart
Container(child: const Text('Hello World'), 
  transform: Matrix4.rotationZ(3.14))
```

And do all sorts of operations defined in the [Matrix4 class](https://api.flutter.dev/flutter/vector_math_64/Matrix4-class.html) as well as additional methods in the Flutter library.

Note that the parameters of these functions tend to be in [radians](https://en.wikipedia.org/wiki/Radian). Without understanding the math, certain parameters will cause unexpected behavior.

Let's try applying some transformations.


Adding Transforms

Let's review what we learned about Container widgets:

* Container widgets paint a container box around a child widget. They have properties for specifying how the container box looks: what borders it has, what color it is, and what spacing.
* They are useful when using borders, colors, and spacing to lay out our app.
* They can work with decorator objects, which can be used to tell the graphics library how to paint Widgets. For example, a Container Widget can accept a `decorator` parameter to tell it how to paint its borders, colors, etc.
* Margins are used to specify the amount of empty space around a Container.
* Padding is used to specify the amount of empty space around the child widget within a Container.
* Transformations are used to visually transform a Container and its child widget(s), adding effects like rotation or skewing. These can be used to really make our Container stand out!

Make sure to use Container widgets to add a creative spark!