如何在 Flutter Shader 中做从 topLeft 到 bottomRgiht 的渐变效果？答案

【问题标题】：How to do a Gradient effect from topLeft to botttomRgiht in Flutter Shader?如何在 Flutter Shader 中做从 topLeft 到 bottomRgiht 的渐变效果？
【发布时间】：2020-04-27 23:29:44
【问题描述】：

大家好，

我需要知道，如何创建渐变色从 topLeft 到 bottomRight 在 Flutter 中的着色器中，例如此图像中的示例 2？

我尝试使用这个迷你着色器代码来执行此操作，但它仍然不适合我。

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

任何人都可以有一个想法，这是如何创建的？或者现在在 Flutter 中也不是不可能的????‍♂️。

【问题讨论】：

检查LinearGradient构造函数的所有属性
但这是用着色器做到这一点的一种方式？
您想改变渐变的角度，对吧？如果是，请检查构造函数的属性
我找不到任何想法，在构造函数中有角度
你有两个Aligments参数

标签： flutter shader gradient linear-gradients

【解决方案1】：

您可以使用 LinearGradient 的 begin 和 end 属性。

例如：

  LinearGradient(
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
     colors: <Color>[
     Color(0xff002fff),
     Color(0xff00f4ff),
     ],
 ),

【讨论】：

【解决方案2】：

 @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)),
          ),
        ],
      )),
    );
  }

只需检查这是否有效，更改颜色即可获得所需的输出

【讨论】：

但这是用着色器做到这一点的一种方式？
你想要渐变的目的是什么，能不能简单介绍一下你的目的