如何为容器设置两种不同的背景颜色

Question

我想要一个看起来像这样的容器：

这backGround color取决于red设备的电池电量。我希望它是动态的。

我这样尝试过：

return Container(
      child: Row(
        children: [
          Expanded(flex: 100-battery,child: SizedBox()),
          Expanded(flex: battery,child: Container(child: Text(battery.toString()+'%', style: TextStyle(fontSize: 10,),),color: Colors.green)),
        ],
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5), border: Border.all(color: Colors.white)),
    );

看起来不错，问题是与Text一侧对齐。我希望它在一侧。所以我必须指定两个background color来解决这个问题。任何想法？

Answer 1

我做得更好：

decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.centerLeft,//Starting point
          end: Alignment.centerRight,//Ending point
          stops: [0.5, 0], //First Part is the amount of space the first color has 
          //occupy and the second parameter is the space that is to be occupied by
          //mixture of both colors.
        colors: [Colors.green, Colors.amber], // List of colors
        ),