The decoration property of the flitter container

Time:2021-1-25

When using the “Deoration” of the “flutter”, error is reported. Reminder: Deoration and color: the background color cannot coexist. There can only be one of them at the same time
Decoration can set border, background color, background image, fillet and other attributes, which is very practical. Generally, those who have experience in developing other platforms have a general understanding of the property of transform. This kind of transformation is not the actual position of the transformation, but the rendering effect of the transformation, that is to say, its click, size, spacing, etc. are based on those before the transformation.

demo

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('https://imgs.developpaper.com/imgs/9f2f070828381f30dea167bbad014c086e06f06c.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),
)

tips

Color: used to set the background color of the container. If the foregrounddecision is set, the color effect may be covered.
Decoration: if decoration is set on the back of the child, the color property cannot be set, otherwise an error will be reported. At this time, the color should be set in decoration.
Foregrounddecoration: Decoration painted in front of the child.