需要的效果:1 有边框,白色的,但是右边的边框并没有显示。2 底部蓝色的阴影,不只是底部有阴影,内容下面也有淡淡的阴影。
实现效果
代码(主要就是堆叠➕渐变)
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
)
),
),
),
],
),
)