Flutter如何修改AnimatedContainer进度条的绘制方向为从右往左

当然可以实现从右往左绘制的进度条，给你两种简单实用的方案：

方案1：通过Align对齐右侧实现 #

直接把AnimatedContainer嵌套在Align组件中，设置对齐方式为右侧，这样进度条宽度增加时会自然从右向左扩展，完全保留原有进度计算和动画逻辑：

SizedBox(
  height: 20,
  child: Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: AnimatedContainer(
          width: MediaQuery.of(context).size.width / 100 * perc,
          color: Colors.green,
          duration: const Duration(milliseconds: 500),
        ),
      ),
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: const [
          Text('text1'),
          Text('text2'),
        ],
      ),
    ],
  ),
);

方案2：利用Transform翻转水平轴 #

通过Transform组件对进度条做水平镜像翻转，同时调整对齐位置，也能达到从右往左绘制的效果：

SizedBox(
  height: 20,
  child: Stack(
    children: [
      Transform(
        transform: Matrix4.identity()..scale(-1, 1),
        alignment: Alignment.centerRight,
        child: AnimatedContainer(
          width: MediaQuery.of(context).size.width / 100 * perc,
          color: Colors.green,
          duration: const Duration(milliseconds: 500),
        ),
      ),
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: const [
          Text('text1'),
          Text('text2'),
        ],
      ),
    ],
  ),
);

两种方案都能完美适配你的现有代码结构，推荐优先用方案1，逻辑更直观，不会有翻转带来的潜在布局偏移问题。

内容的提问来源于stack exchange，提问作者David