我希望容器看起来像这样:
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
来解决这个问题。任何的想法?
最佳答案
使用gradient
的BoxDecoration
参数
您可以使用三个渐变之一
以这个为例
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
的更多信息
关于flutter - 如何为容器使用两种不同的背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63435684/