Flutter自定义ElevatedButton抛出BoxConstraints负最小宽度异常求助

我在项目中使用Stateless Widget封装ElevatedButton，将参数传递给该按钮的构造函数，但运行项目时抛出了异常。

自定义ElevatedButtonWidget代码 #

import 'package:cashmate_fo/utility/text_style.dart';
import 'package:flutter/material.dart';

class ElevatedButtonWidget extends StatelessWidget {
  final VoidCallback? onPressed;
  Color color;
  String text;
  double width;
  double height;
  ElevatedButtonWidget({
    this.width = 0.0,
    this.height = 0.0,
    this.color = Colors.indigo,
    required this.onPressed,
    required this.text,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(
        text,
        style: textStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
        textAlign: TextAlign.center,
      ),
      style: ElevatedButton.styleFrom(
          onSurface: Colors.brown,
          primary: color,
          //padding: EdgeInsets.symmetric(horizontal: 20,vertical: 20)
          minimumSize: Size(width, height),
          side: BorderSide(width: 1.5, color: Colors.indigo.shade500),
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
    );
  }
}

异常信息 #

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building ElevatedButton(style: ButtonStyle#e56ec(textStyle: MaterialStateProperty.all(null), backgroundColor: _ElevatedButtonDefaultBackground#0293c, foregroundColor: _ElevatedButtonDefaultForeground#a3d81, minimumSize: MaterialStateProperty.all(Size(-100.0, 0.0)), side: MaterialStateProperty.all(BorderSide(Color(0xff3f51b5), 1.5, BorderStyle.solid)), shape: MaterialStateProperty.all(RoundedRectangleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none), BorderRadius.circular(10.0)))), dirty, dependencies: [MediaQuery, _InheritedTheme, _LocalizationsScope-[GlobalKey#0ae7b]], state: _ButtonStyleState#6cb82(materialStates: {})):
BoxConstraints has a negative minimum width.
The offending constraints were: BoxConstraints(-100.0<=w<=Infinity, 0.0<=h<=Infinity; NOT NORMALIZED)
The relevant error-causing widget was
ElevatedButton
lib\widgets\elevated_button_widget.dart:21
When the exception was thrown, this was the stack

解决方案 #

从异常信息能明确看到问题：你传入了负数宽度给自定义按钮的width参数，Flutter不允许BoxConstraints出现负的最小尺寸。

具体修复步骤 #

1. 修正参数合法性
   在自定义按钮的构造函数中，强制限制width和height不能为负数，避免非法值传入：

   import 'dart:math'; // 需要导入math库使用max方法
   import 'package:cashmate_fo/utility/text_style.dart';
   import 'package:flutter/material.dart';
   
   class ElevatedButtonWidget extends StatelessWidget {
     final VoidCallback? onPressed;
     final Color color;
     final String text;
     final double width;
     final double height;
   
     ElevatedButtonWidget({
       double? width,
       double? height,
       this.color = Colors.indigo,
       required this.onPressed,
       required this.text,
       Key? key,
     })  // 初始化时直接修正负数为0
         : width = width != null ? max(width, 0.0) : 0.0,
           height = height != null ? max(height, 0.0) : 0.0,
           super(key: key);
   
     // ... 其余build代码不变
   }
   

2. 排查调用处代码
   找到项目中所有使用ElevatedButtonWidget的地方，检查是否存在计算错误导致width为负数的情况（比如MediaQuery.of(context).size.width - 500这类可能超出屏幕宽度的计算），修正这些逻辑。

3. 优化尺寸逻辑（可选）
   如果希望按钮默认自适应内容，可以修改minimumSize的设置逻辑，当未传入有效尺寸时不强制设置最小尺寸：

   style: ElevatedButton.styleFrom(
     // ... 其他样式参数
     minimumSize: (width > 0 && height > 0) ? Size(width, height) : null,
   )
   

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