flutter - FractionallySizedBox 在 Flutter 中具有最大尺寸

Question

我有这个小部件，在屏幕中间显示一个球:

FractionallySizedBox(
        widthFactor: 0.5,
        child: Container(
          decoration: new BoxDecoration(
            color: Helpers.hexToColor(color),
            border: new Border.all(
              color: Colors.white,
              width: 5.0,
            ),
            shape: BoxShape.circle,
          ),

对于移动设备，我将其显示为宽度的 50%，这很酷，但对于平板电脑则不然。在这里，我想设置最大 XXXpx 以避免在大平板电脑中出现巨大的球。

我可以这样做:宽度因子:getSize()

和:

double getSize() {
 final width = MediaQuery.of(context).size.width;
 if (width  > 500) {
   return 0.2;
 }
 // other checks
 ...
 return 0.5; // the default one
}

但我想知道是否有更简单的小部件

Answer 1

用 ConstrainedBox 包裹你的 FractionallySizedBox

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 50), // max height in px
  child: FractionallySizedBox(
    widthFactor: 0.5,
    child: Container(
      decoration: BoxDecoration(
        color: Helpers.hexToColor(color),
        border: Border.all(
          color: Colors.white,
          width: 5.0,
        ),
        shape: BoxShape.circle,
      ),
    ),
  ),
),