chore: updated the painter to have the same UI for each screen size.

lib/virtualbadge/view/draw_badge_paint.dart

@@ -1,6 +1,7 @@
 import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 class DrawBadgePaint extends CustomPainter {
   final List<List<bool>> grid;
@@ -12,6 +13,10 @@ class DrawBadgePaint extends CustomPainter {
     double cellWidth = size.width / grid[0].length;
     double cellHeight = size.height / grid.length;
 
+    double pathOffsetX1 = 0.15.w;
+    double pathOffsetX2 = 0.3.w;
+    double pathOffsetX3 = 0.15.w;
+
     for (int row = 0; row < grid.length; row++) {
       for (int col = 0; col < grid[row].length; col++) {
         final Paint paint = Paint()
@@ -20,14 +25,14 @@ class DrawBadgePaint extends CustomPainter {
 
         final Path path = Path()
           ..moveTo(col * cellWidth, row * cellHeight)
-          ..lineTo(col * cellWidth + cellWidth * 0.4, row * cellHeight)
-          ..lineTo(col * cellWidth + cellWidth * 0.655,
+          ..lineTo(col * cellWidth + cellWidth * pathOffsetX1, row * cellHeight)
+          ..lineTo(col * cellWidth + cellWidth * pathOffsetX2,
+              row * cellHeight + cellHeight)
+          ..lineTo(col * cellWidth + cellWidth * pathOffsetX3,
               row * cellHeight + cellHeight)
-          ..lineTo(
-              col * cellWidth + cellWidth * 0.25, row * cellHeight + cellHeight)
           ..close();
 
-        const double radians = math.pi / 4;
+        const double radians = math.pi / 3;
         canvas.save();
         canvas.translate((col + 0.5) * cellWidth, (row + 0.5) * cellHeight);
         canvas.rotate(radians);