简体   繁体   中英

Is there an alternative for an elevation property for CustomPaint widget in flutter?

If I have drawn a custom shape in flutter, how do I give it a shadow around it (ie give it elevation)?

You can make use of Material()

return Material(
       elevation: 20,
       child CustomShape(),
       );

The drawShadow method on Canvas lets you specify the elevation and the shadow color .

Below is an example of a pink rounded rectangle with elevation 10 and grey shadow.

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    final shape = RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, 200, 100),
      Radius.circular(3),
    );

    final path = Path()..addRRect(shape);

    // Draw the shadow before the path.
    // shadow color: grey
    // elevation: 10
    // opaque object
    canvas.drawShadow(path, Colors.grey, 10, false);
    canvas.drawPath(path, Paint()..color = Colors.pink);

    canvas.restore();
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Result:
在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM