LinearGradient button figma to flutter - css

Question

My CSS:
background: linear-gradient(91.97deg, #F8A170 14.73%, #FFCD61 97.52%);
border-radius: 10px;
I want to go with flutter but when I give these colors to the container widget with child elevated button, I can't get the result I want. I made the button style transparent, but still I couldn't solve it.

Answer 1

Based on your image and css, You can simply decorate the style of ElevatedButton.
DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(
colors: [
Color(0xFFF8A170),
Color(0xFFFFCD61),
],
),
),
child: SizedBox(
width: 400,
height: 75,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
primary: Colors.white.withOpacity(0),
padding: const EdgeInsets.all(0),
),
onPressed: () {},
child: const Text(
"Search a room",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22,
),
),
),
),
),
More about
DecoratedBox and ElevatedButton

Answer 2

Please refer to below example code
Using Elevated Button
LinearGradient yellowLinearGradientValues() {
return LinearGradient(
colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.65)],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
elevation: 0.0,
padding: EdgeInsets.zero,
primary: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
side: BorderSide(
width: 0.0,
color: Colors.orange,
style: BorderStyle.none,
),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
gradient: yellowLinearGradientValues(),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 8.0,
),
child: Text(
"Search a Room" ?? "",
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
),
),
),
),
);
}
LinearGradient yellowLinearGradientValues() {
return LinearGradient(
colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.7)],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.transparent),
elevation: MaterialStateProperty.all(0.0),
padding: MaterialStateProperty.all(EdgeInsets.zero),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
gradient: yellowLinearGradientValues(),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 8.0,
),
child: Text(
"Search a Room" ?? "",
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
),
),
),
),
);
}