如何在 flutter 中设计上述产品卡

Question

如何在 flutter 中对以下产品卡进行编码并使其响应所有设备？

Answer 1

您可以使用 aColumn垂直对齐图像、折扣和价格。您可以使用该图像作为DecorationImage第一个Container. 为了获得折扣，您可以使用FractionalTranslationy 轴偏移量为 的a-0.5将其定位到其尺寸的一半上方。您可以执行相同的操作来将价格定位在较高位置。

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
              height: 300,
              width: 300,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://cf.shopee.ph/file/6907c52b5698df501bf2fd83e803d6d2')))),
          FractionalTranslation(
            translation: Offset(0, -0.5),
            child: Container(
              width: 160,
              height: 70,
              child: Center(
                  child: Text(
                '-99%',
                style: TextStyle(
                    fontSize: 24,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              )),
              decoration: BoxDecoration(
                  color: Colors.redAccent,
                  borderRadius: BorderRadius.circular(50),
                  border: Border.all(width: 5, color: Colors.white)),
            ),
          ),
          FractionalTranslation(
            translation: Offset(0, -1),
            child: Text(
              'US \$0.01',
              style: TextStyle(
                  color: Colors.redAccent,
                  fontWeight: FontWeight.bold,
                  fontSize: 28),
            ),
          ),
        ],
      ),

结果：