I am trying to re-create a button similar to what is given in the picture below. However I am unable to add the faint shadow behind it.
This is what I'm trying to achieve:
This is what my button looks like:
This is my code:
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,
),
),
),
),
),
You can add a pink shadow to the 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,
),
),
),
),
),
Note: I also changed the gradient colors to make it look more like the picture.
Result:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With