QrCode

A QR code a phone can scan, drawn from the rows `Qr.Encode(text)` answers: dark modules on white whatever the theme, inside the four-module white margin a reader needs to find it. `module` is one module's side in pixels and `label` is what a screen reader says it is.

Summary#

Qr.Encode(text) makes the code on the server; QrCode(rows) draws it. The text a code carries is usually made on the server too — a sign-in key, a payment's token, a link with a secret in it — so the page is sent the rows:

[AllowAnonymous]
List<string> CodeFor(string link) => Qr.Encode(link);

[Route("/share")] [AllowAnonymous]
component SharePage() {
  List<string> rows = [];
  on mount { rows = CodeFor("https://example.com/menu"); }
  render {
    Stack(gap: 3, p: 6) {
      Text("Open the menu on your phone");
      QrCode(rows, module: 5, label: "QR code for the menu");
    }
  }
}

Signature#

QrCode(List<string> rows, int module = 4, string label = "QR code")

Description#

Why is it white in a dark theme?#

A camera looks for three dark finder squares on a light ground. A code drawn in a dark theme's ink — light on dark — or cropped tight against a dark card is read by almost nothing, so QrCode is the one control that does not take the theme's colours: its modules are near-black on white, and the white margin around them is four modules wide, as the standard asks.

How big is it?#

module pixels a module, plus the margin: a 25-module code at module: 4 is (25 + 8) × 4 = 132 pixels across. Pick a module of 4 or more for a screen held up to a phone; it never grows to fill its container, and shrinks no further than its own width.

How do I find it in a test?#

By its label: Assert.Visible("QR code for the menu"). osy test --pixels with Ui.Shot photographs it, which is the only way to see that it is drawn.