Flutter Dart 2.19.6中RaisedButton报错且保存按钮无法滑入

1. Undefined name 'RaisedButton' 报错解决 #

RaisedButton在Flutter 2.0版本后已被废弃，官方推荐使用ElevatedButton替代，但替换时需注意参数配置逻辑的变化：

• 原color属性需移至style中的backgroundColor
• 原textColor属性需移至style中的foregroundColor
• 所有样式配置需通过ElevatedButton.styleFrom统一设置

2. 保存按钮无法滑入的问题解决 #

按钮滑入失效的核心原因是ElevatedButton自带默认最小宽度约束，当AnimatedContainer宽度设为0时，按钮不会跟随容器收缩，导致动画无法触发。需要通过取消按钮的最小宽度约束，同时优化布局逻辑来解决。

修正后的完整代码 #

AnimatedContainer(
  margin: EdgeInsets.only(left: 10),
  duration: Duration(milliseconds: 200),
  width: isDirty ? 100 : 0,
  height: 42,
  curve: Curves.decelerate,
  child: isDirty
      ? ElevatedButton.icon(
          style: ElevatedButton.styleFrom(
            backgroundColor: Theme.of(context).primaryColor,
            foregroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(100),
                bottomLeft: Radius.circular(100),
              ),
            ),
            minimumSize: Size(0, 42), // 强制最小宽度为0，跟随容器宽度变化
          ),
          icon: Icon(Icons.done),
          label: Text(
            getTranslated(context, 'SAVE'),
            style: TextStyle(letterSpacing: 1),
          ),
          onPressed: handleSave,
        )
      : null,
)

关键修改点说明 #

• 用ElevatedButton.icon替换RaisedButton.icon，通过styleFrom统一配置样式
• 添加minimumSize: Size(0, 42)，取消按钮默认最小宽度约束，确保能随容器收缩
• 增加条件渲染isDirty ? ... : null，避免宽度为0时按钮仍占用布局空间

内容的提问来源于stack exchange，提问作者Coding Mwale