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));