I am trying to create an Elevated button with gradient background, But it provides some parameters that do not fit it well, and May you know that after Flutter 2.0 version most of the Button classes have been deprecated such as Raised Button, Flat Button, ... etc
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
onSurface: Colors.grey,
),
onPressed: () {
print('Pressed');
},
)
Is there anyway to create ElevatedButton
with gradient background?
Create this class (customizable)
class MyElevatedButton extends StatelessWidget {
final BorderRadiusGeometry? borderRadius;
final double? width;
final double height;
final Gradient gradient;
final VoidCallback? onPressed;
final Widget child;
const MyElevatedButton({
Key? key,
required this.onPressed,
required this.child,
this.borderRadius,
this.width,
this.height = 44.0,
this.gradient = const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
}) : super(key: key);
@override
Widget build(BuildContext context) {
final borderRadius = this.borderRadius ?? BorderRadius.circular(0);
return Container(
width: width,
height: height,
decoration: BoxDecoration(
gradient: gradient,
borderRadius: borderRadius,
),
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(borderRadius: borderRadius),
),
child: child,
),
);
}
}
Usage:
Use it like a regular ElevatedButton
:
MyElevatedButton(
width: double.infinity,
onPressed: () {},
borderRadius: BorderRadius.circular(20),
child: Text('SIGN IN'),
)