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

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

Or sign up using:

Already have an account?