[英]how to create a gradient color in elevated button in flutter?
我试图在颤动中创建一个渐变按钮,但在ElevatedButton
中,即使颜色设置为透明,那里也会显示一些阴影或其结构。
在这里,我使用DecoratedBox
应用渐变颜色有没有办法在ElevatedButton
应用渐变?
我用过的代码
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.blue,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)),
child: ElevatedButton(
onPressed: () {
// Navigator.of(context).push(MaterialPageRoute(
// builder: (BuildContext context) => RegisterScreen()));
},
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
onPrimary: Colors.transparent),
child: Text(
"Register",
style: TextManager.btnText,
)),
),
通过将高程设置为 0 已解决,但是当我单击按钮时,该内容也可见。 将初始颜色设置为透明也不起作用。
输出按钮在这里
您可以简单地使用Ink
小部件包装您的child
属性。 通过这样做,您将能够应用渐变并保持按钮的提升效果。
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0.0),
elevation: 5,
),
onPressed: () {},
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.blue, Colors.cyan]),
),
child: Container(
padding: const EdgeInsets.all(10),
constraints: const BoxConstraints(minWidth: 88.0),
child: const Text('OK', textAlign: TextAlign.center),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.