The original PopupMenuButton had no arrows and could not change the shadow color. The shadow could only be set by elevation

PopupMenuButton (offset: offset (0 '), color: Colors. White, shape: RoundedRectangleBorder (borderRadius: BorderRadius.circular(20.sp), ), elevation: 2, child: Container( padding: EdgeInsets.all(32.sp), child: Image.asset(Assets.title_more,width: 56.sp,height: 56.sp,), ), itemBuilder: PopupMenuItem(BuildContext context){return [PopupMenuItem(child: Container(child: Text(" delete "),),), PopupMenuItem(child: Container(child: Text(" delete "),)]; },)Copy the code

Second, if you need to customize the shadow color and add arrows

The code in the round RectangleBorder needs to be changed

Methods:

1, put RoundedRectangleBorder code copy a in local, modify RoundedRectangleBorder class called CustomRoundedRectangleBorder, then modify the paint the inside of the code

Override void paint(Canvas Canvas, Rect Rect, {TextDirection TextDirection}) { Switch (side.style) {case BorderStyle. None: break; case BorderStyle.solid: final double width = side.width; final RRect outer = borderRadius.resolve(textDirection).toRRect(rect); final RRect inner = outer.deflate(width); final Paint paint = Paint() .. color = side.color; Canvas. DrawRRect (outer, Paint().. Color = GsColors. BlueShadow. WithOpacity (0.3). isAntiAlias = true .. strokeCap = StrokeCap.round.. MaskFilter = maskFilter. The blur (BlurStyle outer, 2.0)); Path Path = Path(); path .. MoveTo (75, 5).. lineTo(88, -7) .. lineTo(90, -8) .. lineTo(92, -7) .. lineTo(105, 5) .. close(); canvas.drawPath(path, paint); }}Copy the code

2, the inside of the original PopupMenuButton elevation is set to 0, and then use CustomRoundedRectangleBorder shape, And inside the rounded and style (because CustomRoundedRectangleBorder useful style attribute judgment, so according to their own needs to add)

PopupMenuButton (offset: offset (0 '), color: Colors. White, shape: CustomRoundedRectangleBorder (borderRadius: BorderRadius. Circular (20) sp), / / / BorderSide properties in CustomRoundedRectangleBorder inside have judgment, if the latter in the code written to death, so here can not side: BorderSide( width: 2, color: Colors.white, style: BorderStyle.solid, ), ), elevation: 0, child: Container( padding: EdgeInsets.all(32.sp), child: Image.asset(Assets.title_more,width: 56.sp,height: 56.sp,), ), itemBuilder: PopupMenuItem(BuildContext context){return [PopupMenuItem(child: Container(child: Text(" delete "),),), PopupMenuItem(child: Container(child: Text(" delete "),)]; },)Copy the code

Final rendering