CustomPaint inside custom button flutter - flutter

Question

I have a custom button that I plan to reuse over and over again.
How can I put a CustomPainter into CustomButtom, with the condition that it also changes its internal state?
class CustomButton extends StatelessWidget {
CustomButton({this.icon, this.text, this.onPressed});
final Icon icon;
final Text text;
final Function onPressed;
#override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: onPressed,
elevation: 2.0,
fillColor: Colors.lightGreenAccent,
child: SizedBox(
width: 90,
height: 90,
child: Column(
children: [
icon,
text,
Container(
height: 15,
width: 70,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(Radius.elliptical(45, 10)),
),
),
],
),
),
padding: EdgeInsets.all(5.0),
shape: CircleBorder(),
);
}
}
How can I implement a smile animation that should not be a rotation, but a transition from one state to another?
Smooth redrawing of the CustomPaint part when the button is pressed
class SmileyPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final radius = 100.0;
final center = Offset(150, 120);
// Body
final paint = Paint()..color = Colors.yellow;
canvas.drawCircle(center, radius, paint);
// Eyes
canvas.drawOval(
Rect.fromCenter(
center: Offset(center.dx + radius / 3, center.dy - radius / 3),
width: 25,
height: 60),
Paint());
canvas.drawOval(
Rect.fromCenter(
center: Offset(center.dx - radius / 3, center.dy - radius / 3),
width: 25,
height: 60),
Paint());
final paintMouth = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 10;
Path path = Path();
path.moveTo(200, 150);
path.quadraticBezierTo(150, 200, 100, 150);
path.moveTo(200, 150);
path.quadraticBezierTo(150, 220, 100, 150);
canvas.drawPath(path, paintMouth);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}