一起实现一个阴影效果

206 阅读1分钟
image.png

需要的效果:1 有边框,白色的,但是右边的边框并没有显示。2 底部蓝色的阴影,不只是底部有阴影,内容下面也有淡淡的阴影。

实现效果

image.png

代码(主要就是堆叠➕渐变)

Material(
  color: Color.fromARGB(255, 245, 230, 225),
  child: Stack(
    alignment: Alignment.center,
    children: [
      Container(
        width: width,
        height: height,
        padding: EdgeInsets.symmetric(vertical: borderWidth,horizontal: borderWidth),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomCenter,
                stops: [
                  0,0.1,1,
                ],
                colors: [
                  Colors.white,
                  Color.fromRGBO(255, 255, 255, 0.9),
                  Color.fromRGBO(255, 255, 255, 0.1),
                ]),
            boxShadow: [
              BoxShadow(
                  color: Color.fromARGB(255, 180, 224, 218),
                  offset: Offset(5, 10),
                  blurRadius: 50,
                  blurStyle: BlurStyle.inner
              ),
              BoxShadow(
                  color: Color.fromARGB(255, 180, 224, 218),
                  offset: Offset(5, 10),
                  blurRadius: 15,
                  blurStyle: BlurStyle.outer
              )
            ]
        ),
        child:  Container(
          width: width,
          height: height,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(45),
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomCenter,
                stops: [
                  0,0.5,1,
                ],
                colors: [
                  Color.fromRGBO(245, 230, 225, 1),
                  Color.fromRGBO(245, 230, 225, 0.9),
                  Color.fromRGBO(245, 230, 225, 0.1),
                ]),
          ),
          alignment: Alignment.center,
          child: Text("蓝牙连接稳定",
              style: TextStyle(
                  fontSize: 30,
                  color: Colors.black,
                  fontWeight: FontWeight.bold
              )
          ),
        ),
      ),
    ],
  ),
)