Aura Box

Flutter 部件，它结合了多个径向渐变和模糊效果。

Aura box banner image

安装

将此行添加到项目 pubspec.yaml 文件中。

dependencies:
    aura_box: ^1.0.1

然后在你的文件中可以导入它

import 'package:aura_box/aura_box.dart';

用法

该包暴露了两个部件。

  • AuraBox 充当一个容器，可以接收一个 child、一个 decoration 和一个 AuraSpot 列表。
  • AuraSpot 代表生成径向渐变的点。

AuraBox(
    spots: [
        // Places one blue spot in the center
        AuraSpot(
            color: Colors.blue,
            radius: 100.0,
            alignment: Alignment.center,
            blurRadius: 5.0,
            stops: const [0.0, 0.5],
        ),
        // Places one red spot in the bottom right
        AuraSpot(
            color: Colors.red,
            radius: 150.0,
            alignment: Alignment.bottomRight,
            blurRadius: 10.0,
            stops: const [0.0, 0.7],
        ),
    ],
    decoration: BoxDecoration(
        color: Colors.transparent,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(10.0),
    ),
    child: const SizedBox(
        height: 100,
        width: 100,
    ),
)

Alignment

单个点放置在堆叠部件中。这使得可以通过 alignment 属性来控制它们的位置。

有关更多详细信息，您可以参考 Alignment 类文档。

示例

项目内提供了一个示例项目

example

GitHub

查看 Github