Flutter中的MaterialButton不能使用全局主题颜色的真正原因
最近在使用flutter开发项目时遇到的问题,
在页面中想设置下按钮的宽度,首先想到的是RaisedButton,主要是有阴影,并且官方推荐的,但是不能设置宽度和高度,然后选用其父类MaterialButton,可以使用minWidth这个属性,也有阴影等效果,但是新的问题,我设置的全局主题中的button颜色,不能应用在这个button上面,这应该也是官方不推荐的原因吧,
通过看源码发现其真正原因了
class MaterialButton extends StatelessWidget {
/// Creates a material button.
///
/// Rather than creating a material button directly, consider using
/// [FlatButton] or [RaisedButton]. To create a custom Material button
/// consider using [RawMaterialButton].
1,上面这段话,说明,
如果你是创建一个material主题的button,最好使用FlatButton和RaisedButton,
如果创建一个自定义的button,最好使用RawMaterialButton
2,MaterialButton由RawMaterialButton(无主题Button)构建的,
然后看到
return RawMaterialButton(
...
fillColor: buttonTheme.getFillColor(this),//fillColor就是这个按钮的背景颜色,
...
),
3,又进入这个方法。
Color getFillColor(MaterialButton button) {
//先获取到自身button的颜色
final Color fillColor = button.enabled ? button.color : button.disabledColor;
//这里因为没有设置color,所以fillColor 会报空
if (fillColor != null)
return fillColor;
//会走这个方法,而这个button的运行时又是MaterialButton,最后返回null,就是说背景颜色为null。
if (button is FlatButton || button is OutlineButton || button.runtimeType == MaterialButton)
return null;
...
}
最后结论:当button想用全局主题中的颜色时,必须使用RaisedButton,而像FlatButton和OutLineButton都不能使用全局主题颜色。目前还不知道google为啥这样做!感觉这样一点都不方便。
解决办法:
- 老老实实使用color字段来手动设置成跟主题颜色一样的
- 使用自定义Button
- 使用RaisedButton,在主题中设置宽度和高度,
static ThemeData themeData = new ThemeData(
// brightness: Brightness.dark,//?
primarySwatch: Colors.red,
primaryColor: Colors.red,
buttonColor: Colors.red,
disabledColor: Colors.blue,
buttonTheme: ButtonThemeData(
buttonColor: Colors.red,
minWidth: 130,//设置宽度,这样的话,就时全局统一的样式了,
)
);
如果自定义button,了解下RawMaterialButton的属性
参考博客:
Flutter RaisedButton、FlatButton、OutlineButton 参数详解
Flutter控件–MaterialButton、RaisedButton、FlatButton、IconButton 和 PopupMenuButton
本人才疏学浅,有啥不正确的地方,请大神不吝指教!
版权声明:本文为u014627313原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。