QRKit 2.0 Scan, Generate, Customize [Compose Multiplatform]

Published in

Mobile Innovation Network

3 min readAug 14, 2024

Are you looking for a way to generate customized QR codes in your Android, iOS, and desktop apps? Look no further than QRKit-2.0, a Compose Multiplatform library that allows you to create stunning QR codes with ease.

Customization Options

With QRKit-2.0, you can customize your QR codes to fit your brand’s style and aesthetic. Choose from a variety of options, including:

Customized patterns for QR codes
Customized eyes for QR codes
Customized colors for QR codes
Add a logo to your QR code
Select different shapes for your QR code

You can even pass in custom shapes and patterns to create a truly unique QR code.

Installation

To get started simply add the dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:qr-kit:2.0.0")
}

Usage

Basic QR Code Generation

Generating a basic QR code is as simple as using the rememberQrKitPainter function:

val painter = rememberQrKitPainter(data = inputText)

Image(
    painter = painter, 
    contentDescription = null, 
    modifier = Modifier.size(100.dp)
)

Designed QR Code Generation

To create a more customized QR code, you can use rememberQrKitPainter function with additional options:

val centerLogo = painterResource(Res.drawable.ic_youtube)

val painter = rememberQrKitPainter(
    data = inputText,
    options = {
        centerLogo { painter = centerLogo }

        qrColors {
            darkColorBrush = QrKitBrush.customBrush {
                Brush.linearGradient(
                    0f to Color.White,
                    1f to Color.White,
                    end = Offset(it, it)
                )
            }
            frameColorBrush = QrKitBrush.solidBrush(Color.Blue)
        }

        qrShapes {
            ballShape = getSelectedQrBall(QrBallType.SquareQrBall())
            darkPixelShape = getSelectedPixel(PixelType.SquarePixel())
            frameShape = getSelectedQrFrame(QrFrameType.SquareQrFrame())
            qrCodePattern = getSelectedPattern(PatternType.SquarePattern)
        }
    }
)

1. Creating a QR Code Painter

To create a QR code painter, use the rememberQrKitPainter function and pass in the input text:

val painter = rememberQrKitPainter(inputText)

This will create a QR code painter with the specified input text.

2. Setting the Center Logo

To set the center logo of the QR code, use the centerLogo function:

centerLogo { painter = centerLogo }

This will set the center logo of the QR code to the specified logo.

3. Configuring Colors

To configure the colors used in the QR code, use the qrColors function:

qrColors {
    // configure colors here
}

Within the qrColors block, you can configure the following:

darkColorBrush: Sets a custom dark color brush with a linear gradient.

darkColorBrush = QrKitBrush.customBrush {
    Brush.linearGradient(
        0f to Color.White,
        1f to Color.White,
        end = Offset(it, it)
    )
}

4. Configuring Shapes

To configure the shapes used in the QR code, use the qrShapes function:

qrShapes {
    // configure shapes here
}

Within the qrShapes block, you can configure the following:

ballShape: Sets the ball shape to a square QR ball.

ballShape = getSelectedQrBall(QrBallType.SquareQrBall())

darkPixelShape: Sets the dark pixel shape to a square pixel.

darkPixelShape = getSelectedPixel(PixelType.SquarePixel())

frameShape: Sets the frame shape to a square QR frame.

frameShape = getSelectedQrFrame(QrFrameType.SquareQrFrame())

qrCodePattern: Sets the QR code pattern to a square pattern.

qrCodePattern = getSelectedPattern(PatternType.SquarePattern)

Data Types for QR Codes

Supports a variety of data types for your QR codes:

val email: String = email("developer@gmail.com", "addeveloper@gmail.com", "Lorem ipsum", "Lorem ipsum")

val painter = rememberQrKitPainter(data = email)

Image(
    painter = painter, contentDescription = null, modifier = Modifier.size(100.dp)
)

text: Simple text data type.
phone: Telephone number data type.
email: Email address data type.
sms: Short message service data.
wifi: Wireless network configuration data.
event: Calendar event data type.
location: Geographic location data type.

Final Demo:

Conclusion

Integrating a QR code generator library like QRKit-2.0 can enhance the functionality, streamline processes, and improve the user experience in your application. With its powerful customization options and ease of use, QRKit-2.0 is the perfect solution for generating QR codes in your Compose Multiplatform app.