The BoxDecoration class is used to specify the styles applied on a box. For example, your box may have a background color, or a background gradient, or a background image. You can also apply border style, and controlling the roundness of the border.
The body of the box is painted in layers. The bottom-most layer is the color, which fills the box. Above that is the gradient, which also fills the box. Finally there is the image, the precise alignment of which is controlled by the DecorationImage class.
Here is an example of BoxDecoration is applied to Container widget -
Container(
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage('https:///flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.black,
width: 8,
),
borderRadius: BorderRadius.circular(12),
),
)
Below are the arguments discussed in details.
Let's learn how to create border in flutter. The border of a box is represented by Border class. The Border class consist of four object which is known as BorderSide. That means each of the four side of the border is represented by BorderSide class.
The BorderSide constructor takes the following arguments -
color: This argument represents the color of the border.width: This argument represents the width of the border. By setting width to 0.0 won't make your border invisible. Instead, it will render with one pixel thick border which is like a hairline.style: This argument represents the style of the border. The value is represented by BorderStyle enum. Currently there is only two values which are none and solid. The value none means the border will not be rendered. And the value solid means the border will be rendered with a solid line. The default value is solid.Here are some example -
BorderSide(width: 16.0, color: Colors.lightBlue.shade50) BorderSide(width: 10.0, color: Colors.lightBlue.shade900) // No border -- BorderSide(style: BorderStyle.none)
The Border constructor takes the following argument to constrol the border in all four sides -
bottom: The bottom side of this border.left: The left side of the border.right: The right side of the border.top: The top side of the border.All of the above four arguments takes BorderSide object to represent the border style. For example -
border: Border( top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)), left: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)), right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)), bottom: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)), ),
The named constructor Border.all applies the style to all four sides -
Border.all(width: 2.0, color: const Color(0xFFFFFFFF))
The named constructor symmetric applies the style in horizontal and verital way.
Border.symmetric(horizontal: BorderSide(width: 2.0, color: const Color(0xFFFFFFFF))) Border.symmetric(vertical: BorderSide(width: 2.0, color: const Color(0xFFFFFFFF))) Border.symmetric( vertical: BorderSide(width: 2.0, color: const Color(0xFFFFFFFF)), horizontal : BorderSide(width: 1.0, color : Colors.red[400]), )
You can use constant none which is defined in BorderSide class to remove the border.
border: Border( top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)), left: BorderSide.none, right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)), bottom: BorderSide.none ),
The borderRadius argument controls the roundness of the border. It is represented by BorderRadius class. But first lets learn how a radius is represented in flutter. The radius is represented by the class Radius.
A radius can either be circular or elliptical. The constructor Radius.circular is used to for circular shapes and Radius.elliptical constructor is used for elliptical shapes. Here are the syntax -
Radius.circular(10.0) Radius.elliptical(10.0, 15.5)
In Circular shapes the valule is same for x and y axis and in Elliptical shapes the first value is for x axis and second value is for y axis.
The Radius class defines a constant zero. This constant removes the radius. Here is an example -
Radius.zero // Same as Radius.circular(0.0) Radius.elliptical(0.0, 0.0)
Now return to the BorderRadius class, the BorderRadius class consist of four Radius object represents the roundness of a rectangle.
The named constructor all allows you to create border radius which takes a Radius object and is applied to all four corners.
BorderRadius.all(Radius.circular(30.0))
The named constructor circular allows you to create a circular radius. It takes a double value.
BorderRadius.circular(30.0) // Same as BorderRadius.all(Radius.circular(30.0))
The named constructor only allows you to specify the radius for each corner seperately.
BorderRadius.only( topLeft : Radius.circular(10), topRight : Radius.zero, bottomLeft : Radius.zero, bottomRight : Radius.elliptical(10.0, 15.0) )
The shape to fill the background color, gradient, and image into and to cast as the boxShadow. That means the shape argument helps flutter to draw color, gradient or image properly according to the shape and it also helps to paint box shadow. It is recomend to use whenever possible. The value is defined in BoxShape class. This class defines two constant.
circle: Use this constant if you are creating a circle.rectangle: Use this constant if you are using just rounded corners. This is the default value.shape : BoxShape.circle,
If this is BoxShape.circle then borderRadius is ignored.
The argument color represents the background solid color to paint.
This argument is used to specify the gradient for the box. The details are discussed in Gradient chapter.
The argument boxShadow allows you to draw a shadow behind the box. This argument takes a list of shadows. Here is an example :
new Container(
height: 200.0,
decoration: new BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 25.0, // soften the shadow
spreadRadius: 5.0, //extend the shadow
offset: Offset(
15.0, // Move to right 10 horizontally
15.0, // Move to bottom 10 Vertically
),
)
],
);
child: new Text("Hello world"),
);
In the above example, we have only one shadow applied on the Container widget. But you can use multiple shadows seperated by comma.
The class BoxShadow is used to define a shadow. Let's look at the constructor and its different argument.
The color arguments specifies the color of the shadow.
The offset argument specifies the offset of the shadow. The offset is the distance from the center. By default the shadow appears just right behind box so it is invisible by default. You move the shadow from little bit from its center to make part of it visible. In the above example, the shadow will move 15 pixel to the right in the x axis and 15 pixel at the bottom in the y axis.
offset: Offset(15.0, 15.0),
The argument blurRadius specifies how far the shadow will be blurred. Without blur you will notice a sharpe edge of the shadow, the blurRadius helps you to bring the smoothness of the edges.
The argument spreadRadius allows you to control how far the shadow will be spread to.
The argument image allows you to draw a background image in the box. It is paint above the color and gradient. Use DecorationImage to provide the image.
decoration: new BoxDecoration(
image: DecorationImage(
image: new AssetImage('assets/alucard.jpg'),
fit: BoxFit.fill,
),
borderRadius: BorderRadius.circular(80.0),
),
Lets look at different DecorationImage argument you can use to control the image:
The argument alignment controls the alignment of the image. or example, an Alignment alignment of (-1.0, -1.0) aligns the image to the top-left corner of its layout bounds, while a Alignment alignment of (1.0, 1.0) aligns the bottom right of the image with the bottom right corner of its layout bounds. Similarly, an alignment of (0.0, 1.0) aligns the bottom middle of the image with the middle of the bottom edge of its layout bounds. Defaults to Alignment.center.
The argument image allows you to specify the path of the image. If you are using a local image you can use AssetImage class to provide the image.
The argument fit is used to specify how the image should be inscribed into the box. Use BoxFit class to provide the values.
DecorationBox allows you to set decoration on the Box. In all the above example we are using Container widget to set the decoration. But Container widget is combination of multiple widget. When you are using the argument decoration on Container widget, the widget internally uses DecoratedBox and passes the value of the decoration argument to the DecorationBox widget.
A widget that paints a Decoration either before or after its child paints. Container insets its child by the widths of the borders; this widget does not.
DecoratedBox(
decoration: BoxDecoration(
gradient: RadialGradient(
center: const Alignment(-0.5, -0.6),
radius: 0.15,
colors: <Color>[
const Color(0xFFEEEEEE),
const Color(0xFF111133),
],
stops: <double>[0.9, 1.0],
),
),
)
This widget takes a position argument which is optional. It specifies whether to paint the box decoration behind or in front of the child. Use DecorationPosition enum to provide the value. It defines following two constants:
foreground: Paint the box decoration in front of the children.background: Paint the box decoration behind the children. This is the default value.
DecoratedBox(
decoration: BoxDecoration(
position: DecorationPosition.foreground,
gradient: RadialGradient(
center: const Alignment(-0.5, -0.6),
radius: 0.15,
colors: <Color>[
const Color(0xFFEEEEEE),
const Color(0xFF111133),
],
stops: <double>[0.9, 1.0],
),
),
)