Флаттер, как рисовать собственные градиенты - PullRequest
Новая
       27

Флаттер, как рисовать собственные градиенты

0 голосов
/ 23 марта 2020

Недавно я столкнулся с проблемой, когда пытался создать следующий AppBar с градиентом.

Expected color gradient

Когда я пытался воспроизвести этот дизайн во флаттере с цвета rose = Color (0xFFec15ee), purple = Color (0xFF8561f5) и blue = Color (0xFF1eaef c) и соответственно установите свойство выравнивания, которое каким-то образом дало мне не ожидаемый результат 

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        stops: [
          0.0,
          0.05,
          1.0
        ],
        begin: Alignment.bottomLeft,
        end: Alignment.topRight
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )

d

Только представьте, что непрозрачность не будет там. Как видите, я хочу, чтобы роза была выровнена только на bottomLeft, а не расширена до topLeft, как показано в примере.

Мой вопрос, как мне это сделать. Должен быть способ сделать это в CustomPainter, но я не нашел правильный путь.

1 Ответ

1 голос
/ 23 марта 2020
Комментарий

pskinks был правильным, и я полностью пропустил эту опцию. Ключом здесь было использование выравнивания (x, y).

Вот решение моей вышеуказанной проблемы. 

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        begin: Alignment(-0.7,12),
        end: Alignment(1,-2),
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )
...