Flutter 中 BoxDecoration widget 示例用法

BoxDecoration 这个控件用的挺多的，能够更好的理解和使用，相信会很有帮助

Widget _container() {
    return new Container(
      height: 100.0,
      width: 100.0,
//      transform: Matrix4.rotationZ( pi / 4),
      decoration: BoxDecoration(color: Colors.yellowAccent),
      child: Text(
        "Hi",
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _text() {
    return new Text("Hi Hi");
  }

  Widget _container2() {
    return Container(
      height: 100.0,
      width: 100.0,
      decoration: BoxDecoration(
        color: Colors.yellow,
//          border: Border.all(color: Colors.black, width: 3.0), ///间隙的宽度
//          borderRadius: BorderRadius.all(Radius.circular(18.0)), ///圆角
        ///
        border: Border(
            top: BorderSide(color: Colors.red, width: 5),
            right: BorderSide(color: Colors.red, width: 5)),

        ///间隙的宽度
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(8)),
      ),
    );
  }

  Widget _container3() {
    return Container(
      height: 100.0,
      width: 100.0,
      decoration: BoxDecoration(
        color: Colors.yellow,
        shape: BoxShape.circle,
      ),
    );
  }

  Widget _container4() {
    return Container(
      height: 100.0,
      width: 100.0,
      decoration: BoxDecoration(
        color: Colors.yellow,
        shape: BoxShape.circle,
        boxShadow: const [
          BoxShadow(blurRadius: 20.0),
        ],
      ),
    );
  }

  Widget _container5() {
    return Container(
      height: 100.0,
      width: 100.0,
      decoration: BoxDecoration(
        ///渐变色  LinearGradient    RadialGradient光圈渐变    SweepGradient 环视
        gradient: RadialGradient(
          colors: const [
            Colors.red,
            Colors.blue,
            Colors.green,
            Colors.amber,
            Colors.grey,
          ],
//stops: [ 5.0,5.0,5.0,]
          stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
        ),
      ),
    );
  }

  Widget _container6() {
    return Container(
      height: 100.0,
      width: 100.0,

      ///将BoxDecoration设置为foregroundDecoration，它绘制在Container的子项之上（而装饰是在子项后面绘制的）。
      foregroundDecoration: BoxDecoration(
        backgroundBlendMode: BlendMode.exclusion,
        gradient: LinearGradient(
          colors: const [
            Colors.red,
            Colors.blue,
          ],
        ),
      ),
      child: Image.network(
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
    );
  }

  Widget _container7() {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
      child: Container(
        height: 100.0,
        width: 100.0,
        foregroundDecoration: BoxDecoration(
          backgroundBlendMode: BlendMode.exclusion,
          gradient: LinearGradient(
            colors: const [
              Colors.red,
              Colors.blue,
            ],
          ),
        ),
      ),
    );
  }

decoration.png