EmbeddedImage breaks the QR Code: Center still contains data modules

[Luzzotica]

Describe the bug I am adding an embedded image, but the QR code isn't creating space at the center, and so the QR code is effectively broken.

To Reproduce Steps to reproduce the behavior: My code:

Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(
          WalletConnectModalTheme.getData(context).radiusXS,
        ),
      ),
      constraints: isLongBottomSheet
          ? BoxConstraints(
              maxHeight: qrSize,
              maxWidth: qrSize,
            )
          : null,
      margin: EdgeInsets.all(marginAndPadding),
      padding: EdgeInsets.all(marginAndPadding),
      child: Center(
        child: QrImageView(
          data: _qrCode,
          version: QrVersions.auto,
          // size: 300.0,
          eyeStyle: const QrEyeStyle(
            eyeShape: QrEyeShape.circle,
            color: Colors.black,
          ),
          dataModuleStyle: const QrDataModuleStyle(
            dataModuleShape: QrDataModuleShape.circle,
            color: Colors.black,
          ),
          gapless: true,
          embeddedImage: const AssetImage(
            'assets/walletconnect_logo_white.png',
            package: 'walletconnect_modal_flutter',
            // color: themeData.primary100,
          ),
          embeddedImageStyle: QrEmbeddedImageStyle(
            size: const Size(100, 60),
            color: Colors.blue,
          ),
          embeddedImageEmitsError: true,
        ),
      ),
    );

Expected behavior I would expect the center to make space (not include any data modules) when I add an embedded image.

Screenshots If applicable, add screenshots to help explain your problem.

What's happening:

What I expect:

Desktop (please complete the following information):

• OS: N/A
• Browser N/A
• Version N/A

Smartphone (please complete the following information):

• Device: iPhone 14 Pro
• OS: iOS16.6
• Browser N/A
• Version N/A

Additional context Add any other context about the problem here.

[lukef]

If you use a transparent image then it will show through. This is intended. Use an image with a solid background.

[mathiassteger]

For testing purposes i use this image: https://upload.wikimedia.org/wikipedia/commons/d/dd/Linux_logo.jpg and it gets rendered on top of qr-codedata. I was using a transparent image before and hoped this image would change the behaviour of creation, but it does not.

At smaller sizes the QR-Code is still registered, but at larger sizes (e.g. 75x75 pixels), the QR-Code is not registered anymore, as too much data is now covered.

Here is the code i am currently using to create a QR-Code (i am using the latest version of qr_flutter):

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Create QR-Code'),
      ),
      body: Center(
        child: QrImageView(
          data: 'This QR code has an embedded image as well',
          version: QrVersions.auto,
          size: 350,
          gapless: true,
          embeddedImage: const AssetImage('assets/Linux_logo.jpg'),
          embeddedImageStyle: const QrEmbeddedImageStyle(
            size: Size(75, 75),
          ),
        ),
      ),
    );
  }

I really like this package so far, and adding logos to QR-Codes would complete this package for me. But maybe I'm just doing it wrong?