Блог

Я хочу, чтобы контейнер выглядел следующим образом:

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 , чтобы решить эту проблему. Есть идеи?

Я сделал это лучше:

 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
        ),
  

Используйте gradient параметр BoxDecoration

Вы можете использовать один из трех градиентов

• Lineargradient
• 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)),
          ],
        ),
      ),
    ),
  

Узнайте больше об использовании gradients из https://api.flutter.dev/flutter/painting/Gradient-class.html