我正在尝试重新创建一个类似于下图所示的按钮。但是,我无法在其后面添加微弱的阴影。
这是我要实现的目标:
这是我的按钮外观:
这是我的代码:
Container(
height: 45,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFFF8C3B),
Color(0xFFFF6365),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: const BorderRadius.all(
Radius.circular(25.0),
),
),
child: Center(
child: GestureDetector(
onTap: () {},
child: Text(
'Create Account',
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: "Netflix",
fontWeight: FontWeight.w600,
fontSize: 18,
letterSpacing: 0.0,
color: Colors.white,
),
),
),
),
),
最佳答案
您可以在Container
中添加一个粉红色的阴影:
Container(
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(255, 143, 158, 1),
Color.fromRGBO(255, 188, 143, 1),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: const BorderRadius.all(
Radius.circular(25.0),
),
boxShadow: [
BoxShadow(
color: Colors.pink.withOpacity(0.2),
spreadRadius: 4,
blurRadius: 10,
offset: Offset(0, 3),
)
]
),
child: Center(
child: GestureDetector(
onTap: () {},
child: Text(
'Create Account',
textAlign: TextAlign.left,
style: TextStyle(
fontFamily: "Netflix",
fontWeight: FontWeight.w600,
fontSize: 18,
letterSpacing: 0.0,
color: Colors.white,
),
),
),
),
),
注意:我还更改了渐变颜色以使其看起来更像图片。结果:
关于flutter - 如何在Flutter中的按钮周围添加阴影?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/63315052/