最佳答案
您可以将图像设置为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'),
),
),
],
)),
),
),
),
结果:关于flutter - Flutter-在图像上添加进度条或形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63343738/