BoxDecoration Widget

What is BoxDecoration Widget?

The BoxDecoration is to draw (paint) a box using its varieties of configuration.

The box has a border, a body, and may cast a boxShadow. You can draw circular or rectangular box.

Default Constructor

The default constructor creates a box decoration. The default shape of the box is BoxShape.rectangle.

BoxDecoration(
    color:
    image:
    border:
    borderRadius:
    boxShadow:
    gradient:
    backgroundBlendMode:
    shape : BoxShape.rectangle,
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The color parameter is to fill the color in the background.

The image parameter is to display the image inside a Box.

The border parameter is to draw a border around the box.

The borderRadius parameter is to round the corners of the box.

The boxShadow parameter is to show the list of shadows behind the box.

The gradient parameter is to fill the box with color variants.

The shape parameter is to provide a shape to the box.

Code snippet

This code snippet shows how to configure BoxDecoration widget.

BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue[100],
              border: Border.all(width: 1.0)),
);

Demo Code

This example creates a box decoration with the shape circle filled with background color blue, and draws border with 1 pixels above the background.

import 'package:flutter/material.dart';

class BoxDecorationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Container(
          height: 300.0,
          width: 500.0,
          decoration: BoxDecoration(
              color: Colors.blue[100],
              shape: BoxShape.circle,
              border: Border.all(width: 1.0)),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'BoxDecoration Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: BoxDecorationDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

void main() => runApp(MyApp());

Note: Go through the other levels to get deep knowledge on this topic.