How to use Flutter to generate QR code

In this blog, we will learn how to create QR codes using Flutter and implement some common customization options. By using the qr_flutter plugin, we can easily generate basic QR codes and even embed images into QR codes. The final effect will include two QR codes: one is a normal QR code and the other is a QR code with embedded pictures. In addition, we will also implement a text input box where users can dynamically modify the content of the QR code.

1. In the file, add the qr_flutter plugin:

  flutter:
    sdk: flutter
  qr_flutter: ^4.0.1

2. We will display two QR codes in the QRCodeScreen page: one is an ordinary QR code and the other is a QR code with an image.

Complete code implementation:

import 'package:flutter/';
import 'package:qr_flutter/qr_flutter.dart';  // Import the qr_flutter plugin 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QRCodeScreen(),
    );
  }
}
 
class QRCodeScreen extends StatefulWidget {
  @override
  _QRCodeScreenState createState() =&gt; _QRCodeScreenState();
}
 
class _QRCodeScreenState extends State&lt;QRCodeScreen&gt; {
  // Used to store the text content of the QR code  TextEditingController _controller = TextEditingController();
 
  @override
  void initState() {
    ();
    // Default QR code content    _controller.text = 'Enter content to change the QR code';
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Example'),
      ),
      body: Padding(
        padding: const (16.0),
        child: Column(
          mainAxisAlignment: ,
          children: &lt;Widget&gt;[
            // Show two QR codes in one line            Row(
              mainAxisAlignment: ,
              children: &lt;Widget&gt;[
                // Ordinary QR code                Column(
                  children: &lt;Widget&gt;[
                    QrImageView(
                      data: _controller.text,  // Use the contents of the input box                      version: ,
                      size: 160,  // Set the QR code size                      gapless: false,
                    ),
                    const SizedBox(height: 10),
                    const Text('Ordinary QR code', style: TextStyle(fontSize: 16)),
                  ],
                ),
                const SizedBox(width: 20),
                // QR code with image                Column(
                  children: &lt;Widget&gt;[
                    QrImageView(
                      data: _controller.text,  // Use the contents of the input box                      version: ,
                      size: 160,  // Set the QR code size                      gapless: false,
                      embeddedImage: const AssetImage('assets/'),  // Embed the picture                      embeddedImageStyle: const QrEmbeddedImageStyle(
                        size: Size(20, 20),
                      ),
                    ),
                    SizedBox(height: 10),
                    Text('QR code with picture', style: TextStyle(fontSize: 16)),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 30),
            // Input box, the user can change the content of the QR code            TextField(
              controller: _controller,  // Use text controller              decoration: const InputDecoration(
                labelText: 'Enter QR code content',
                border: OutlineInputBorder(),
              ),
              onChanged: (value) {
                setState(() {});  // Update the UI and refresh the QR code when the input box content changes              },
            ),
          ],
        ),
      ),
    );
  }
}

This is the end of this article about how to use Flutter to generate QR codes. For more related content on generating QR codes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!