Как создать линейный градиент с 45 градусов во флаттере?

Question

Не могу понять, как действовать в градусах LinearGradient.У меня есть следующий код:

Container(
        height: 100.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          gradient: LinearGradient(begin: FractionalOffset.topLeft, end: FractionalOffset.bottomRight, colors: [
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),
          ], stops: [
            0.0,
            0.3,
            0.3,
            0.7,
            0.7,
            1.0
          ]),
        ),
      );

Но .topLeft и '.bottomRight' не делают этого, что требуется.Картинка ниже показывает, что я хочу получить.(Изображение имеет смещение, и оно не соответствует [0,0, 0,3, 0,3, 0,7, 0,7, 1,0], потому что это только пример)

Answer 1

Если вы хотите использовать градиент по углам, лучше использовать SweepGradient .Вы можете играть с center , startAngle и endAngle .Вот решение, которое вы ищете:

BoxDecoration(
        gradient: SweepGradient(
          center: AlignmentDirectional(1, -1),
          startAngle: 1.7,
          endAngle: 3
          ,
          colors: const <Color>[
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),              ],
          stops: const <double>[0.0,0.3,0.3,0.7,0.7,1.0]),),

Вот очень простой пример для всех, кто хочет понять и поиграть с Градиент и Углы :

 Container(
      height: 400,
      decoration: BoxDecoration(
        gradient: SweepGradient(
          center: FractionalOffset.topRight,
          startAngle: 2,
          endAngle: 5
          ,
          colors: const <Color>[
            Colors.red, // blue
            Colors.blue 
          ],
          stops: const <double>[0.0, 0.5],
        ),
      ),
    ),

Answer 2

Попробуйте использовать следующие значения:

 LinearGradient(
          begin: Alignment(-1.0, -2.0),
          end: Alignment(1.0, 2.0),

Или событие лучше

   LinearGradient(
          begin: Alignment(-1.0, -4.0),
          end: Alignment(1.0, 4.0),

Y: описание параметра

Доля расстояния в вертикальном направлении.
Значение -1,0 соответствует верхнему краю.Значение 1,0
соответствует нижнему краю.Значения не ограничены этим диапазоном; значения
/// меньше -1,0 представляют позиции над верхом, а значения /// больше 1,0 представляют позиции ниже дна.