Как сделать эффект градиента от topLeft до bottomRgiht в Flutter Shader? - PullRequest
Новая
       68

Как сделать эффект градиента от topLeft до bottomRgiht в Flutter Shader?

1 голос
/ 10 января 2020

Привет всем,

Мне нужно знать, как я могу создать градиентные цвета от topLeft до bottomRight с шейдером в флаттере, как в примере 2 на этом изображении?

enter image description here

Я пытался с этим мини-шейдерным кодом сделать это, но он все еще не работает для меня. 

final Shader linearGradient = LinearGradient(
      colors: <Color>[
        Color(0xff002fff),
        Color(0xff00f4ff),
      ],
    ).createShader(Rect.fromCircle(center: Offset(200, 0), radius: 150));

Может кто-нибудь иметь Идея, как это может быть создано? Или это сейчас невозможно во Флаттере ?‍♂️.

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Вы можете использовать начальные и конечные свойства LinearGradient.

Пример: 

  LinearGradient(
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
     colors: <Color>[
     Color(0xff002fff),
     Color(0xff00f4ff),
     ],
 ),
2 голосов
/ 10 января 2020 
 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        children: <Widget>[

          Container(
            width: 200,
            height: 200,
            decoration: new BoxDecoration(
                gradient: new LinearGradient(
                    colors: [Color(0xFF11F4B5), Color(0xFFCA436B)],
                    begin: FractionalOffset.centerLeft,
                    end: FractionalOffset.centerRight,
                    stops: [0.0, 1.0],
                    tileMode: TileMode.clamp)),
          ),
          SizedBox(
            height: 20,
          ),


          Container(

            width: 200,
            height: 200,
            decoration: new BoxDecoration(
                gradient: new LinearGradient(
                    colors: [Color(0xFF1cb5e1), Color(0xFF000046),Color(0xFF000000)],
                    begin: FractionalOffset.topLeft,
                    end: FractionalOffset.bottomRight,
                    stops: [0.0, 1.0],
                    tileMode: TileMode.mirror)),
          ),
        ],
      )),
    );
  }

просто проверьте, работает ли это, изменение цвета даст вам желаемый результат

...