[英]how to create stacked bar/progress bar in flutter like this image
这是您想要的小部件生成器。 也许 MediaQuery 是一个糟糕的选择。 但您可以使用任何其他尺寸选项。
Widget _buildProgress(BuildContext context, int progress, int limit) {
return SizedBox(
height: 30,
width: double.infinity,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
color: Color(0xFF038918),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 20),
child: Text(
'$limit',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
Container(
width: MediaQuery.of(context).size.width / limit * progress,
decoration: const BoxDecoration(
color: Color(0xFFe40808),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
alignment: Alignment.center,
child: Text(
'$progress',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.