real_qr_code #

A stylized QR code generator with rounded finder patterns, blob-effect data modules, and a center space for logo overlay.

Available for Flutter (pub.flutter-io.cn) and Web (npm).

Flutter #

Installation #

dependencies:
  real_qr_code: ^0.0.2

Usage #

import 'package:real_qr_code/real_qr_code.dart';

RealQrCode(
  data: 'https://example.com',
  size: 300,
  logo: Icon(Icons.flutter_dash, size: 48),
)

With custom styling #

RealQrCode(
  data: 'https://example.com',
  size: 300,
  centerSpaceSize: 80,
  color: Color(0xFF0E121B),
  backgroundColor: Color(0xFFF7F8F9),
  borderRadius: 16,
  finderPatternRadiusFraction: 1.2,
  dataModuleRadiusFraction: 0.45,
  logo: Image.asset('assets/logo.png', width: 48, height: 48),
)

Parameters #

If size is not specified, the widget adapts to parent constraints via LayoutBuilder.

The logo widget is rendered via Stack + Center, so any widget works — Icon, Image, SvgPicture, etc. Logo color automatically inherits the QR color through IconTheme.

Web (npm) #

An SVG-based QR code generator for any web framework — React, Vue, Nuxt, Svelte, or vanilla JS.

Installation #

npm install real-qr-code

Usage #

import { renderQrCode } from 'real-qr-code';

renderQrCode(document.getElementById('qr'), {
  data: 'https://example.com',
  size: 300,
});

Get SVG string #

import { generateQrCodeSvg } from 'real-qr-code';

const svg = generateQrCodeSvg({
  data: 'https://example.com',
  size: 300,
  color: '#0E121B',
  backgroundColor: '#F7F8F9',
});

Options #

Framework examples #

React

import { useRef, useEffect } from 'react';
import { renderQrCode } from 'real-qr-code';

function QrCode({ data }: { data: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      renderQrCode(ref.current, { data, size: 300 });
    }
  }, [data]);

  return <div ref={ref} />;
}

Vue

<template>
  <div ref="qrRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { renderQrCode } from 'real-qr-code';

const qrRef = ref<HTMLDivElement>();

onMounted(() => {
  if (qrRef.value) {
    renderQrCode(qrRef.value, { data: 'https://example.com', size: 300 });
  }
});
</script>

Vanilla JS

<div id="qr"></div>
<script type="module">
  import { renderQrCode } from 'real-qr-code';
  renderQrCode(document.getElementById('qr'), {
    data: 'https://example.com',
    size: 300,
  });
</script>

Features #

• Rounded finder patterns — three corner markers with smooth rounded rectangles
• Blob effect — adjacent data modules merge into organic shapes
• Rounded alignment patterns — small 5x5 markers styled consistently
• Center logo space — 80dp clear zone for logo overlay
• Error correction H (30%) — reliable scanning even with center obstruction
• Responsive sizing — adapts to parent/container when size is not set

How it works #

The QR matrix is generated using qr (Flutter) / qrcode-generator (Web). Each module is then rendered with per-corner radius based on neighbor detection:

if neighbor exists → radius = 0 (modules merge)
if no neighbor    → radius = dataModuleRadius (rounded corner)

This creates the distinctive blob effect where clusters of dark modules flow together organically.

License #

MIT