Blob Flutter 包

为您的 flutter 应用添加炫酷的 blob。您现在可以在应用中使用许多 blob（按钮、加载器、背景…）。

特点

  • blob 布局
  • blob 按钮
  • 随心所欲地自定义您的 blob

路线图

  • 改进文档
  • 将着色器迁移到 umbra
  • 着色器：等待 flutter glsl int / 数组支持
  • 着色器：等待 flutter glsl 输出支持
  • 着色器：创建渐变版本
  • 按钮：添加按下效果
  • 按钮：提供自定义方法让用户创建自己的按下效果

入门

安装 flutter_blob 包。

用法

布局

BlobLayout.from(
    blobs: myBlobsList,
    blobsColor: Colors.blue,
)

或者使用构建器函数（推荐）

BlobLayout.builder(
    builder: (Size areaSize) => [
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
    ],
    blobsColor: Colors.blue,
)

您必须提供恰好 8 个 blob。这是由于 flutter 着色器支持的当前限制

此存储库的示例文件夹中提供了一个示例。

按钮

目前按钮仅支持图标。

BlobButton.bouncing(
    onTap: () => print("do w/e you want"),
    backgroundColor: Colors.amber[900],
    icon: Icon(
        Icons.add,
        color: Colors.white,
        size: 32,
    ),
)

您必须提供恰好 8 个 blob。这是由于 flutter 着色器支持的当前限制

此存储库的示例文件夹中提供了一个示例。

自定义

blob 是通过多个相互吸引的粒子生成的。一个着色器计算画布上每个像素的粒子之间的能量。

您可以通过组合 8 个粒子来自定义您的 blob 效果。

此包中有 3 种粒子（欢迎您创建自己的或建议一些？）

  • BasicParticle （随机向一个方向移动，碰到边框时会弹向另一边）
  • EjectedParticle （在中心生成并随机向外扩散。一旦碰到边框，它会在中心重新生成）
  • RotatingParticle （在中心圆周上随机移动。）

工作原理

// 即将推出

附加信息

  • ? 欢迎贡献或想法
  • ? 我在学习着色器工作原理的过程中创建了这个包。我总是乐于学习新事物。请随时提出任何改进建议，我非常喜欢。

社交

您可以在以下位置找到我：Twitter 上的 @mcflyDev

GitHub

查看 Github