Barcode is rendered outside the canvas

[bruceanwyl]

@sooxiaotong FittedBox does not help with this. I've attached a screenshot to show that the barcode width is larger than the width computed by the package. And I am also generationg barcode for code128. I know the _calcCanvasWIdth() should be modified but I would have to invest some time to figure out how to do it.

Anyway, I was hoping the author would provide some direct help. Thanks.

Originally posted by @kaciula in #1 (comment)

[bruceanwyl]

The root cause is that the width calculation of the canvas does not account for the padding built into this component. You can see in the image above (and below) that the overflow is exactly the amount of displacement caused by the left padding. The right padding appears as if it was ignored.

This issue is most apparent in Code39, Code93, Code128 and can be seen in the Code39 barcode below. This was obtained by changing the BarcodeImage to have a background color as shown in the following snippet:

                    child: new BarCodeImage(
                      backgroundColor: Colors.red,
                      data: element.codeStr,
                      codeType: element.type,
                      lineWidth: 2.0,
                      barHeight: 100.0,
                      hasText: element.hasText,
                      onError: (error) {
                        print("Generate barcode failed. error msg: $error");
                      },
                    ),

Now, we could change the calculation to include padding but if you look carefully at the image above, the single line width gaps between the barcode characters are not painted and there is a trailing gap that we cannot see. It would be better to remove padding as a feature and change the painting of the white bars so that they are the color of the background. Of course, the most common background color is going to be white.

Note also that the Code128 barcode shown by @kaciula does not have gaps like the Code39 barcode but if you look carefully at the image, you can see the background color leaking through in very fine lines.

If padding is required around the barcode, just wrap it in a Padding object in your UI.

[v0l]

fixed in #19

[bigship]

Please check the new API, it should be fixed now.