flutter 装饰盒子,边框,圆角,阴影,形状,渐变,背景

class mydemo extends StatelessWidget {
  // const mydemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      //color: Colors.red,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(
                  'https://scpic2.chinaz.net/Files/pic/pic9/202205/apic41182_s.jpg'),
              alignment: Alignment.topCenter,
              repeat: ImageRepeat.repeat,
              fit: BoxFit.cover,
              colorFilter: ColorFilter.mode(
                  Colors.indigoAccent.withOpacity(0.5), BlendMode.hardLight))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
              child: Icon(Icons.pool, size: 32.0, color: Colors.white),
              //color: Color.fromRGBO(3, 54, 255, 1.0),
              //padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(8.0),
              width: 90.0,
              height: 90.0,
              decoration: BoxDecoration(
                  color: Color.fromRGBO(3, 54, 255, 1.0),
                  //borderRadius: BorderRadius.circular(16.0),
                  // borderRadius: BorderRadius.only(
                  //     topLeft: Radius.circular(18.0),
                  //     bottomLeft: Radius.circular(18.0)),
                  border: Border.all(
                    color: Colors.white,
                    width: 1.0,
                  ),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(5.0, 5.0),
                      color: Colors.blueAccent,
                      blurRadius: 2.0, //模糊程度
                      spreadRadius: 2.0, //扩散,整数变大
                    )
                  ],
                  shape: BoxShape.circle, //不能与borderRadius同时存在
                  gradient:
                      //RadialGradient(colors: [Colors.green, Colors.white]), //镜像渐变
                      LinearGradient(
                          colors: [Colors.green, Colors.white],
                          begin: Alignment.topCenter) //线性渐变
                  ))
        ],
      ),
    );
  }
}

  

posted @ 2023-08-31 07:24  小小强学习网  阅读(140)  评论(0)    收藏  举报