为 SsizeBox 的宽度和高度声明的像素数在多个设备上不通用

Question

下面是一个声明高度&font - family:宋体

SizedBox(width: 40, height: 40)

在某些情况下(在其他设备上)，我注意到有时维度溢出并导致错误。在我看来，我认为通过像素数声明将适用于所有设备，因为无论设备屏幕大小如何，200像素都应该是200像素。但显然我错了，所以有没有一种快速或简单的方法来修复我的错误，以确保宽度/高度在所有设备上保持通用?

使用MediaQuery.of(context).size的问题。宽度是在某些情况下，当你有一个宽屏幕或当用户倾斜手机在横向视图，使用MediaQuery会使宽度或高度太长& &;不能通过审美测试。

谢谢你的帮助!

Answer 1

考虑使用FractionallySizedBox设置所有屏幕的宽度/高度的百分比:

FractionallySizedBox(
heightFactor: 0.2, // will take 20% of the screen height.
widthFactor: 0.4, // will take 40% of the screen width.
);

Answer 2

如果你想为每个屏幕大小创建一个条件，但避免混乱的代码。你应该试着用一个扩展来完成它。

例如:

extension BoxWithSizes on double {

double get conditional {
return (//size of screen < 600) ? this : this - 30;
}
}

像

一样使用

SizedBox(width: 30.conditional)

你应该像在CSS中那样，为不同的组件使用不同的getter扩展