dart - 小部件上的光泽效果

Question

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

标签： dartflutter

Answer 1

I ended up using this Custom 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;
}

With this as an item in the stack ontop of my card

          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),
                ),
              ),
            ),
          ),