Flutter的Container和Decoration

Container的使用

@override

  Widget build(BuildContext context) {

    return Container(

      color: Colors.grey[100] ,//背景颜色

      child: Row(

        children: <Widget>[

          Container(

            child: Icon(Icons.pool, size:32.0, color:Colors.white),

            color: Color.fromRGBO(3, 53, 255, 1.0),

            padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距

            margin: EdgeInsets.all(8.0),//外边距

            width: 90.0,//宽度

            height: 90.0,//高度

          ),

        ],

      ),

    );

  }

Decoration的使用

Widget build(BuildContext context) {

    return Container(

      // color: Colors.grey[100] ,//背景颜色

      decoration: BoxDecoration(

        image: DecorationImage(//背景图片 ,不能与背景色同时使用

          image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),

          alignment: Alignment.topCenter,

          repeat: ImageRepeat.repeatY,//是否重复

          fit: BoxFit.cover,//填充模式

          colorFilter: ColorFilter.mode(//颜色滤镜

            Colors.indigoAccent[400].withOpacity(0.5),

            BlendMode.hardLight//混合模式

            ),

        ),

      ),

      child: Row(

        mainAxisAlignment: MainAxisAlignment.center,//主轴对齐方式,显示居中

        children: <Widget>[

          Container(

            child: Icon(Icons.pool, size:32.0, color:Colors.white),

            padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距

            margin: EdgeInsets.all(8.0),//外边距

            width: 90.0,//宽度

            height: 90.0,//高度

            decoration: BoxDecoration(

              color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color

              border: Border.all(

                color: Colors.indigoAccent[100],

                width: 3.0,

                style: BorderStyle.solid,

              ),

              // border: Border(//边框 这里也可以用Border.all()设置四边款统一样式

              // top: BorderSide(

              //  color: Colors.indigoAccent[100],

              //  width: 3.0,

              //  style: BorderStyle.solid,

              // ),

              // bottom: BorderSide(

              //  color: Colors.red[300],

              //  width: 3.0,

              //  style: BorderStyle.solid,

              // ),

              //  left: BorderSide(

              //  color: Colors.indigoAccent[200],

              //  width: 3.0,

              //  style: BorderStyle.solid,

              // ),

              //  right: BorderSide(

              //  color: Colors.indigoAccent[200],

              //  width: 3.0,

              //  style: BorderStyle.solid,

              // ),

              // ),

              // borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)

              boxShadow: [//阴影效果

                BoxShadow(

                  offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移

                  color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色

                  blurRadius: 25.0 ,//阴影程度

                  spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数

                ),

              ],

              shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius

              //  gradient: RadialGradient( //径向渐变效果RadialGradient  线性渐变效果LinearGradient

              //  colors: [

              //    Color.fromRGBO(7, 102, 255, 1.0),

              //    Color.fromRGBO(3, 28, 128, 1.0),

              //  ]

              gradient: LinearGradient( //径向渐变效果RadialGradient  线性渐变效果LinearGradient

                colors: [

                  Color.fromRGBO(7, 102, 255, 1.0),

                  Color.fromRGBO(3, 28, 128, 1.0),

                ],

                begin: Alignment.topCenter,

                end : Alignment.bottomCenter,

              ),

            ),

          ),

        ],

      ),

    );

  }

背景图

 Container(
      // color: Colors.grey[100] ,//背景颜色
      decoration: BoxDecoration(
        image: DecorationImage(//背景图片 ,不能与背景色同时使用
          image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
          alignment: Alignment.topCenter,
          repeat: ImageRepeat.repeatY,//是否重复
          fit: BoxFit.cover,//填充模式
          colorFilter: ColorFilter.mode(//颜色滤镜
            Colors.indigoAccent[400].withOpacity(0.5), 
            BlendMode.hardLight//混合模式
            ),
        ),
      ),
)

阴影和渐变

 Container(
            child: Icon(Icons.pool, size:32.0, color:Colors.white),
            padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
            margin: EdgeInsets.all(8.0),//外边距
            width: 90.0,//宽度
            height: 90.0,//高度
            decoration: BoxDecoration(
              color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
              border: Border.all(
                color: Colors.indigoAccent[100],
                width: 3.0,
                style: BorderStyle.solid,
              ),
              
              // borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
              boxShadow: [//阴影效果
                BoxShadow(
                  offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移
                  color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色
                  blurRadius: 25.0 ,//阴影程度
                  spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数
                ),
              ],
              shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius
              //  gradient: RadialGradient( //径向渐变效果RadialGradient   线性渐变效果LinearGradient
              //   colors: [
              //     Color.fromRGBO(7, 102, 255, 1.0),
              //     Color.fromRGBO(3, 28, 128, 1.0),
              //   ]
              gradient: LinearGradient( //径向渐变效果RadialGradient   线性渐变效果LinearGradient
                colors: [
                  Color.fromRGBO(7, 102, 255, 1.0),
                  Color.fromRGBO(3, 28, 128, 1.0),
                ],
                begin: Alignment.topCenter,
                end : Alignment.bottomCenter,
              ),
            ),
          )

边框和圆角

image