我如何在产品卡片上方设计

问题描述

如何对下面的产品卡进行编码，使其对所有设备都具有响应性？

解决方法

您可以使用Column来垂直对齐图像，折扣和价格。您可以将图像用作第一个DecorationImage的{​​{1}}。为了获得折扣，您可以使用Container，其y轴偏移为FractionalTranslation，以将其上半部的尺寸定位。您可以执行相同的操作以将价格定位在较高位置。

-0.5

结果：

,

• 制作背景图像容器和折扣百分比 容器的子容器堆栈。
• 将BoxDecoration添加到带有borderRadius的背景图像容器中 属性。
• 使背景图像容器的宽度等于宽度 从MediaQuery获得的设备的数量。
• 使用“定位的”小部件来显示折扣百分比指标 到底部中心。

这可确保设备对任何设备尺寸保持响应