有没有办法将 ElevatedButton
的背景颜色更改为渐变色?
有没有办法将 ElevatedButton
的背景颜色更改为渐变色?
Ink
小部件以保留渐变的涟漪能力):RaisedButton(
onPressed: () { },
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
padding: const EdgeInsets.all(0.0),
child: Ink(
decoration: const BoxDecoration(
gradient: myGradient,
borderRadius: BorderRadius.all(Radius.circular(80.0)),
),
child: Container(
constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // min sizes for Material buttons
alignment: Alignment.center,
child: const Text(
'OK',
textAlign: TextAlign.center,
),
),
),
)
MaterialButton
上使用了这个解决方案,它完美地工作了! - jux_97class RaisedGradientButton extends StatelessWidget {
final Widget child;
final Gradient gradient;
final double width;
final double height;
final Function onPressed;
const RaisedGradientButton({
Key key,
@required this.child,
this.gradient,
this.width = double.infinity,
this.height = 50.0,
this.onPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: 50.0,
decoration: BoxDecoration(gradient: gradient, boxShadow: [
BoxShadow(
color: Colors.grey[500],
offset: Offset(0.0, 1.5),
blurRadius: 1.5,
),
]),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
child: Center(
child: child,
)),
),
);
}
}
并且可以在任何地方按以下方式使用:
RaisedGradientButton(
child: Text(
'Button',
style: TextStyle(color: Colors.white),
),
gradient: LinearGradient(
colors: <Color>[Colors.green, Colors.black],
),
onPressed: (){
print('button clicked');
}
),
您可以通过编辑容器的装饰属性来进一步调整阴影和圆角边框,直到它符合您的规格。
由于RaisedButton
和OutlineButton
已被弃用,您应该使用ElevatedButton
和OutlinedButton
。
ElevatedButton
Container(
height: 44.0,
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.pink, Colors.green])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(backgroundColor: Colors.transparent, shadowColor: Colors.transparent),
child: Text('Elevated Button'),
),
)
OutlinedButton
创建一个类(空安全):
class MyOutlinedButton extends StatelessWidget {
final VoidCallback onPressed;
final Widget child;
final ButtonStyle? style;
final Gradient? gradient;
final double thickness;
const MyOutlinedButton({
super.key,
required this.onPressed,
required this.child,
this.style,
this.gradient,
this.thickness = 2,
});
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(gradient: gradient),
child: Container(
color: Colors.white,
margin: EdgeInsets.all(thickness),
child: OutlinedButton(
onPressed: onPressed,
style: style,
child: child,
),
),
);
}
}
用法:
MyOutlinedButton(
onPressed: () {},
gradient: LinearGradient(colors: [Colors.indigo, Colors.pink]),
child: Text('OutlinedButton'),
)
ElevatedButton.styleFrom(primary: Colors.transparent, elevation: 0,),
- Sam Doggettprimary
属性自v3.1.0版本起已被弃用。为了实现透明度并去除阴影,需要像你提到的那样同时添加backgroundColor: Colors.transparent
和elevation: 0
。最终代码:ElevatedButton.styleFrom(backgroundColor: Colors.transparent, elevation: 0,)
。 - undefined请参考以下内容 -
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
borderRadius: BorderRadius.all(Radius.circular(80.0))
),
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: const Text(
'Gradient Button',
style: TextStyle(fontSize: 20)
),
),
)
RaisedButton
- 请查看此处https://api.flutter.dev/flutter/material/RaisedButton-class.html。Widget gradientButton = Container(
child: RaisedButton(
onPressed: () { },
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
width: 300,
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [
Color.fromARGB(255, 148, 231, 225),
Color.fromARGB(255, 62, 182, 226)
],
)
),
padding: const EdgeInsets.all(10.0),
child: Text(
"Gradient Button",
textAlign: TextAlign.center,
),
),
),
);
只需创建一个子容器,设置该容器的装饰,并按需设置渐变颜色
然后,在此之后使用 RaisedButton 作为上述容器的子元素 与 MaterialButton 相同
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: FractionalOffset(0.0, 0.0),
end: FractionalOffset(0.5, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
child: RaisedButton(
color: Colors.transparent,
child: Text("Ask Permssion"),
onPressed: () {
askPermission();
},
)),
Output:
文档的最后一个例子 https://api.flutter.dev/flutter/material/RaisedButton-class.html
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
),
padding: const EdgeInsets.all(10.0),
child: const Text(
'Gradient Button',
style: TextStyle(fontSize: 20)
),
),
);
material.dart
中的 RawMaterialButton
更轻松地处理,你也可以将其形状设置为圆角或圆形。这里是一个简单的示例。 Card(
elevation: 7,
child: Container(
width: 120.0,
height: 75.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: <Color>[
Colors.blue,
Colors.red,
],
),
),
child: RawMaterialButton(
onPressed: () {},
splashColor: Colors.grey,
child: Text(
"Button",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
),
),
这是对我有用的方法。RaisedButton已被弃用,我使用ElevatedButton。所以这应该是正确的做法。
import 'package:flutter/material.dart';
class MainButton extends StatelessWidget {
final Widget thechild;
final double width;
final double height;
final Function theaction;
const MainButton({
Key key,
@required this.thechild,
this.width = double.infinity,
this.height = 50.0,
this.theaction,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: theaction,
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
elevation: 4.0,
minimumSize: Size(88.0, 45.0),
padding: const EdgeInsets.all(0.0),
),
child: Ink(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.1,
0.8,
0.9
],
colors: [
Color.fromARGB(255, 186, 252, 244),
Color.fromARGB(255, 55, 183, 230),
Color.fromARGB(255, 49, 175, 230),
]),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child: Container(
constraints: const BoxConstraints(minWidth: 88.0, minHeight: 45.0),
alignment: Alignment.center,
child: thechild,
),
),
);
}
}
使用方法
首先导入
import '../widgets/mainButton.dart';
然后
MainButton(
thechild: Text(AppLocalization.translate('loginbtn'),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20)),
theaction: () {},
),