preface

Related articles: Learn about Flutter

Learn about Flutter

The article structure

  • Gradient Property
  • TileMode property
  • RadialGradient
  • Image Property
  • centerSlice Property
  • ColorFilter Property
  • fit Property
  • repeat Property
  • matchTextDirection Property
  • Border Property
  • borderRadius Property
  • boxShadow Property
  • shape Property
  • Padding Property

Introduction:

The BoxDecoration class provides a variety of methods for drawing boxes.

The box is made up of borders, bodies, and shadows.

The box may be round or rectangular in shape. If it is a rectangle, the borderRadius property controls the size of the rounded corners of the border.

The body of the box is drawn on layers. The bottom layer of the box is the Color layer, and above the color layer is the gradient layer. Both the Color layer and the gradient layer fill the box. Finally, there is the Image layer, whose alignment is controlled by the DecorationImage class.

Borders are drawn on top of the body and shadows are drawn on the bottom.

In an empty container, use the following code for the boxDecoration color property:

//Colors
class BoxDecoration_Colors_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: color: BoxDecoration(color: color.purple), Child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

Note: If you use the decoration property, you cannot use the color property. The color parameter is simply a shorthand for “decoration: new BoxDecoration(color:color)”. Therefore, the following code runs with an error:

Child: Container(color: color.purple, color: color.green,)Copy the code

One, the Gradient of the Property

The gradient property is used when filling the entire box model.

If the gradient property is used, the color property will have no effect.

The gradient is drawn below the image layer.

The gradient property value can be either the LinearGradient or RadialGradient class.

LinearGradient and RadialGradient will be introduced in detail here.

LinearGradient has five important properties:

  • Begin (where the gradient begins)
  • End (where the gradient ends)
  • Colors (array)
  • Stops (List of values, with values from 0.0 to 1.0)
  • TileMode (Gradient tiling mode, which specifies tiling mode in areas other than the start and end)

The code is as follows:

//Gradient Property
class Gradient_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [color.red, color.cyan],)), child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

If we do not add begin and start attributes, the gradient will be drawn from left to right using the default attributes.

Here we are trying to add the begin and end attributes. You will use the two attributes of the Alignment class. The code is as follows:

// Gradient_Property_beginAndEnd_Widget extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [Colors.red, Colors.cyan], begin: Alignment.centerRight, end: Alignment.centerLeft ), ), child: FlutterLogo( size: 200.0,),),); }}Copy the code

The renderings are as follows:

Remember it’s a linear gradient. So if begin is bottomRight and end is bottomLeft, the gradient will be drawn from right to left. The following Settings have the same effect:

begin: Alignment.centerRight & end: Alignment.centerLeft

begin: Alignment.topRight & end: Alignment.topLeft

You can also use the coordinate system attributes X and Y in the Alignment class. See the usage of Container for more information about the Alignment classes of Flutter. The code is as follows;

// Gradient_Property_beginAndEnd_Widget extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [Colors.red, Colors.cyan], begin: Alignment.centerRight, //end: Alignment.centerLeft end: Alignment (1.0, 1.0) / / effect is same as above),), the child: FlutterLogo (size: 200.0,),),); }}Copy the code

The renderings are as follows:

Second, the TileMode property

Before beginning and ending, how the gradient should tile the plane outside of that area.

TileMode value:

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

TileMode. Clamp is the default rendering method

The code is as follows:

//TileMode property
//TileMode.clamp
class TileMode_Clamp_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [color.red, color.cyan], begin: Alignment. CenterRight, end: Alignment(0.8,0.0), tileMode: tileMode. Clamp), child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

TileMode.mirror

The code is as follows:

//TileMode property
//TileMode.mirror
class TileMode_Mirror_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [Colors. Red, Colors cyan], the Alignment. CenterRight, end: Alignment (0.8, 0.0), tileMode: tileMode. Mirror),), the child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

TileMode.repeated

The code is as follows:

//TileMode property
//TileMode.repeated
class TileMode_Repeated_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: LinearGradient( colors: [color.red, color.cyan], begin: Alignment. CenterRight, end: Alignment(0.8,0.0), tileMode: Repeated), child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

Stops

A list of values from 0.0 to 1.0, representing the split ratio along the gradient direction.

If Stops are not empty, it must match the number of colors in colors, otherwise it will run exception.

If the first value is not 0, the stop position is 0.0 by default, and the color is the same as the first color in colors.

If the last value is not 1.0, the stop position 1.0 defaults to the same color as the last color in colors.

The data in the list of stops values must be in ascending order. If there is one item in the list of Stops that is less than the previous item, this item will be equal to the previous item by default.

If stops are empty, by default they have an evenly distributed set of stops, the first of which is 0.0 and the last of which is 1.0.

The code is as follows:

// stop Property class Stops_Property_Widget extends StatelessWidget{@override Widget build(BuildContext) context) {returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: 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] FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

Third, RadialGradient

Radial gradient has five important properties

  • Center (Gradient center)
  • Radius (The radius of the gradient, floating point, multiplied by the width of the box)
  • Colors (array)
  • Stops (List of values, with values from 0.0 to 1.0)
  • TileMode (Gradient tiling mode, specify tiling mode outside the ring)

The code is as follows:

//RadialGradient
class RadialGradient_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: RadialGradient( colors: [color.red, color.cyan, color.purple, color.lightgreenaccent] 0.2, tileMode: tileMode. Clamp, stops: [0.3, 0.5, 0.6, 0.7]), Child: FlutterLogo(size: 200.0,),); }}Copy the code

The renderings are as follows:

As with linear gradients, the Center attribute is evaluated by an Alignment class, which ranges from 0.0 to 1.0.

If you draw a radial gradient on a box with width 200.0, radius is 0.5, which means 100.0.

Four, the Image Property

Draw the image above the Color layer and gradient layer. The value of the image attribute is the DecorationImage class.

The DecorationImage class contains the following properties:

  • image
  • Alignment (See the Container usage of the Flutter for more details)
  • centerSlice
  • colorFilter
  • fit
  • matchTextDirection
  • repeat

image

The image is drawn on the layer. Typically, this image will be AssetImage(an image provided internally by the application) or NetworkImage(an image fetched from the network). The code is as follows:

//Image Property
class Image_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( decoration: BoxDecoration( color: Colors.purple, gradient: RadialGradient( colors: [color.red, color.cyan, color.purple, color.lightgreenaccent], Center: Alignment(0.0, 0.0), Radius: 0.5, tileMode: Clamp: [0.3, 0.5, 0.9, 1.0]), image:"http://jlouage.com/images/author.jpg"Child:),),), FlutterLogo (size: 200.0,),),); }}Copy the code

The renderings are as follows:

As can be seen from the above picture, this picture is drawn above the Color layer and the gradient layer.

Fifth, centerSlice Property

CenterSlice is the same as patch 9 PNG in Android Studio. This is a technique for scaling an image so that the four corners remain unscaled, but the four edges are scaled on one axis and the middle is scaled on two.

The value of the centerSlice class is the Rect class. We need to construct a rectangle from the left and top sides, width and height. Let’s start by understanding the size of our images.

Width = 320 & the Height = 190

We need to use rect. fromLTWH(double left, double top, double Width, double height) to get the data.

Our centerSlice is the green rectangle in the middle of the image. To create it, we need to know the width of the orange rectangle, place it on the left and the height of the purple rectangle, and use that as the highest value.

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

So we tell the Rect class to move 50 from the left, 50 from the top of the image, and then draw the rectangle from the yellow dot marked above.

In the figure above, the rectangle has a width of 220 and a height of 90, so the final class value should be rect.fromlTWh (50.0, 50.0, 220.0, 90.0)

The code is as follows:

//centerSlice Property //https://github.com/flutter/flutter/issues/16098 class centerSlice_Property_Widget extends StatelessWidget{ @override Widget build(BuildContext context) {return Center(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("images/9_patch_scaled_320x190.jpeg"), centerSlice: new rect.fromltwh (50.0, 50.0, 220.0, 90.0), fit: boxfit.fill,), child: Container(//color: Colors. Yellow, width: 110.0, height: 110.0,),),); }}Copy the code

The renderings are as follows:

We can see that the four red areas are not scaled. Now increase the width and height of the child controls of the Container.

The code is as follows:

//centerSlice Property //https://github.com/flutter/flutter/issues/16098 class centerSlice_Property_Widget extends StatelessWidget{ @override Widget build(BuildContext context) {return Center(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("images/9_patch_scaled_320x190.jpeg"), centerSlice: new rect.fromltwh (50.0, 50.0, 220.0, 90.0), fit: boxfit.fill,), child: Container(//color: Colors. Yellow, //width: 110.0, //height: 110.0, width: 350.0, height: 450.0,),); }}Copy the code

The renderings are as follows:

Six, ColorFilter Property

A color filter applied to an image prior to rendering. The value of this attribute is ColorFilter class and the method is colorfilter.mode.

Colorfilter.mode () takes two arguments, the first is a filter and the second is blend mode.

We will use the image below and apply a different ColorFilter to it.

BlendMode.src

We’ll use colors.red. WithOpacity (0.5) and multiple blending modes. Next we’ll use blendmode.src. This will remove the target image and only draw the source image. Here the target image is image and the source image is Container(the innermost layer). The code is as follows:

//ColorFilter Property
class ColorFilter_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        //color: Colors.white,
        color: Colors.grey,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-empty.png"ColorFilter: colorfilter.mode (color.red. WithOpacity (0.5), blendmode.src)),),); }}Copy the code

The renderings are as follows:

BlendMode.clear

Now you will use blendmode.clear. This will discard the source and destination images, leaving nothing behind.

The renderings are as follows:

BlendMode.color

Gets the hue and saturation of the source image and the brightness of the target image. The effect is to color the target image with the source image. The opacity of the output image is calculated in the same way as srcOver. The fully transparent region of the source image gets its hue and saturation from the destination. Simply put, color the image with the current Container color (easy to understand). The renderings are as follows:

BlendMode.colorBurn

Divide the reciprocal of the destination by the source and reverse the result. The inversion component means that fully saturated channels (opaque white) are treated as values of 0.0, and values that are normally treated as values of 0.0 (black, transparent) are treated as values of 1.0. This phrase is a little too technical, I am a little confused!! Let’s just look at the effect. The renderings are as follows:

BlendMode.colorDodge

Divide the target by the reciprocal of the source. The inversion component means that fully saturated channels (opaque white) are treated as values of 0.0, and values that are normally treated as values of 0.0 (black, transparent) are treated as values of 1.0. Also feel confused, see the effect picture!! The renderings are as follows:

BlendMode.darken

Compose source and target images by selecting the lowest value from each color channel. The opacity of the output image is calculated in the same way as srcOver. The renderings are as follows:

BlendMode.difference

Subtract the smaller value from the larger value for each channel. [Fixed] Black has no effect Synthesizing white reverses the color of another image. The opacity of the output image is calculated in the same way as srcOver. The renderings are as follows:

BlendMode.dst

Delete the source image and draw only the target image. Conceptually, the source image is discarded, leaving the destination unchanged. This corresponds to the “target” porter-duff operator. The renderings are as follows:

BlendMode.dstATop

Compositing the target image to 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 the opacity channel of the output is set to the source image’s opacity channel rather than a combination of the image’s opacity channels. For variations where the source is at the top rather than the target, see srcATop. The renderings are as follows:

BlendMode.dstIn

Displays the target image, but only where the two images overlap. The source image is not rendered and is only considered masked. Ignore the source color channel, only opacity is valid. To display the source image, consider srcIn. To reverse the semantics of the mask (showing only the source where the target is, not the location where the target is missing), consider dstOut. This corresponds to the “destination in source” porter-duff operator. The renderings are as follows:

BlendMode.dstOut

Displays the target image, but only where the two images do not overlap. The source image is not rendered and is only considered masked. Ignore the source color channel, only opacity is valid. To display the source image, consider srcOut. To reverse the semantics of the mask (showing only targets where the source is present, not missing locations), consider dstIn. This corresponds to the “Destination out Source” porter-duff operator. The renderings are as follows:

BlendMode.dstOver

Compose the source image under the target image. This is the opposite of srcOver. This corresponds to the “target on source” porter-duff operator. The renderings are as follows:

BlendMode.exclusion

Subtract twice the product of two images from the sum of the two images. [Fixed] Black has no effect Synthesizing white reverses the color of another image. The opacity of the output image is calculated in the same way as srcOver. The renderings are as follows:

BlendMode.hardLight

After adjusting the components of the source and target images to favor the source, multiply them. Specifically, if the source value is small, it multiplies it by the target value, and if the target value is small, it multiplies the reciprocal of the target value by the reciprocal of the source value, and then reverses the result. The inversion component means that fully saturated channels (opaque white) are treated as values of 0.0, and values that are normally treated as values of 0.0 (black, transparent) are treated as values of 1.0. The renderings are as follows:

BlendMode.hue

Gets the hue of the source image, and the saturation and brightness of the target image. The effect is to color the target image with the source image. The opacity of the output image is calculated in the same way as srcOver. A fully transparent region of the source image gets its hue from the destination. The renderings are as follows:

BlendMode.lighten

Compose source and target images by selecting the highest value from each color channel. The opacity of the output image is calculated in the same way as srcOver. The renderings are as follows:

BlendMode.luminosity

Gets the brightness of the source image, and the hue and saturation of the target image. The opacity of the output image is calculated in the same way as srcOver. The fully transparent region in the source image gets its brightness from the destination. The renderings are as follows:

BlendMode.modulate

Multiply the color components of the source and destination images. This can only produce the same or darker color (multiply by white, 1.0, the result remains the same; Multiplied by black, 0.0, the result is black). This has a similar effect to superimposing two transparence films on a projector when combining two opaque images. For variants that are also multiplied by alpha channels, consider multiplication. The renderings are as follows:

BlendMode.multiply

Multiply the components of the source image and the target image, including the Alpha channel. This can only produce the same or darker color (multiply by white, 1.0, the result remains the same; Multiplied by black, 0.0, the result is black). Since the Alpha channels are also multiplied, fully transparent pixels in an image (opacity is 0.0) will produce fully transparent pixels in the output. This is similar to dstIn, but the colors are combined. For variants that multiply colors but not alpha channels, consider modulation. The renderings are as follows:

BlendMode.overlay

After adjusting the components of the source and target images to favor the target, multiply them. Specifically, if the target value is small, it multiplies it by the source value, while the source value is small, it multiplies the reciprocal of the source value by the reciprocal of the target value, and then reverses the result. The inversion component means that fully saturated channels (opaque white) are treated as values of 0.0, and values that are normally treated as values of 0.0 (black, transparent) are treated as values of 1.0. The renderings are as follows:

BlendMode.plus

Sum the components of the source and destination images. Transparency in the pixel of one of the images reduces the contribution of that image to the corresponding output pixel, as if that pixel in the image were darker. This corresponds to the “Source plus Destination” porter-duff operator. The renderings are as follows:

BlendMode.saturation

Gets the saturation of the source image and the hue and brightness of the target image. The opacity of the output image is calculated in the same way as srcOver. Saturation is obtained from the destination in the fully transparent region of the source image. The renderings are as follows:

BlendMode.screen

Multiply the reciprocal of the components of the source and destination images and reverse the result. The inversion component means that fully saturated channels (opaque white) are treated as values of 0.0, and values that are normally treated as values of 0.0 (black, transparent) are treated as values of 1.0. This is essentially the same as modulation blend mode, but reverses the values of the colors before multiplication, and reverses the results back before rendering. This can only produce the same or lighter color (multiplied by black, 1.0, the result remains the same; Multiply by white, 0.0, the result is white). Also, in the alpha channel, it can only produce more opaque colors. This has a similar effect to two projectors displaying images on the same screen at the same time. The renderings are as follows:

BlendMode.softLight

For a source value lower than 0.5, use colorDodge, and for a source value higher than 0.5, use colorBurn. This results in a similar but softer effect to overlay. The renderings are as follows:

BlendMode.srcATop

Compositing the source image to the target image, but only where it overlaps with the target. This corresponds to the “Source atop Destination” porter-duff operator. This is actually the srcOver operator, but the opacity channel of the output is set to the opacity channel of the target image rather than a combination of the opacity channels of the two images. For variants where the target is at the top rather than the source, see dstATop. The renderings are as follows:

BlendMode.srcIn

Displays the source image, but only where the two images overlap. The target image is not rendered, just treated as a mask. The target’s color channel is ignored; only opacity is valid. To display the target image, consider dstIn. To reverse the semantics of the mask (showing only sources where the target does not exist, not locations where it does), consider srcOut. This corresponds to the “destination source” porter-duff operator. The renderings are as follows:

BlendMode.srcOut

Displays the source image, but only where the two images do not overlap. The target image is not rendered, just treated as a mask. The target’s color channel is ignored; only opacity is valid. To display the target image, consider dstOut. To reverse the semantics of the mask (showing only the source where the target is, not the missing location), consider srcIn. This corresponds to the “Source out Destination” porter-duff operator. The renderings are as follows:

BlendMode.srcOver

Composes the source image onto the target image. This is the default value. It represents the most intuitive case where the shape is drawn inside below and the transparent area shows the target layer. This corresponds to the “Source over Destination” porter-duff operator, also known as the Painter algorithm. The renderings are as follows:

BlendMode.xor

Apply bitwise XOR operators to source and destination images. This leaves overlapping transparency. This corresponds to the “Source xor Destination” porter-duff operator. The renderings are as follows:

Seven, fit the Property

How to put pictures in boxes. The value of the FIT property is BoxFit of enumerated type.

  • contain
  • cover
  • fill
  • fitHeight
  • fitWidth
  • none
  • scaleDown

The code is as follows:

//fit Property
class fit_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage("http://jlouage.com/images/author.jpg"), fit: BoxFit.contain ) ), ), ), ); }}Copy the code

contain

As long as the aspect ratio of the subclass is constant, the subclass is as large as possible and filled with its parent class. Generally, scaling stops when the width or height is at its maximum.

cover

The image should be as small as possible, but cover the entire render box. So small images are blown up and stretched until they cover the entire render frame. If the image is larger than the render frame, the image will be partially displayed.

fill

The image will fit into the current render frame, resize itself, and fill the entire screen.

fitHeight

The height should fill the screen regardless of whether the image will overflow in the width direction.

fitWidth

The width should fill the screen regardless of whether the image will overflow in the height direction.

none

The image is displayed as it was, without any scaling, and anything beyond the parent class is clipped out. Keep the image centered.

scaleDown

Adjust the image so that it is centered. Contain if you need to contain an image, the same as contain, otherwise the same as None.

Eight, repeat the Property

  • noRepeat
  • repeat
  • repeatX
  • repeatY

noRepeat

Leave the uncovered part of the Container transparent and only one image will appear.

The code is as follows:

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"), repeat: ImageRepeat.noRepeat, //repeat: ImageRepeat.repeat, //repeat: ImageRepeat.repeatX, //repeat: ImageRepeat.repeatY ) ), ), ), ); }}Copy the code

The renderings are as follows:

repeat

Repeat the image in the X and y directions until the container is filled.

The code is as follows:

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"), //repeat: ImageRepeat.noRepeat, repeat: ImageRepeat.repeat, //repeat: ImageRepeat.repeatX, //repeat: ImageRepeat.repeatY ) ), ), ), ); }}Copy the code

The renderings are as follows:

repeatX

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

The code is as follows:

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"), //repeat: ImageRepeat.noRepeat, //repeat: ImageRepeat.repeat, repeat: ImageRepeat.repeatX, //repeat: ImageRepeat.repeatY ) ), ), ), ); }}Copy the code

The renderings are as follows:

repeatY

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

The code is as follows:

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"), //repeat: ImageRepeat.noRepeat, //repeat: ImageRepeat.repeat, //repeat: ImageRepeat.repeatX, repeat: ImageRepeat.repeatY ) ), ), ), ); }}Copy the code

The renderings are as follows:

Nine, matchTextDirection Property

Determines whether the image is transformed according to the TextDirection setting. Its value is true or false.

This property needs to be used with Directionality.

If the current is TextDirection. LTR, and matchTextDirection is set to bit true, then the image will be drawn from the upper left of the origin (the normal drawing direction of the image). If the current is textDirection. RTL and matchTextDirection is set to bit true, then the image will be drawn from the upper right of the origin and inverted. The code is as follows:

//matchTextDirection Property // Matches Directionality class matchTextDirection_Property_Widget extends StatelessWidget{ @override Widget build(BuildContext context) {return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Directionality(
            textDirection: TextDirection.rtl,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("images/icon1.png"),
                  matchTextDirection: true,)))))); }}Copy the code

The renderings are as follows:

Ten, the Border of the Property

Draw a border over the background color, gradient, or Image.

The Border Property can be Border Class, Border. All, or BorderDirectional Class.

Border and BorderDirectional can be used to set specific Border borders. Border-all is used to set all borders.

The Border. All attribute takes three parameters:

  • Color: Sets the color
  • Width: indicates the border width
  • There are two main styles: BorderStyle.solid and borderstyle. none. The code is as follows:
//Border Property
class Border_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color.green, width: 5.0, style: borderstyle.solid), image: DecorationImage( image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Now we use Border Class instead of Border. All. The Border Class has four parameters: top, bottom, left, and right. The value of each parameter is BorderSide Class. The code is as follows:

//Border Property
//Border
class Border_Border_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border (top: BorderSide(color: color.green, width: 5.0, style: borderstyle.solid)), image: DecorationImage( image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Now use BorderDirectional. BorderDirectional is similar to Border Class, with four parameters, but instead of left and right, start and end are used. The code is as follows:

//Border Property
//BorderDirectional
class Border_BorderDirectional_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter( child: Container( width: 300, height: 300, color: Colors.white, child: Container( decoration: BoxDecoration(border: BorderDirectional(Top: BorderSide(color: color.green, width: 5.0, style: Borderstyle.solid), start: BorderSide(color: color.green, width: 5.0, style: borderStyle.solid), image: DecorationImage( image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

BorderRadius Property

If you want rounded corners around the container, you can use borderRadius.

Note: borderRadius only works with rectangular shaped boxes.

The value can be BorderRadius. All, BorderRadius. Only, BorderRadius. Circular, BorderRadius. Horizontal, BorderRadius.

You can also use BorderRadiusDirectional instead of BorderRadius, but the left and right parameters are replaced with start and end.

BorderRadius.all

The code is as follows:

//borderRadius Property
//BorderRadius.all
class borderRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color. green, width: 5.0, style: BorderStyle. Solid), borderRadius: borderRadius. All (Radius. The circular (20.0)), image: DecorationImage (image: AssetImage ("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Now use the borderRadius. circular code as follows;

//borderRadius Property
//BorderRadius.circular
class borderRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color. green, width: 5.0, style: BorderStyle. Solid), / / borderRadius: borderRadius. All (Radius. The circular (20.0)), borderRadius: borderRadius. Circular (20.0), image: DecorationImage( image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

As you can see from the figure above, borderradius. circular and borderradius. all have the same effect, but borderradius. circular can be input directly to floating point data.

BorderRadius.horizontal

Borderradius.horizontal creates a horizontally symmetrical BorderRadius, with the left and right sides of the rectangular box having the same radius. The code is as follows:

//borderRadius Property
//BorderRadius.horizontal
class BorderRadius_horizontal_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color.green, width: 5.0, style: borderStyle.solid), borderRadius: BorderRadius. Horizontal (left: Radius. Circular (20.0), // Right: new Radius. Circular (20.0),), image: DecorationImage( image: AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

BorderRadius.vertical

BorderRadius. Vertical creates a vertically symmetric BorderRadius with the same radius code on both sides of the rectangle as follows:

//borderRadius Property
//BorderRadius.vertical
class BorderRadius_vertical_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color.green, width: 5.0, style: borderStyle.solid), borderRadius: BorderRadius. Vertical (top: Radius. Circular (20.0), // Bottom: new Radius. DecorationImage( image: AssetImage("images/JL-Logo-150.png")))))); }}Copy the code

The renderings are as follows:

BorderRadius.only

Borderradius. only Creates only border radii that contain non-zero values. The other angles are right angles. The code is as follows:

//borderRadius Property
//BorderRadius.only
class BorderRadius_only_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.0),
              //topRight: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
              //bottomLeft: Radius.circular(20.0),
            ),
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Alternatively, you can use radius.octagonal instead of radius.circular. Radius. Octagonal has 2 parameters (x, y). The code is as follows:

//borderRadius Property
//Radius.elliptical
class Radius_elliptical_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(border: border. All (color: color.green, width: 5.0, style: borderStyle.solid), borderRadius: Borderradio.only (topLeft: radio.octagonal (40.0, 10.0), //topRight: Radio.Octagonal (20.0), bottomRight: Radius. Circular (20.0), //bottomLeft: Radius. Circular (20.0),), image: DecorationImage(image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

BoxShadow Property

This is used to set the shadow of the box that matches the shape of the box. The boxShadow value is a list that contains boxShadow. You can use multiple BoxShadow in lists.

BoxShadow takes the following four parameters

  • Color: The color of the shadow
  • Offset: the offset of the shadow relative to the box
  • BlurRadius: Gaussian standard deviation convolved with the shape of the box.
  • SpreadRadius: The amount of the box should expand before applying blur.

In the first example we used color and offset. The value of the offset argument is an offset class with two floating-point arguments X and y. The code is as follows:

//boxShadow Property //color and offset class boxShadow_colorAndoffset_Property_Widget extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(width: 200.0, height: 200.0, color: Colors. White, child: Container(decoration: BoxDecoration(color: color.white, border: border. All (color: color.green, width: 5.0, style: Borderstyle.solid), borderRadius: Borderradius.only (topLeft: radius.Octagonal (40.0, 10.0), bottomLeft: Circular (20.0),), boxShadow: [boxShadow (color: Colors. Red, offset: offset (20.0, 10.0))], image: DecorationImage( image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

In the figure above we shifted the shadow 20 along the X axis and 10 along the Y axis. This shadow is solid.

Here we add the blurRadius property to make it a true shadow. The code is as follows:

//boxShadow Property
//blurRadius
class boxShadow_blurRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(color: color.white, border: border. All (color: color.green, width: 5.0, style: Borderstyle.solid), borderRadius: Borderradius.only (topLeft: radius.Octagonal (40.0, 10.0), bottomLeft: Circular (20.0),), boxShadow: [boxShadow (color: Colors. Red, offset: offset (20.0, 10.0), blurRadius: 20.0,)], image: constructor (image: AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Now spread the shadow further. We will use spreadRadius. The code is as follows:

//boxShadow Property
//spreadRadius
class boxShadow_spreadRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.elliptical(40.0, 10.0),
              bottomLeft: Radius.circular(20.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(20.0, 10.0),
                blurRadius: 20.0,
                spreadRadius: 40.0,
              )
            ],
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Now we use a variety of BoxShadow. The code is as follows:

//boxShadow Property
//multiple BoxShadow
class boxShadow_multipleAndBoxShadow_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, color: Colors. White, child: Container(decoration: BoxDecoration(color: color.white, border: border. All (color: color.green, width: 5.0, style: Borderstyle.solid), borderRadius: Borderradius.only (topLeft: radius.Octagonal (40.0, 10.0), bottomLeft: Circular (20.0),), boxShadow: [boxShadow (color: Colors. Red, offset: offset (20.0, 10.0), blurRadius: SpreadRadius: 40.0,), BoxShadow(color: Colors. Yellow, offset: offset (20.0, 10.0), blurRadius: BlurRadius: 20.0, spreadRadius: 20.0,), BoxShadow(color: color.green, offset: offset (10.0, 5.0), blurRadius: 20.0, spreadRadius: 20.0, blurRadius: 20.0, spreadRadius: 20.0, blurRadius: 5.0,)], image: DecorationImage(image:AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

13, Shape Property

Used to set the image shape. The shape property value is an enumerated BoxShape.

  • BoxShape.rectangle
  • Boxshape.circle ** Note :** borderRadius will be invalid if the value is boxShape.circle. The code is as follows:
//shape Property
class shape_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(width: 300.0, height: 300.0, child: Container(decoration: BoxDecoration) Color.white, border: border. All (color: color.green, width: 5.0, style: borderStyle.solid), boxShadow: [BoxShadow(color: color. red, offset: offset (20.0, 10.0), blurRadius: 20.0, spreadRadius: 40.0)], Shape: BoxShape.circle, image: DecorationImage( image: AssetImage("images/JL-Logo-150.png"(), ((), ((), ((); }}Copy the code

The renderings are as follows:

Padding Property

See the usage of Container for details about Flutter.

Refer to the article

Flutter — BoxDecoration Cheat Sheet