如何在Flutter Shader中从topLeft到botttomRgiht进行渐变效果?

问题描述 投票:0回答:1

大家好,

我需要知道,如何创建渐变色从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));

任何人都可以拥有一个想法,如何创建它?或现在在Flutter 🤷‍♂️中并不是不可能。

flutter shader gradient linear-gradients
1个回答
0
投票
 @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)),
          ),
        ],
      )),
    );
  }

只需检查是否可行,更改颜色即可获得所需的输出

© www.soinside.com 2019 - 2024. All rights reserved.