This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

-Dan: Oh, my god

Decoration can set the border, background color, background image, rounded corners and other properties, very useful. As for the transform attribute, those who have experience in other platforms generally know that the transform is not the actual position of the transform, but the drawing effect of the transform, that is to say, its click, size, spacing and so on are all in accordance with those before the transform. However, it is important to note that the deoration and color: the background color cannot coexist, and there can only be one of them at the same time

There are several kinds of Decoration:

  • BoxDecoration: Implements borders, rounded corners, shadows, shapes, gradients, background images
  • ShapeDecoration: Color, shade, pictures
  • FlutterLogoDecoration: Logo image
  • UnderlineTabindicator: underline

BoxDecoration

const BoxDecoration({
	this.color,/ / the background color
	this.image,/ / picture
	this.border,/ / frame
	this.borderRadius,// The size of the fillet
	this.boxShadow,/ / the shadow
	this.gradient,/ / gradients
	this.backgroundBlendMode,// Image blending mode
	this.shape = BoxShape.rectangle,// Shape, boxShap.circle and borderRadius cannot be used together
})
Copy the code

BoxShadow shadow

  • Color – Shadow color
  • Offset – The shadow phase offset
  • Blurradius-gaussian blur value
  • Gradient – Supports two types of gradient: LinearGradient and RadialGradient

LinearGradient

  • Begin – The position where the gradient begins
  • End – The end of the gradient
  • Colors – Gradient colors, arrays
  • Stops – list of values, range [0,1]
  • TileMode – Tiling mode
  • Shape shape

example:

new Container(
  constraints: new BoxConstraints.expand(
    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
    image: new DecorationImage(
      image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c0 86e06f06c.jpg'),
      centerSlice: new Rect.fromLTRB(270.0.180.0.1360.0.730.0),
    ),
  ),
  padding: const EdgeInsets.all(8.0),
  alignment: Alignment.center,
  child: new Text('Hello World',
    style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  transform: new Matrix4.rotationZ(0.3),Copy the code

Tips: Color: This is used to set the background color of the container. If the foregroundDecoration is set, it may mask the color effect. < span style = “margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; margin-bottom: 0.0000pt; ForegroundDecoration: The decoration drawn in front of the child.

Reference: blog.csdn.net/u011068702/…