超棒的Aurora渐变

提供了一个简单但强大的渐变扩展方法，可用于容器或装饰图像。

入门

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  aurora_ui_gradient: <latest_version>

在您的库中添加以下导入

import 'package:aurora_ui_gradient/aurora_ui_gradient.dart';

要开始使用Flutter，请查看在线[文档][flutter_documentation]。

画廊

如何使用它

假设我们要生成上图所示的类似效果。这里有一个简单的方法。

这是一个带有`.asAwesomeAurora()`扩展方法的容器。

你只需创建一个容器并添加`.asAwesomeAurora()`。

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

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

    .asAwesomeAurora(debug: true);

然后，你可以一直刷新页面，直到找到喜欢的模式。由于`debug`标志，你可以在VS Code的调试控制台中找到配置，它看起来是这样的：

现在，你有一个类似这样的最终`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）和着色器蒙版以及`.asShadow`。代码看起来像这样：

 Stack(
              children: [
                SizedBox(
                  height: 300,
                  width: MediaQuery.of(context).size.width,
                  // color: Colors.red,
                ).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)),
                    // child: Image.asset(
                    //   'lib/assets/images/yourimage.png',
                    //   width: 200,
                    //   height: 200,
                    // ).asShadow(
                    //     shiftX: 3, shiftY: 3, offset: const Offset(5, 3)),
                  ),
                )
              ],
            ),

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

其他用例

太多了，无法一一列举，只有你的想象力（和编码技能）会限制你……这是一个应用栏：

应用栏的代码示例：

 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，但你可以尝试更高或更低的值。

*** 通常你可以省略`width`和`height`，因为它会占用父级的大小。但如果它不适合你的场景，你可以使用`width`和`height`或将其包装在约束小部件中。

*** 在生产环境中将`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)

因此，理想情况下，如果你想创建一个非常漂亮的渐变，你会将对象分布在画布上，并将`ShiftX`、`shiftY`值设置在80-120的范围内，这将导致各种颜色混合，覆盖整个画布。

工作原理

我之所以想到制作这个包，是因为看了YouTube上一个Figma教程，我觉得可以用Dart和Flutter以编程方式实现，在某些情况下会更方便。它只是一些彩色的图形对象，我将它们模糊化，然后添加一些背景滤镜。如果你想详细了解它是如何工作的，请查看包的源代码。

请记住，如果你喜欢这个包，请点击“喜欢”，这将激励我（以及其他人）发布更多包。

GitHub

查看 Github

Flutter 的精美极光渐变

超棒的Aurora渐变

入门

画廊

如何使用它

给精英们的奖励内容

其他用例

构造函数

工作原理

请记住，如果你喜欢这个包，请点击“喜欢”，这将激励我（以及其他人）发布更多包。

更多示例

GitHub

用于将 UTF16 字符串编码和解码为列表的帮助类

一款用 Flutter 构建的小型费用跟踪器应用

超棒的Aurora渐变

入门

画廊

如何使用它

给精英们的奖励内容

其他用例

构造函数

工作原理

请记住，如果你喜欢这个包，请点击“喜欢”，这将激励我（以及其他人）发布更多包。

更多示例

GitHub

用于将 UTF16 字符串编码和解码为列表的帮助类

一款用 Flutter 构建的小型费用跟踪器应用

您可能还会喜欢……

订阅 Flutter Awesome