flutter - Flutter-在图像上添加进度条或形状

Question

我想制作一个小部件，可以在其中添加进度条或图像中的形状。
如附件所示，
我将图像和形状包裹在Stack小部件内，但是当屏幕尺寸改变时，小部件的位置也随之改变
有什么办法可以做到这一点？

Answer 1

您可以将图像设置为Container的装饰图像。然后，您可以将FractionallySizedBox用作应放置在图像内部的项目，并将此小部件设置为Container的子级。您还可以使用Flex并将文本和形状(图像中的项目)设置为其子元素。

Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(
                  'https://images.vexels.com/media/users/3/151609/isolated/preview/1e5e087078b86c2491300c61ce46c48c-canning-jar-stroke-icon-by-vexels.png'),
              fit: BoxFit.cover),
        ),
        child: Padding(
          padding: const EdgeInsets.only(bottom: 8),
          child: Align(
            alignment: Alignment.bottomCenter,
            child: FractionallySizedBox(
                heightFactor: 0.6,
                widthFactor: 0.6,
                child: Flex(
                  direction: Axis.vertical,
                  children: <Widget>[
                    Flexible(
                      flex: 2,
                      child: Container(
                          child: Text(
                        '50%',
                        style: TextStyle(fontSize: 24),
                      )),
                    ),
                    Flexible(
                      flex: 8,
                      child: Container(
                        child: Image.network(
                            'https://images.vexels.com/media/users/3/129171/isolated/preview/c3746ad76845f55dda5e6a0d1c81d32a-3-stack-coins-icon-by-vexels.png'),
                      ),
                    ),
                  ],
                )),
          ),
        ),
      ),

结果: