SwiftUI Generate QR code: Easy guide

QR codes are a great way to share information quickly and efficiently. Whether it’s a website URL, contact information, or something else, QR codes provide a seamless way to share information. With SwiftUI integrating QR code generation into your app has become simpler than ever. 

In this guide, we’ll walk through the process of creating QR codes in SwiftUI, by creating a re-useable SwiftUI view with a function that creates QR codes.

Why QR Codes?

Before diving into the implementation details, let’s briefly discuss why QR codes are valuable in modern app development:

  1. Efficiency: QR codes can encode a variety of data types, including text, URLs, contact information, and more, making them versatile for numerous use cases.
  2. User Experience: Scanning QR codes is intuitive for users and requires no manual data entry, also the camera on the phone has a built-in QR scanner.
  3. Integration: QR codes can seamlessly integrate with various marketing materials, digital assets, and physical products, providing a convenient way to share information.

How to generate a QR code in iOS Swift?

Now it’s time to generate the QR codes. Firstly we will create a function called generateQRCode and in the function, we will generate the QR code.

The function will return an Image so we easily can display the QR code using SwiftUI Image. In the function, we will convert the input text into data using ASCII encoding and then create an instance of CIFilter for generating QR codes.

Function to create a QR code from a string:

func generateQRCode(text: String) -> Image {
        let ciContext = CIContext()
        
        guard let data = text.data(using: .ascii, allowLossyConversion: false) else {
            return Image(systemName: "exclamationmark.octagon")
            
        }
        let filter = CIFilter.qrCodeGenerator()
        filter.message = data
        
        if let ciImage = filter.outputImage {
            if let cgImage = ciContext.createCGImage(
                ciImage,
                from: ciImage.extent) {
                
                return Image(uiImage: UIImage(cgImage: cgImage))
            }
        }
        return Image(systemName: "exclamationmark.octagon")
    }

Because we return a SwiftUI Image, we can just add the function to the body. We will also add a state variable called inputText which is the text the QR code is created from.

In the following example, you find the entire view to create and display a QR code:

import SwiftUI

struct CreateQRCodeView: View {
    
    @State var inputText: String = "https://softwareanders.com"
    
    var body: some View {
        
        generateQRCode(text: inputText)
            .interpolation(.none)
            .resizable()
            .scaledToFit()
    }
    
    func generateQRCode(text: String) -> Image {
        let ciContext = CIContext()
        
        guard let data = text.data(using: .ascii, allowLossyConversion: false) else {
            return Image(systemName: "exclamationmark.octagon")
            
        }
        let filter = CIFilter.qrCodeGenerator()
        filter.message = data
        
        if let ciImage = filter.outputImage {
            if let cgImage = ciContext.createCGImage(
                ciImage,
                from: ciImage.extent) {
                
                return Image(uiImage: UIImage(cgImage: cgImage))
            }
        }
        return Image(systemName: "exclamationmark.octagon")
    }
}

How to use the QR generator view

Because we have created a re-useable SwiftUI view, we can implement it anywhere we want.

In the following example, we create a new view and use the QR generator view:

import SwiftUI

struct UseQRGeneratorView: View {
    var body: some View {
        VStack {
            Text("Display qr code")
                .font(.title)
                .bold()
            
            CreateQRCodeView(inputText: "https://softwareanders.com")
            
            Text("Scan the code above to vist my website.")
        }
    }
}

The result:

Wrap up generate QR code in SwiftUI

In the guide, we created a QR generator view that can easily be re-used throughout your application. And as you can see it is really easy to create a QR code. QR codes are especially useful when sharing long text elements that need to be 100% correct like URLs.

I hope you can use this guide in your next application — happy coding 🙂

Scroll to Top