Flutter 中根据屏幕尺寸动态调整大小

Question

我正在从我为其制作模板的第三方工具切换到 Flutter，以独立于该第三方工具。

我的屏幕上有很多图标、一些同步融合仪表和文本，现在我已经到了第一部分所有元素都在那里的地步，并且在 Google Pixel 内测试时处于我满意的位置模拟器。

然后我意识到，当在物理平板电脑上尝试它或在浏览器中测试它并调整窗口大小时，事情开始变得奇怪（当然有点预期）

我尝试在 ChatGPT 的帮助下实现动态调整大小，最终使用了 SizedBoxes、Flexibles 和 Containers 中的大量包装以及屏幕尺寸计算，这些计算起来有点痛苦，特别是因为每个该死的元素都需要一个不同的因素，最终看起来像这样进行尺寸计算：

double screenWidth = constraints.maxWidth;
double screenHeight = constraints.maxHeight;

double factor = 15;

double areaFactor = screenWidth * screenHeight / 1000000;

double fontSizeCenterLarge = areaFactor * 35;
double fontSizeCenterMedium = areaFactor * 25;
double fontSizeCenterSmall = areaFactor * 12;

double gaugeCenterSize = areaFactor * factor;
double gaugeIconSize = gaugeCenterSize * 2;
double fontSizeGaugeLarge = areaFactor * factor;
double fontSizeGaugeMedium = areaFactor * factor;
double fontSizeGaugeSmall = areaFactor * factor;
double gaugeLabelOffsetLarge = areaFactor * factor;
double gaugeLabelOffsetMedium = areaFactor * factor;
double gaugeLabelOffsetSmall = areaFactor * factor;

例如，一个元素看起来像这样：

Container(
  width: gaugeCenterSize * 9.2,
  height: gaugeCenterSize * 9.2,
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      begin: Alignment.bottomCenter,
      end: Alignment.topCenter,
      colors: [
        Colors.black87,
        Colors.white30
      ],
      stops: [0.0, 1.0],
    ),
  ),
),

这个：

SizedBox(
  width: gaugeIconSize,
  height: gaugeIconSize,
  child: Image.asset(
  ccEngaged
    ? 'assets/images/ccon.png'
    : 'assets/images/ccoff.png',
  fit: BoxFit.contain,
  ),
),

或者像这样：

Flexible(
  fit: FlexFit.loose,
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
      gear.toString(),
      style: TextStyle(
        fontSize: fontSizeCenterMedium,
        color: Colors.white,
        fontFamily: 'Prime',
      ),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ),
  ),
),

我认为这些会根据屏幕大小按比例调整元素大小，但它们没有，它们甚至在某些情况下移动并且文本开始剪切到不可见的边框中。我真的希望东西能够在任何平台上按比例正确移动和调整大小，因为这计划在桌面/网络和移动设备上使用。

还感觉会有一种更简单的方法或某种东西可以更好地控制调整大小时事物的实际行为，但我（还）不知道

Answer 1

你可以使用flutter_screenutils来代替，它是完美的。