Flutter – BoxDecoration Widget

BoxDecoration is a build-in widget in flutter API. At a bare basic level, it describes how a box should be painted on the screen. The shape of the box needs not to be just a rectangle or a square it can circle also. It comes with a ton of properties we can add an image inside, add a radius to the border (if the shape is a rectangle), cast shadow to the box, etc. Below we will see all its properties and an example implementation of the BoxDecoration widget.

Constructor of BoxDecoration class:

 const BoxDecoration(
{Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape: BoxShape.rectangle}
)

Properties of BoxDecoration widget:

• backgroundBlendMode: This property takes in the BlendMode enum as the object to this parameter. It applies a blending effect to the background color or gradient.
• border: The border parameter takes in the BoxBorder class as the object to draw a border around the box.
• borderRadius: This property takes in the BorderRadiusGeometry class as the object which in turn adds curves around the border corners if the box shape is a rectangle.
• boxShadow: This property holds a list of BoxShadow widget as the object. It casts a shadow on the box.
• color: This property takes in the Color class as the object to give a background color to the BoxDecoration widget.
• gradient: This property takes in Gradient class as the object to apply a gradient filling inside the box.
• image: This property adds an image over the background taking in the DecorationImage class as the object.
• padding: This property takes in the EdgeInsetsGeometry class as the object to add empty space around the content inside the box.
• shape: This property takes in the BoxShape as the object to decide the shape of the box.

Example: 

Dart

import 'package:flutter/material.dart';

//imported material design package
void main() {
  runApp(
    //Widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            //BoxDecoration Widget
            decoration: BoxDecoration(
              image: const DecorationImage(
                image: NetworkImage(
                    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'),
                fit: BoxFit.cover,
              ), //DecorationImage
              border: Border.all(
                color: Colors.green,
                width: 8,
              ), //Border.all
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ), //Offset
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                ), //BoxShadow
                BoxShadow(
                  color: Colors.white,
                  offset: const Offset(0.0, 0.0),
                  blurRadius: 0.0,
                  spreadRadius: 0.0,
                ), //BoxShadow
              ],
            ), //BoxDecoration
          ), //Container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Output: 

Explanation: The parent widget in this app is Center which is holding the entire widget tree of the app body. The Center widget is holding Container widget as the child. The BoxDecoration widget is taken by the decoration property of the Container. The first element drawn inside the box is a NetworkImage with the help of image property. Then we have the border property which had assigned a 4 pixels thick green colored border around the box. And to add curves around the corners of the border we have the boderRadius property adding a curve of 15 px radius on each corner. And at last, we have the boxShadow property which has a list of two BoxShadow class to assign a white color background in the box (beneath the image) and a deep black-colored shadow outside the box.