Learn

The first parameter to 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. This class has parameters such as border, color, and borderRadius. Let’s look at an example:

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 (giving the edges of the border curves), a 10 pixel blue Border, and a green background Color.

Lets try adding some decorations.

Instructions

We’ve provided an empty BoxDecoration in this example. Try adding a color, a border, or a borderRadius, or some combination of the three.

Hint

The syntax for declaring these parameters in a BoxDecoration constructor looks like:

color: Colors.green,
border: Border.all(color: Colors.blueAccent, width: 10),
borderRadius: BorderRadius.circular(12));

Solution

The BoxDeclaration might look like:

  var myDecoration = BoxDecoration(
      color: Colors.purple,
      borderRadius: BorderRadius.circular(10));

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?