How to use the QRCode component

The QRCode class displays a QR code (sometimes called a Quick Response Code), a type of two-dimensional matrix barcode.

⚠️ Beta Notice: This component is still quite new. Some APIs may go through minor changes in upcoming releases.

Start by creating a QRCode control and add it to the display list.

var qrCode = new QRCode();
addChild(qrCode);

The data displayed by the QR code may be changed programatically by setting the code property.

qrCode.code = "https://feathersui.com/";

Warning! If the string value passed to the code property setter is too long, an ArgumentError may be thrown.

Styles

A number of styles may be customized on a QRCode component, including the an optional background skin and padding around the edges.

Background skin

Optionally give the QR code a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

var skin = new RectangleSkin();
skin.border = SolidColor(1.0, 0x999999);
skin.fill = SolidColor(0xcccccc);
skin.width = 16.0;
skin.height = 16.0;
qrCode.backgroundSkin = skin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The QR code automatically calculates its preferred size based on the initial dimensions of its background skin (accounting for some other factors too, like the dimensions of the text), so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

The appearance of the QR code's border or fill may be customized to change when the QR code is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the QR code is disabled.

skin.disabledFill = SolidColor(0xffcccc);

Similarly, use the skin's disabledBorder property to change the border when disabled.

skin.disabledBorder = SolidColor(2.0, 0x999999);

In the examples above, the QR code uses the same RectangleSkin for all states, and that skin listens for changes to the QR code's current state. Alternatively, the QR code's disabledBackgroundSkin method allows the QR code to display a completely different display object when it is disabled.

var defaultSkin = new RectangleSkin();
// ... set border, fill, width, and height
qrCode.backgroundSkin = defaultSkin;

var disabledSkin = new RectangleSkin();
// ... set border, fill, width, and height
qrCode.disabledBackgroundSkin = disabledSkin;

In the example above, the QR code will have a separate skins when enabled and disabled.

Layout

Padding may be added on each side of the QR code, including top, right, bottom, and left.

qrCode.paddingTop = 5.0;
qrCode.paddingRight = 8.0;
qrCode.paddingBottom = 5.0;
qrCode.paddingLeft = 8.0;