fcs/lib/widget/dimension_box.dart

import 'dart:math';
import 'package:flutter/material.dart';

class DimensionBox extends StatelessWidget {
  final double length;
  final double width;
  final double height;

  DimensionBox({
    Key key,
    this.length,
    this.width,
    this.height,
  }) : super(key: key);

  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size.infinite,
      painter:
          DimensionBoxPainter(length: length, width: width, height: height),
    );
  }
}

class DimensionBoxPainter extends CustomPainter {
  final double avatarRadius = 10;
  final double length;
  final double width;
  final double height;

  DimensionBoxPainter({this.length, this.width, this.height});

  //3
  final Color color = Colors.blueAccent;

  //4
  @override
  void paint(Canvas canvas, Size size) {
    final shapeBounds =
        Rect.fromLTWH(0, 0, size.width, size.height - avatarRadius);

    final centerAvatar = Offset(shapeBounds.center.dx, shapeBounds.bottom);
    final avatarBounds =
        Rect.fromCircle(center: centerAvatar, radius: avatarRadius).inflate(6);
    _drawBackground(canvas, shapeBounds, avatarBounds);

    final curvedShapeBounds = Rect.fromLTRB(
      shapeBounds.left,
      shapeBounds.top + shapeBounds.height * 0.35,
      shapeBounds.right,
      shapeBounds.bottom,
    );
    // _drawCurvedShape(canvas, curvedShapeBounds, avatarBounds);

    _drawCube(
        canvas, shapeBounds, length * 10, width * 10, height * 10, Colors.teal);
  }

  void _drawBackground(Canvas canvas, Rect shapeBounds, Rect avatarBounds) {
    //1
    final paint = Paint()..color = Colors.amberAccent;

    //2
    final backgroundPath = Path()
      ..moveTo(shapeBounds.left, shapeBounds.top) //3
      ..lineTo(shapeBounds.bottomLeft.dx, shapeBounds.bottomLeft.dy) //4
      // ..arcTo(avatarBounds, -pi, pi, false) //5
      ..lineTo(shapeBounds.bottomRight.dx, shapeBounds.bottomRight.dy) //6
      ..lineTo(shapeBounds.topRight.dx, shapeBounds.topRight.dy) //7
      ..close(); //8

    //9
    canvas.drawPath(backgroundPath, paint);
  }

  void _drawCurvedShape(Canvas canvas, Rect bounds, Rect avatarBounds) {
    final paint = Paint()..color = Colors.amber;
    final handlePoint = Offset(bounds.left + (bounds.width * 0.25), bounds.top);
    final curvePath = Path()
      ..moveTo(bounds.bottomLeft.dx, bounds.bottomLeft.dy) //4
      ..arcTo(avatarBounds, -pi, pi, false) //5
      ..lineTo(bounds.bottomRight.dx, bounds.bottomRight.dy) //6
      ..lineTo(bounds.topRight.dx, bounds.topRight.dy) //7
      ..quadraticBezierTo(handlePoint.dx, handlePoint.dy, bounds.bottomLeft.dx,
          bounds.bottomLeft.dy) //8
      ..close(); //9

    canvas.drawPath(curvePath, paint);
  }

  void _drawCube(Canvas canvas, Rect shapeBounds, double wx, double wy,
      double h, Color color) {
    //1
    final paintLeft = Paint()..color = Color(0xff838357);
    paintLeft.strokeJoin = StrokeJoin.round;

    double x = shapeBounds.bottomCenter.dx;
    double y = shapeBounds.bottomCenter.dy * 0.9;

    final leftFacePath = Path()
      ..moveTo(x, y)
      ..lineTo(x - wx, y - wx * 0.5)
      ..lineTo(x - wx, y - h - wx * 0.5)
      ..lineTo(x, y - h * 1)
      ..close();
    canvas.drawPath(leftFacePath, paintLeft);

    final paintRight = Paint()..color = Color(0xff6f6f49);
    paintRight.strokeJoin = StrokeJoin.round;
    final rightFacePath = Path()
      ..moveTo(x, y)
      ..lineTo(x + wy, y - wy * 0.5)
      ..lineTo(x + wy, y - h - wy * 0.5)
      ..lineTo(x, y - h * 1)
      ..close();
    canvas.drawPath(rightFacePath, paintRight);

    final paintTop = Paint()..color = Color(0xff989865);
    paintTop.strokeJoin = StrokeJoin.round;
    final topFacePath = Path()
      ..moveTo(x, y - h)
      ..lineTo(x - wx, y - h - wx * 0.5)
      ..lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5))
      ..lineTo(x + wy, y - h - wy * 0.5)
      ..close();
    canvas.drawPath(topFacePath, paintTop);

    _drawText("length\n${length.toInt()}\"", canvas,
        shapeBounds.bottomCenter.dx - 100, shapeBounds.bottomCenter.dy - 40);
    _drawText("width\n${width.toInt()}\"", canvas,
        shapeBounds.bottomCenter.dx + 100, shapeBounds.bottomCenter.dy - 40);
    _drawText(
        "height\n${height.toInt()}\"",
        canvas,
        shapeBounds.bottomCenter.dx,
        shapeBounds.bottomCenter.dy - (h > 30 ? h / 2 : h) * 1.2);
  }

  _drawText(String text, Canvas canvas, double x, y) {
    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 16,
    );
    final textSpan = TextSpan(
      text: text,
      style: textStyle,
    );
    final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center);
    textPainter.layout(
      minWidth: 0,
      maxWidth: 50,
    );
    final offset = Offset(x, y);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(DimensionBoxPainter oldDelegate) {
    return color != oldDelegate.color;
  }
}