flutter - 如何为容器使用两种不同的背景色

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

使用gradient的BoxDecoration参数
您可以使用三个渐变之一

线性渐变

RadialGradient

SweepGradient

以这个为例

 Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment.center,
          colors: [const Color(0xFF283250), const Color(0xFF0C1225)],
          tileMode: TileMode.clamp,
        ),
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: Colors.white),
      ),
      child: Container(
        alignment: Alignment.center,
        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)),
          ],
        ),
      ),
    ),

从 https://api.flutter.dev/flutter/painting/Gradient-class.html了解有关使用 gradients的更多信息