QRKit 2.0 Scan, Generate, Customize [Compose Multiplatform]

ssvaghasiya
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)
)
  1. text: Simple text data type.
  2. phone: Telephone number data type.
  3. email: Email address data type.
  4. sms: Short message service data.
  5. wifi: Wireless network configuration data.
  6. event: Calendar event data type.
  7. 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.

For QRCode Scanner follow below link:

https://medium.com/mobile-innovation-network/qrkit-barcode-scanning-in-compose-multiplatform-for-android-and-ios-77cf5d84f719

Happy coding ❤

--

--

Mobile Innovation Network
Mobile Innovation Network

Published in Mobile Innovation Network

Welcome to our developers’ community! We’re a close-knit group passionate about coding and eager to share our practical insights with the world. Together, we embrace the endless possibilities of technology and empower each other to thrive in the ever-evolving software landscape.

Responses (1)