如何制作带有渐变背景的高架按钮？
我正在尝试创建一个带有渐变背景的 Elevated 按钮，但是它提供了一些不太适合它的参数，您是否知道在 Flutter 2.0 版本之后，大多数 Button 类已被弃用，例如 Raised Button、Flat Button、. .. 等等
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
onSurface: Colors.grey,
),
onPressed: () {
print('Pressed');
},
)
无论如何要创建ElevatedButton渐变背景？
回答
输出：
代码：
DecoratedBox(
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.red, Colors.blue])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.transparent),
child: Text('Elevated Button'),
),
)
回答
import 'package:flutter/material.dart';
class RoundedButtonWidget extends StatelessWidget {
final String buttonText;
final double width;
final Function onpressed;
RoundedButtonWidget({
required this.buttonText,
required this.width,
required this.onpressed,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26, offset: Offset(0, 4), blurRadius: 5.0)
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 1.0],
colors: [
Colors.deepPurple.shade400,
Colors.deepPurple.shade200,
],
),
color: Colors.deepPurple.shade300,
borderRadius: BorderRadius.circular(20),
),
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
minimumSize: MaterialStateProperty.all(Size(width, 50)),
backgroundColor:
MaterialStateProperty.all(Colors.transparent),
// elevation: MaterialStateProperty.all(3),
shadowColor:
MaterialStateProperty.all(Colors.transparent),
),
onPressed: () {
onpressed();
},
child: Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Text(
buttonText,
style: TextStyle(
fontSize: 18,
// fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
),
);
}
}