bigship/barcode.flutter

Barcode not centered

tobiasgubo opened this issue · 14 comments

The barcode painter is not centered inside the barcode image as you can see on the image.

screenshot_1543666980

Steps to Reproduce:

BarCodeImage( data: "1234243534557", codeType: BarCodeType.CodeEAN13, lineWidth: 3.0, backgroundColor: Colors.blue, ),

You're right, I should wrap the custom painter in a Center widget, that should solve your problem. I'll fix it very soon.

awesome, thank you!

@bigship I'm having a similar problem. Any recommendations on how to modify the library code to achieve this? Centering the CustomPaint does not work.

Ideally, the barcode image widget should be the exact width and height of the barcode itself so we can position it on the screen however we want.

@kaciula HI, after hours of stumbling the code myself, I found out that simply remove the default 5.0 padding from BarCodeImage works!

@sooxiaotong Hi. Thanks for the message. However, the removal of the padding does not really solve the problem. As you can see in the OP, the blue background is larger than the 5.0 padding. I believe the issue is with calculating the canvas width where the barcode is being drawn. For some bar code types, it doesn't calculate the right width.

@kaciula maybe you could try FittedBox, and I'm using with code128, the centering works great

@kaciula for your EAN13, try modify to this, and you're good to go~

image

@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.

screenshot

@kaciula I knew why, you haven't disable the padding and set it to 0, the red background wont be visible if you disabled the barcode padding.

@sooxiaotong I don't think you understand. I left the pink padding to show you that the right part of the barcode goes beyond the padded box. You don't see any pink on the right because the barcode is being drawn over. And that's why centering the barcode does not work very well, because it centers the pink box, not the actual barcode (which can be larger to the right)

@sooxiaotong but i tested with diff kind of data and code, it doesn't overflow and center properly when you didn't specific padding. Although the whole painter algorithm is quite a mess and author need to use hard coded value the calculate the width for barcode container width. But my eyes can't tell any difference after i tweaked the code.

IMG_5484

I have tried all looks good!

Code Data
Code128 2zg3
CodeEAN13 1234243534557
CodeEAN8 123123112
v0l commented

fixed in #19

Please update to 1.1.0 and check the new API, the issue should be fixed now.