ButtonsPainter

ButtonsPainter.dart

class ButtonsPainter extends CustomPainter {
  ui.Image buttonImage;
  ButtonsPainter(this.buttonImage);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    // First paint black field around buttons with low opacity
    paint.color = Colors.black.withOpacity(0.1);
    Rect rect =
        Offset(0.0, size.height * 0.8) & Size(size.width, size.height * 0.2);
    canvas.drawRect(rect, paint);

    // Draw buttons at 10% from the bottom
    final double yButton = size.height * 0.9;
    paint.style = PaintingStyle.fill;
    paint.color = Colors.grey;
    final double canvasWidth = size.width;
    double xButton;
    var icon;

    // Paint left button if no  buttonImage supplied
    if (buttonImage == null) {
      xButton = canvasWidth * 0.3;
      icon = Icons.photo_library;
      canvas.drawCircle(Offset(xButton, yButton), 22.0, paint);
      var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
        fontFamily: icon.fontFamily,
        fontSize: 25.0,
      ))
        ..addText(String.fromCharCode(icon.codePoint));
      var para = builder.build();
      para.layout(const ui.ParagraphConstraints(width: 100.0));
      canvas.drawParagraph(para, Offset(xButton - 12.5, yButton - 12.5));
    }

    //Paint middle button.
    xButton = canvasWidth * 0.5;
    canvas.drawCircle(Offset(xButton, yButton), 32.0, paint);
    paint.color = Colors.white;
    canvas.drawCircle(Offset(xButton, yButton), 28.0, paint);

    // Paint right button.
    xButton = canvasWidth * 0.7;
    icon = Icons.info_outline;
    paint.color = Colors.grey;
    canvas.drawCircle(Offset(xButton, yButton), 22.0, paint);
    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
      fontFamily: icon.fontFamily,
      fontSize: 25.0,
    ))
      ..addText(String.fromCharCode(icon.codePoint));
    var para = builder.build();
    para.layout(const ui.ParagraphConstraints(width: 100.0));
    canvas.drawParagraph(para, Offset(xButton - 12.5, yButton - 12.5));

    // Paint image on left button
    if (buttonImage != null) {
      xButton = canvasWidth * 0.3;
      // First set up a round clipping area.
      double radius = 22.0;
      double l, t, r, b;
      l = xButton - radius;
      r = xButton + radius;
      t = yButton - radius;
      b = yButton + radius;
      ui.Rect clippingRect = Rect.fromLTRB(l, t, r, b);
      RRect clippingArea =
          RRect.fromRectAndRadius(clippingRect, Radius.circular(radius));
      canvas.clipRRect(clippingArea);
      // Then draw the square button image over the round clipping area
      double x, y = 0.0;
      x = xButton - buttonImage.height / 2.0;
      y = yButton - buttonImage.width / 2.0;
      Offset buttonOffset = Offset(x, y);
      canvas.drawImage(buttonImage, buttonOffset, Paint());
    }
  }

  @override
  bool shouldRepaint(ButtonsPainter oldDelegate) =>
      oldDelegate.buttonImage != buttonImage;
}