Flutter — BoxDecoration Cheat Sheet

Julien Louage
JLouage
Published in
24 min readJun 5, 2018

--

The BoxDecoration class provides a variety of ways to draw a box.

The box has a border, a body, and may cast a boxShadow.

The shape of the box can be a circle or a rectangle. If it is a rectangle, then the borderRadius property controls the roundness of the corners.

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.

The border paints over the body; the boxShadow, naturally, paints below it.

Let’s start with an empty container and apply a red color property in the boxDecoration class.

NB: You cannot apply a color property to the container if you are using a decoration property. The color argument is just a shorthand for “decoration: new BoxDecoration(color:color)”.

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
),
child: new FlutterLogo(
size: 200.0,
)
),
);

Gradient Property

A gradient to use when filling the box.

If this is specified, color has no effect.

The gradient is drawn under the image.

The value of the gradient property can be LinearGradient Class or RadialGradient Class.

Let’s start with LinearGradient Class.

LinearGradient Class has 5 main properties

  • begin (the offset at which start the gradient)
  • end (the offset at which end the gradient)
  • colors (List of colors)
  • stops (A list of values from 0.0 to 1.0 that denote fractions along the gradient)
  • tileMode (How this gradient should tile the plane beyond in the region before begin and after end)
Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

If we will not add the begin and the start propery by default the gradient begin from start to end (left to right)

Let’s add begin and end. You will use the Alignment Class with both properties.

Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
begin: Alignment.centerRight,
end: Alignment.centerLeft
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

Remember it is a Linear Gradient. So if begin is bottomRight and the end is bottomLeft, the gradient will go from Right to Left same result as:

begin: Alignment.centerRight & end: Alignment.centerLeft

begin: Alignment.topRight & end: Alignment.topLeft

Also you can use the Alignment class with the coordinate X and Y.

For more details about the Alignment class check the container Cheat Sheet

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
begin: Alignment.centerRight,
end: new Alignment(-1.0, -1.0)
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

TileMode property

How this gradient should tile the plane beyond in the region before begin and after end.

TileMode values are:

  • TileMode.clamp
  • TileMode.mirror
  • TileMode.repeated

TileMode.clamp is the default TileMode

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
begin: Alignment.centerRight,
end: new Alignment(0.8, 0.0),
tileMode: TileMode.clamp
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

TileMode.mirror

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
begin: Alignment.centerRight,
end: new Alignment(0.8, 0.0),
tileMode: TileMode.mirror
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);
new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan],
begin: Alignment.centerRight,
end: new Alignment(0.8, 0.0),
tileMode: TileMode.repeated
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

Stops

A list of values from 0.0 to 1.0 that denote fractions along the gradient.

If non-null, this list must have the same length as colors.

If the first value is not 0.0, then a stop with position 0.0 and a color equal to the first color in colors is implied.

If the last value is not 1.0, then a stop with position 1.0 and a color equal to the last color in colors is implied.

The values in the stops list must be in ascending order. If a value in the stops list is less than an earlier value in the list, then its value is assumed to equal the previous value.

If stops is null, then a set of uniformly distributed stops is implied, with the first stop at 0.0 and the last stop at 1.0.

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new LinearGradient(
colors: [Colors.red, Colors.cyan, Colors.purple, Colors.lightGreenAccent],
begin: Alignment.centerRight,
end: Alignment.centerLeft,
tileMode: TileMode.clamp,
stops: [0.3, 0.5, 0.6, 0.7]
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

RadialGradient

RadialGradient Class has 5 main properties

  • center (The center of the gradient, as an offset into the (-1.0, -1.0) x (1.0, 1.0) square describing the gradient which will be mapped onto the paint box)
  • radius (The radius of the gradient, as a fraction of the shortest side of the paint box.)
  • colors (List of colors) Same as LinearGradient
  • stops (A list of values from 0.0 to 1.0 that denote fractions along the gradient) Same as LinearGradient
  • tileMode (How this gradient should tile the plane beyond in the region before begin and after end) Same as LinearGradient
new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new RadialGradient(
colors: [Colors.red, Colors.cyan, Colors.purple, Colors.lightGreenAccent],
center: Alignment(-0.7, -0.6),
radius: 0.2,
tileMode: TileMode.clamp,
stops: [0.3, 0.5, 0.6, 0.7]
),
),
child: new FlutterLogo(
size: 200.0,
)
),
);

Center propery take a value of Alignment Class same as the LinearGradient and the value of the radius is from 0.0 till 1.0

if a radial gradient is painted on a box that is 200.0 wide, then a radius of 0.5 is equal to 100.0

Image Property

An image to paint above the background color or gradient. The value of the image property is DecorationImage Class.

DecorationImage Class have the below properties:

Image

The image to be painted into the decoration. Typically this will be an AssetImage (for an image shipped with the application) or a NetworkImage (for an image obtained from the network).

new Center(
child: new Container(
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new RadialGradient(
colors: [Colors.red, Colors.cyan, Colors.purple, Colors.lightGreenAccent],
center: Alignment(0.0, 0.0),
radius: 0.5,
tileMode: TileMode.clamp,
stops: [0.3, 0.5, 0.9, 1.0]
),
image: new DecorationImage(
image: new NetworkImage("http://jlouage.com/images/author.jpg")
)
),
child: new FlutterLogo(
size: 200.0,
)
),
);

You can see that the image is painted above the color and the gradient.

centerSlice Property

centerSlice is the same as 9 patch png in Android Studio. Is a technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis.

The Value of the centerSlice property is the Rect Class. We need to constrcut a rectangle from its left and top edges, its width, and its height. Let’s start to know the size of our picture.

Width = 320 & the Height = 190

The class we need to use is

Rect.fromLTWH(double left, double top, double width, double height)

Our centerSlice is the green rectangle in the middle of the picture. To create it we need to know the width of the orange rectangle and put it for the left value and the height of the purple rectangle and put it for the top value

Rect.fromLTWH(50.0, 50.0, double width, double height)

So we have tell the Rect class to move 50 from the left and 50 from the top of the picture and start drawing the rectangle from the yellow point marked on the picture above.

In the above picture we have the width of the rectangle is 220 and the height is 90 so the final class value should be

Rect.fromLTWH(50.0, 50.0, 220.0, 90.0)

The final code is

new Center(
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/9_patch_scaled_320x190.png'),
centerSlice: new Rect.fromLTWH(50.0, 50.0, 220.0, 90.0),
fit: BoxFit.fill,
)
),
child: new Container(
//color: Colors.yellow,
width: 110.0,
height: 110.0,
)
),

);

You can see that the four red square are unscaled. let give the child of the container more width and height.

new Center(
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/9_patch_scaled_320x190.png'),
centerSlice: new Rect.fromLTWH(50.0, 50.0, 220.0, 90.0),
fit: BoxFit.fill,
)
),
child: new Container(
//color: Colors.yellow,
width: 350.0,
height: 450.0,
)
),

);

ColorFilter Property

A color filter to apply to the image before painting it. The value of this property is ColorFilter Class and the method is mode.

ColorFilter.mode() take two parameters, first one is a color filter, and the second is the blend mode.

We will use the below picture and apply on it different ColorFilter

We will use Colors.red.withOpacity(0.5) with multiple blend mode. Below we are using the BlendMode.src . This will drop the destination image, only paint the source image.

new Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-empty.png'),
colorFilter: new ColorFilter.mode(Colors.red.withOpacity(0.5), BlendMode.src),
)
),
),
),
);

Now will use BlendMode.clear. This will drop both the source and destination images, leaving nothing.

BlendMode.color

Take the hue and saturation of the source image, and the luminosity of the destination image.
The effect is to tint the destination image with the source image.
The opacity of the output image is computed in the same way as for srcOver.
Regions that are entirely transparent in the source image take their hue and saturation from the destination.

BlendMode.colorBurn

Divide the inverse of the destination by the the source, and inverse the result.
Inverting the components means that a fully saturated channel (opaque white) is treated as the value 0.0, and values normally treated as 0.0 (black, transparent) are treated as 1.0.

BlendMode.colorDodge

Divide the destination by the inverse of the source.
Inverting the components means that a fully saturated channel (opaque white) is treated as the value 0.0, and values normally treated as 0.0 (black, transparent) are treated as 1.0.

BlendMode.darken

Composite the source and destination image by choosing the lowest value from each color channel.
The opacity of the output image is computed in the same way as for srcOver.

BlendMode.difference

Subtract the smaller value from the bigger value for each channel.
Compositing black has no effect; compositing white inverts the colors of the other image.
The opacity of the output image is computed in the same way as for srcOver.
The effect is similar to exclusion but harsher.

BlendMode.dst

Drop the source image, only paint the destination image.
Conceptually, the source image is discarded, leaving the destination untouched.
This corresponds to the “Destination” Porter-Duff operator.

BlendMode.dstATop

Composite the destination image over the source image, but only where it overlaps the source.
This corresponds to the “Destination atop Source” Porter-Duff operator.
This is essentially the dstOver operator, but with the output’s opacity channel being set to that of the source image instead of being a combination of both image’s opacity channels.
For a variant with the source on top instead of the destination, see srcATop.

BlendMode.dstIn

Show the destination image, but only where the two images overlap. The source image is not rendered, it is treated merely as a mask. The color channels of the source are ignored, only the opacity has an effect.
To show the source image instead, consider srcIn.
To reverse the semantic of the mask (only showing the source where the destination is present, rather than where it is absent), consider dstOut.
This corresponds to the “Destination in Source” Porter-Duff operator.

BlendMode.dstOut

Show the destination image, but only where the two images do not overlap. The source image is not rendered, it is treated merely as a mask. The color channels of the source are ignored, only the opacity has an effect.
To show the source image instead, consider srcOut.
To reverse the semantic of the mask (only showing the destination where the source is present, rather than where it is absent), consider dstIn.
This corresponds to the “Destination out Source” Porter-Duff operator.

BlendMode.dstOver

Composite the source image under the destination image.
This is the opposite of srcOver.
This corresponds to the “Destination over Source” Porter-Duff operator.

BlendMode.exclusion

Subtract double the product of the two images from the sum of the two images.
Compositing black has no effect; compositing white inverts the colors of the other image.
The opacity of the output image is computed in the same way as for srcOver.
The effect is similar to difference but softer.

BlendMode.hardLight

Multiply the components of the source and destination images after adjusting them to favor the source.
Specifically, if the source value is smaller, this multiplies it with the destination value, whereas is the destination value is smaller, it multiplies the inverse of the destination value with the inverse of the source value, then inverts the result.
Inverting the components means that a fully saturated channel (opaque white) is treated as the value 0.0, and values normally treated as 0.0 (black, transparent) are treated as 1.0.

BlendMode.hue

Take the hue of the source image, and the saturation and luminosity of the destination image.
The effect is to tint the destination image with the source image.
The opacity of the output image is computed in the same way as for srcOver.
Regions that are entirely transparent in the source image take their hue from the destination.

BlendMode.lighten

Composite the source and destination image by choosing the highest value from each color channel.
The opacity of the output image is computed in the same way as for srcOver.

BlendMode.luminosity

Take the luminosity of the source image, and the hue and saturation of the destination image.
The opacity of the output image is computed in the same way as for srcOver.
Regions that are entirely transparent in the source image take their luminosity from the destination.

BlendMode.modulate

Multiply the color components of the source and destination images.
This can only result in the same or darker colors (multiplying by white, 1.0, results in no change; multiplying by black, 0.0, results in black).
When compositing two opaque images, this has similar effect to overlapping two transparencies on a projector.
For a variant that also multiplies the alpha channel, consider multiply.

BlendMode.multiply

Multiply the components of the source and destination images, including the alpha channel.
This can only result in the same or darker colors (multiplying by white, 1.0, results in no change; multiplying by black, 0.0, results in black).
Since the alpha channel is also multiplied, a fully-transparent pixel (opacity 0.0) in one image results in a fully transparent pixel in the output. This is similar to dstIn, but with the colors combined.
For a variant that multiplies the colors but does not multiply the alpha channel, consider modulate.

BlendMode.overlay

Multiply the components of the source and destination images after adjusting them to favor the destination.
Specifically, if the destination value is smaller, this multiplies it with the source value, whereas is the source value is smaller, it multiplies the inverse of the source value with the inverse of the destination value, then inverts the result.
Inverting the components means that a fully saturated channel (opaque white) is treated as the value 0.0, and values normally treated as 0.0 (black, transparent) are treated as 1.0.

BlendMode.plus

Sum the components of the source and destination images.
Transparency in a pixel of one of the images reduces the contribution of that image to the corresponding output pixel, as if the color of that pixel in that image was darker.
This corresponds to the “Source plus Destination” Porter-Duff operator.

BlendMode.saturation

Take the saturation of the source image, and the hue and luminosity of the destination image.
The opacity of the output image is computed in the same way as for srcOver.
Regions that are entirely transparent in the source image take their saturation from the destination.

BlendMode.screen

Multiply the inverse of the components of the source and destination images, and inverse the result.
Inverting the components means that a fully saturated channel (opaque white) is treated as the value 0.0, and values normally treated as 0.0 (black, transparent) are treated as 1.0.
This is essentially the same as modulate blend mode, but with the values of the colors inverted before the multiplication and the result being inverted back before rendering.
This can only result in the same or lighter colors (multiplying by black, 1.0, results in no change; multiplying by white, 0.0, results in white). Similarly, in the alpha channel, it can only result in more opaque colors.
This has similar effect to two projectors displaying their images on the same screen simultaneously.

BlendMode.softLight

Use colorDodge for source values below 0.5 and colorBurn for source values above 0.5.
This results in a similar but softer effect than overlay.

BlendMode.srcATop

Composite the source image over the destination image, but only where it overlaps the destination.
This corresponds to the “Source atop Destination” Porter-Duff operator.
This is essentially the srcOver operator, but with the output’s opacity channel being set to that of the destination image instead of being a combination of both image’s opacity channels.
For a variant with the destination on top instead of the source, see dstATop.

BlendMode.srcIn

Show the source image, but only where the two images overlap. The destination image is not rendered, it is treated merely as a mask. The color channels of the destination are ignored, only the opacity has an effect.
To show the destination image instead, consider dstIn.
To reverse the semantic of the mask (only showing the source where the destination is absent, rather than where it is present), consider srcOut.
This corresponds to the “Source in Destination” Porter-Duff operator.

BlendMode.srcOut

Show the source image, but only where the two images do not overlap. The destination image is not rendered, it is treated merely as a mask. The color channels of the destination are ignored, only the opacity has an effect.
To show the destination image instead, consider dstOut.
To reverse the semantic of the mask (only showing the source where the destination is present, rather than where it is absent), consider srcIn.
This corresponds to the “Source out Destination” Porter-Duff operator.

BlendMode.srcOver

Composite the source image over the destination image.
This is the default value. It represents the most intuitive case, where shapes are painted on top of what is below, with transparent areas showing the destination layer.
This corresponds to the “Source over Destination” Porter-Duff operator, also known as the Painter’s Algorithm.

BlendMode.xor

Apply a bitwise xor operator to the source and destination images. This leaves transparency where they would overlap.
This corresponds to the “Source xor Destination” Porter-Duff operator.

fit Property

How the image should be inscribed into the box. The value of the fit property is BoxFit enum.

  • contain
  • cover
  • fill
  • fitHeight
  • fitWidth
  • none
  • scaleDown
Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new NetworkImage('http://jlouage.com/images/author.jpg'),
fit: BoxFit.contain
)
),
),
),
);

contain

As large as possible while still containing the source entirely within the target box.

cover

As small as possible while still covering the entire target box.

fill

Fill the target box by distorting the source’s aspect ratio.

fitHeight

Make sure the full height of the source is shown, regardless of whether this means the source overflows the target box horizontally.

fitWidth

Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

none

Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.
The source image is not resized.

scaleDown

Align the source within the target box (by default, centering) and, if necessary, scale the source down to ensure that the source fits within the box.
This is the same as contain if that would shrink the image, otherwise it is the same as none.

repeat Property

How to paint any portions of the box that would not otherwise be covered by the image. The value of the repeat propery is ImageRepeat enum.

  • noRepeat
  • repeat
  • repeatX
  • repeatY

noRepeat

Leave uncovered portions of the box transparent.

Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
repeat: ImageRepeat.noRepeat
)
),
),
),
);

repeat

Repeat the image in both the x and y directions until the box is filled.

Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
repeat: ImageRepeat.repeat
)
),
),
),
);

repeatX

Repeat the image in the x direction until the box is filled horizontally.

Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
repeat: ImageRepeat.repeatX
)
),
),
),
);

repeatY

Repeat the image in the y direction until the box is filled vertically.

Center(
child: new Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
repeat: ImageRepeat.repeatY
)
),
),
),
);

matchTextDirection Property

Whether to paint the image in the direction of the TextDirection. The value is true or false;

If this is true, then in TextDirection.ltr contexts, the image will be drawn with its origin in the top left (the “normal” painting direction for images); and in TextDirection.rtl contexts, the image will be drawn with a scaling factor of -1 in the horizontal direction so that the origin is in the top right.

Border Property

A border to draw above the background color, gradient, or image.

Border Property take as value Border Class, Border.all & BorderDirectional Class.
Border & BorderDirectional if you want to set border for a specific side.
Border.all you set border for all sides.

let’s use first the Border.all — It takes 3 parameters,

  • color: the color of the border
  • width: the width of the border
  • style: the style of the border, there is 2 styles.
    BorderStyle.solid and BorderStyle.none
new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Now we will use the Border Class instead Border.all. Border Class take 4 parameters top, bottom, left and right. The value of every parameter shoud be the BorderSide Class.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border(
top: new BorderSide(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Now let’s use the BorderDirectional.

BorderDirectional like the Border Class take 4 parameters, but instead left and right, it takes start and end.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new BorderDirectional(
top: new BorderSide(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
start: new BorderSide(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

borderRadius Property

You use borderRadius if you want to make the corner of the box rouned,

NB: borderRadius applies only to boxes with rectangular shapes.

The value of the borderRadius is BorderRadius.all, BorderRadius.only, BorderRadius.circular, BorderRadius.horizontal, BorderRadius.vertical.

Also you can use instead of BorderRadius, BorderRadiusDirectional with the same methods above. But in the parameters instead left and right you will use the start and end.

BorderRadius.all Creates a border radius where all radii are radius.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

BorderRadius.circular Creates a border radius where all radii are Radius.circular(radius).

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.circular(20.0),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Same result as BorderRadius.all but you can enter the value directly as double. no need to add a Radius Class.

BorderRadius.horizontal Creates a horizontally symmetrical border radius where the left and right sides of the rectangle have the same radii.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.horizontal(
left: new Radius.circular(20.0),
//right: new Radius.circular(20.0),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

BorderRadius.vertical Creates a vertically symmetric border radius where the top and bottom sides of the rectangle have the same radii.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.vertical(
top: new Radius.circular(20.0),
//bottom: new Radius.circular(20.0),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

BorderRadius.only Creates a border radius with only the given non-zero values. The other corners will be right angles.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.circular(20.0),
//topRight: new Radius.circular(20.0),
//bottomRight: new Radius.circular(20.0),
bottomLeft: new Radius.circular(20.0),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Also you can use instead of the Radius.circular Class, Radius.elliptical.
Radius.elliptical take 2 parameters x & y.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.elliptical(40.0, 10.0),
//topRight: new Radius.circular(20.0),
//bottomRight: new Radius.circular(20.0),
bottomLeft: new Radius.circular(20.0),
),
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

boxShadow Property

A list of shadows cast by this box behind the box. The shadow follows the shape of the box.

The value of the boxShadow is a list of BoxShadow class. You can use multiple BoxShadow in the list.

BoxShadow class take 4 parameters

  • color: The color of the shadow
  • offset: The displacement of the shadow from the box.
  • blurRadius: The standard deviation of the Gaussian to convolve with the box’s shape.
  • spreadRadius: The amount the box should be inflated prior to applying the blur.

First example we use the color and the offset.
The value of the offset parameter is an Offset class and take 2 double parameters x and y.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.elliptical(40.0, 10.0),
bottomLeft: new Radius.circular(20.0),
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
)
],
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

We have moved the shadow 20 on the X axis and 10 on the Y axis. The shadow is solid.

Let’s add a blurRadius to it to make it as a real shadow.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.elliptical(40.0, 10.0),
bottomLeft: new Radius.circular(20.0),
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
blurRadius: 20.0,
)
],
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Now we will add more spread for the shadow. we use the spreadRadius.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
color: Colors.white,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.elliptical(40.0, 10.0),
bottomLeft: new Radius.circular(20.0),
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0
)
],
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

Now let’s use multiple BoxShadow.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0
),
new BoxShadow(
color: Colors.yellow,
offset: new Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 20.0
),
new BoxShadow(
color: Colors.green,
offset: new Offset(10.0, 5.0),
blurRadius: 20.0,
spreadRadius: 5.0
)
],
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

shape Property

The shape to fill the background color, gradient, and image into and to cast as the boxShadow.

The value of the shape property is BoxShape enum

  • BoxShape.rectangle
  • BoxShape.circle

NB: If this is BoxShape.circle then borderRadius is ignored.

new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
blurRadius: 20.0,
spreadRadius: 40.0
)
],
shape: BoxShape.circle,
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)
),
),
),
);

--

--

Julien Louage
JLouage

Flutter, Ionic, iOS, Android, Angular, IoT…