Flutter渐变色彩插件awesome_aurora_gradient的使用

提供了简单但强大的渐变扩展方法，可以用于Containers或DecorationImages。

开始使用

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  awesome_aurora_gradient: <latest_version>

在你的库中添加以下导入语句：

import 'package:awesome_aurora_gradient/awesome_aurora_gradient.dart';

图片展示

如何使用它

假设我们想要生成如上所示的图像。这是一个简单的实现方法：

创建一个容器并添加.asAwesomeAurora()扩展方法。

Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,    
).asAwesomeAurora();

这将生成一个随机背景。为了获取实际生成的值并在代码中使用，你可以添加debug: true，如下所示：

.asAwesomeAurora(debug: true);

然后你可以不断刷新页面直到找到你喜欢的图案。由于调试标志的存在，你可以在VSCode的调试控制台中找到配置，如下所示：

现在你有了一个最终的asAwesomeAurora对象，看起来像这样：

.asAwesomeAurora(shiftX: 100.0, shiftY: 6.713037223479337, auroraObjects: [
  AuroraObjects(color: Color(0xfe703bc9), size: 2.0, x: 0.5, y: 0.5),
  AuroraObjects(
      color: Color(0xfe15ad81),
      size: 0.20434975310185255,
      x: 0.4107773793760572,
      y: 0.7115949484263953),
  AuroraObjects(
      color: Color(0xfe7a2598),
      size: 0.05583251849162163,
      x: 0.35623824913909286,
      y: 0.9970802979115129),
  AuroraObjects(
      color: Color(0xfed77237),
      size: 0.529962871028804,
      x: 0.8965277962474901,
      y: 0.7637832790723679),
  AuroraObjects(
      color: Color(0xfe715f1e),
      size: 0.5361927815073029,
      x: 0.03585087116056085,
      y: 0.4395169259099354),
  AuroraObjects(
      color: Color(0xfe7bb8ef),
      size: 0.48439512870067514,
      x: 0.23393248482439866,
      y: 0.5842477635926363),
]);

你可以直接使用这个对象，或者将其转换为一个AuroraObjects列表，并传递给.asAurora()方法。它可能看起来像这样：

List<AuroraObjects> auroraObjects = [
  AuroraObjects(
        color: Color(0xfe15ad81),
        size: 0.20434975310185255,
        x: 0.4107773793760572,
        y: 0.7115949484263953),
  AuroraObjects(
        color: Color(0xfe7a2598),
        size: 0.05583251849162163,
        x: 0.35623824913909286,
        y: 0.9970802979115129),
];

将这个列表放在类或构建方法的某个地方，并像这样使用它：

Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
).asAwesomeAurora(shiftX: 100.0, shiftY: 6.713037223479337, auroraObjects: auroraObjects);

最终的代码可能看起来像这样：

import 'package:flutter/material.dart';
import 'package:awesome_aurora_gradient/awesome_aurora_gradient.dart';

class ExampleSimplest extends StatelessWidget {
  ExampleSimplest({Key? key}) : super(key: key);

  List<AuroraObjects> auroraObjects = [
    AuroraObjects(color: Color(0xfe703bc9), size: 2.0, x: 0.5, y: 0.5),
    AuroraObjects(
        color: Color(0xfe15ad81),
        size: 0.20434975310185255,
        x: 0.4107773793760572,
        y: 0.7115949484263953),
    AuroraObjects(
        color: Color(0xfe7a2598),
        size: 0.05583251849162163,
        x: 0.35623824913909286,
        y: 0.9970802979115129),
    AuroraObjects(
        color: Color(0xfed77237),
        size: 0.529962871028804,
        x: 0.8965277962474901,
        y: 0.7637832790723679),
    AuroraObjects(
        color: Color(0xfe715f1e),
        size: 0.5361927815073029,
        x: 0.03585087116056085,
        y: 0.4395169259099354),
    AuroraObjects(
        color: Color(0xfe7bb8ef),
        size: 0.48439512870067514,
        x: 0.23393248482439866,
        y: 0.5842477635926363)
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
    ).asAwesomeAurora(
        shiftX: 100.0, shiftY: 6.713037223479337, auroraObjects: auroraObjects);
  }
}

有多种方式可以使用此方法，但建议克隆仓库并查看示例，这些示例展示了如何在容器、装饰框、图片和带有阴影的图片上使用此效果。

高级内容

在这个包中，你还会发现一个asShadow方法。例如：

FlutterLogo(
  size: 200,
).asShadow(
  shiftX: 3, 
  shiftY: 3, 
  offset: const Offset(6, 6)
);

使用这个方法和.asAwesomeAurora，你可以创建相当复杂的效果，如下所示：

这是一个FlutterLogo()（也可以是一个具有透明背景的PNG）。代码如下：

Stack(
  children: [
    SizedBox(
      height: 300,
      width: MediaQuery.of(context).size.width,
    ).asAwesomeAurora(shiftX: _shiftx, shiftY: _shifty),
    ShaderMask(
      shaderCallback: (rect) {
        return const LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.black, Colors.transparent],
        ).createShader(
            Rect.fromLTRB(0, 50, rect.width, rect.height));
      },
      blendMode: BlendMode.dstIn,
      child: Container(
        height: 301,
        width: MediaQuery.of(context).size.width,
        color: const Color.fromARGB(255, 255, 255, 255),
      ),
    ),
    Positioned(
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      child: Center(
        child: FlutterLogo(
          size: 200,
        ).asShadow(
            shiftX: 3, shiftY: 3, offset: const Offset(6, 6)),
      ),
    )
  ],
),

在代码片段的注释部分，你还可以找到一个图像示例。

其他用例

用例太多，无法一一列举。只有你的想象力（和编程技能）会限制你。这里有一个AppBar的例子：

AppBar的代码示例：

appBar: AppBar(
  title: const Text(
    "Awesome Aurora Gradient Gallery",
    style: TextStyle(color: Colors.white),
  ),
  flexibleSpace: Container(
    child: const SizedBox(
      width: 200,
      height: 160,
    ).asAwesomeAurora(
        shiftX: 100,
        shiftY: 100,
        width: MediaQuery.of(context).size.width,
        height: 70),
  ),
),

构造函数

构造函数看起来像这样：

asAwesomeAurora({
  List<AuroraObjects>? auroraObjects = const [],
  List<ColorScheme>? colorScheme,
  Clip clipBehaviour = Clip.antiAlias,
  TileMode tileMode = TileMode.clamp,
  CustomClipper<Path>? clipper,
  double shiftX = 0,
  double shiftY = 0,
  double width = 0,
  double height = 0,
  bool? debug,
})

• colorScheme 是新的且实验性的，可能会在未来版本中更改。
• 推荐的shift值范围是80-120，但你可以尝试更高的或更低的值。
• 通常你可以忽略宽度和高度，因为它会根据其父元素的大小来调整。但如果不符合你的场景，你可以使用宽度和高度，或者用约束小部件包裹它。
• 在生产环境中，将debug设置为false。
• clipper 是可选的，仅在特殊情况下使用，如果你需要这个功能，你会知道的，否则就忽略它。

AuroraObjects 类看起来像这样：

class AuroraObjects {
  Color color;
  double x;
  double y;
  double size;
  double shiftX;
  double shiftY;

  AuroraObjects({
    required this.color,
    required this.size,
    required this.x,
    required this.y,
    this.shiftX = 0,
    this.shiftY = 0,
  });
}

x 和 y 是位置（0,0 是左上角，1,1 是右下角），因此如果你想将一个对象放置在屏幕中间并且大约占一半的大小，它看起来像这样：

AuroraObjects(
  color: Color(0xfe15ad81),
  size: 0.5,
  x: 0.5,
  y: 0.5
)