import 'dart:math'; import 'package:flutter/material.dart'; class Dimension { final double length; final double width; final double height; Dimension(this.length, this.width, this.height); } class DimensionBox extends StatelessWidget { final Dimension dimension; final Color color; DimensionBox({Key key, this.dimension, this.color}) : super(key: key); Widget build(BuildContext context) { return CustomPaint( size: Size.infinite, painter: DimensionBoxPainter(dimension: dimension, color: color), ); } } class DimensionBoxPainter extends CustomPainter { final double avatarRadius = 10; final Dimension dimension; final Color color; DimensionBoxPainter({this.color, this.dimension}); //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, dimension.length * 10, dimension.width * 10, dimension.height * 10, color); } void _drawBackground(Canvas canvas, Rect shapeBounds, Rect avatarBounds) { //1 final paint = Paint()..color = color; //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${dimension.length.toInt()}\"", canvas, shapeBounds.bottomCenter.dx - 100, shapeBounds.bottomCenter.dy - 40); _drawText("width\n${dimension.width.toInt()}\"", canvas, shapeBounds.bottomCenter.dx + 100, shapeBounds.bottomCenter.dy - 40); _drawText( "height\n${dimension.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; } }