Image of Non-Uniform Border

Flutter 的非均匀边框

Non-Uniform Border 包为 Flutter 提供了一个自定义边框类,允许为边框的每一侧设置不同的宽度,且使用单一颜色。这对于创建需要非均匀边框样式的自定义 UI 元素非常有用。它还可以防止边框运行时崩溃并允许插值。

入门

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

pub package

dependencies:
  non_uniform_border: ^1.0.0

用法

要使用 NonUniformBorder 类,只需将其导入到您的 Dart 文件中,并使用所需的侧边宽度和颜色创建一个新实例

import 'package:non_uniform_border/non_uniform_border.dart';

// Create a non-uniform border with different widths and radius.
final shapeBorder = NonUniformBorder(
  leftWidth: 4,
  rightWidth: 8,
  topWidth: 12,
  bottomWidth: 16,
  color: Color(0xfffbbf24),
  side: BorderSide.strokeAlignCenter,
  borderRadius: BorderRadius.horizontal(
    left: Radius.circular(50),
    right: Radius.circular(100),
  ),
);

// Inside a Container.
Container(
  width: 400,
  height: 400,
  decoration: const ShapeDecoration(
    color: Color(0xffa3e635),
    shape: shapeBorder,
  ),
);

// Create a symmetrical border with different widths for each side.
NonUniformBorder.symmetrical(
  verticalWidth: 8,
  horizontalWidth: 4,
  color: Color(0xffec4899),
);

// Create an uniform border.
NonUniformBorder.all(
  width: 2,
  color: Color(0xff00ff00),
);

Image of Example

贡献

欢迎为 Non-Uniform Border 包贡献代码!如果您发现错误或有功能请求,请在 GitHub 仓库中打开一个 issue。如果您想贡献代码,请 fork 仓库并提交包含您更改的 pull request。

许可证

Non-Uniform Border 包以 MIT 许可证发布。您可以自由地在您自己的项目中使用它,无论是商业用途还是非商业用途。

GitHub

查看 Github