Flutter中RaisedButton迁移为ElevatedButton的样式代码编写方法

以下是完全对应原有RaisedButton效果的ElevatedButton.icon实现代码：

child: ElevatedButton.icon(
  icon: Padding(
    padding: options.iconPadding ?? EdgeInsets.zero,
    child: icon ??
        FaIcon(
          iconData,
          size: options.iconSize,
          color: options.iconColor ?? options.textStyle.color,
        ),
  ),
  label: textWidget,
  onPressed: onPressed,
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(options.borderRadius),
      side: options.borderSide ?? BorderSide.none,
    ),
    backgroundColor: options.color,
    foregroundColor: options.textStyle.color,
    disabledBackgroundColor: options.disabledColor,
    disabledForegroundColor: options.disabledTextColor,
    elevation: options.elevation,
    // 配置水波纹效果
    overlayColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return options.splashColor;
      }
      return null;
    }),
  ),
)

核心属性对应说明 #

• Flutter 2.0之后废弃了旧的RaisedButton系列组件，所有按钮样式属性统一收敛到style参数中配置，使用ElevatedButton.styleFrom可以快速生成样式配置，避免手动写大量MaterialStateProperty模板代码
• 原color参数对应新的backgroundColor，原textColor参数对应新的foregroundColor
• 原disabledColor对应disabledBackgroundColor，原disabledTextColor对应disabledForegroundColor
• 原colorBrightness参数无需再手动传入，ElevatedButton会自动根据背景色估算亮度调整内置交互效果
• 原splashColor水波纹色需要通过overlayColor结合组件交互状态配置，上述代码已经实现按下时显示指定水波纹色的效果，和原有逻辑完全一致

内容的提问来源于stack exchange，提问作者Moreno Kerman