Question

我正在尝试在小部件上添加光泽效果，类似于您在信用卡上看到的效果。我发现了另一个有关毛玻璃的问题，但这不是我想要的。

Answer 1

我最终使用了这个自定义Clipper

class CardShinyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height / 10);
    path.lineTo(size.width / 10, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CardShinyClipper oldClipper) => false;
}

将此作为卡片顶部堆栈中的物品

          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
            ),
            alignment: AlignmentDirectional.center,
            child: ClipPath(
              clipper: CardShinyClipper(),
              child: Container(
                height: 200.0,
                width: 300.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  color: Colors.grey.shade200.withOpacity(0.2),
                ),
              ),
            ),
          ),

小部件上的光泽效果

1 个答案: