Flutter-Border

边框（Border）

单侧边框

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Icon(Icons.pool, size: 32, color: Colors.white,),
            padding: EdgeInsets.all(16),
            margin: EdgeInsets.all(8),
            width: 90,
            height: 90,
            decoration: BoxDecoration(
              color: Color.fromRGBO(3, 54, 255, 1),
              border: Border(
                top: BorderSide( // 设置单侧边框的样式
                  color: Colors.indigoAccent[100],
                  width: 3,
                  style: BorderStyle.solid
                )
              )
            ),
          )
        ],
      ),
    );
  }
}

预览

全部边框

border: Border.all(
  color: Colors.indigoAccent[100],
  width: 3,
  style: BorderStyle.solid
)

预览

圆角（borderRadius）

全部圆角

decoration: BoxDecoration(
  color: Color.fromRGBO(3, 54, 255, 1),
  border: Border.all(
    color: Colors.indigoAccent[100],
    width: 3,
    style: BorderStyle.solid
  ),
  borderRadius: BorderRadius.circular(16), // 设置四周圆角 
),

预览

单侧圆角

borderRadius: BorderRadius.only(
  topLeft: Radius.circular(64)
),

预览

阴影（BoxShadow）

boxShadow: [
  BoxShadow(
    offset: Offset(6, 7), // 阴影的偏移量
    color: Color.fromRGBO(16, 20, 188, 1), // 阴影的颜色
    blurRadius: 5, // 阴影的模糊程度
    spreadRadius: 0, // 扩散的程度，如果设置成正数，则会扩大阴影面积；负数的话，则会缩小阴影面积
  )
],

预览

形状（shape）

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[100],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Icon(Icons.pool, size: 32, color: Colors.white,),
            padding: EdgeInsets.all(16),
            margin: EdgeInsets.all(8),
            width: 90,
            height: 90,
            decoration: BoxDecoration(
              color: Color.fromRGBO(3, 54, 255, 1),
              border: Border.all(
                color: Colors.indigoAccent[100],
                width: 3,
                style: BorderStyle.solid
              ),
//              borderRadius: BorderRadius.circular(16), // 设置四周圆角
              boxShadow: [
                BoxShadow(
                  offset: Offset(6, 7), // 阴影的偏移量
                  color: Color.fromRGBO(16, 20, 188, 1), // 阴影的颜色
                  blurRadius: 5, // 阴影的模糊程度
                  spreadRadius: 0, // 扩散的程度，如果设置成正数，则会扩大阴影面积；负数的话，则会缩小阴影面积
                )
              ],
              shape: BoxShape.circle, // 将其形状设置为圆形，但此形状不能设置圆角属性
            ),
          )
        ],
      ),
    );
  }
}

预览

渐变（gradient）

圆形渐变

gradient: RadialGradient( // 圆形渐变，从中心开始渐变
  colors: [
    Color.fromRGBO(7, 102, 255, 1),
    Color.fromRGBO(3, 28, 128, 1)
  ]
),

预览

线性渐变

gradient: LinearGradient( // 线性渐变，如果没有指定开始和结束的地方，则默认从左边到右边
  colors: [
    Color.fromRGBO(7, 102, 255, 1),
    Color.fromRGBO(3, 28, 128, 1)
  ],
  begin: Alignment.topCenter, // 开始
  end: Alignment.bottomCenter, // 结束
),

image.png

背景图像

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, // 滤镜模式
    ),
  )
),
//      color: Colors.grey[100], // 该属性为Container背景颜色，若有decoration属性，该属性可不需要

预览