Flutter中的MaterialButton不能使用全局主题颜色的真正原因

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为啥这样做!感觉这样一点都不方便。
解决办法

  1. 老老实实使用color字段来手动设置成跟主题颜色一样的
  2. 使用自定义Button
  3. 使用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版权协议,转载请附上原文出处链接和本声明。