How to Generate QR Code in flutter app – qr_flutter

Hi Guys, Welcome to Proto Coders Point.

In this Flutter tutorial, We will learn How to Generate QR code in flutter by using a package called qr_flutter.

qr flutter package

QR Flutter is very useful and time saving package/plugin that helps developers to implement QR Code Generator in Flutter app.

By using this Flutter QR Generator package we can easily generate QR Code with it QrImage Widget.

Video Tutorial

Add QR Flutter package as a external library

Add in dependencies

Open pubspec.yaml file and under dependencies section add qr_flutter package

dependencies:
qr_flutter: ^4.0.0

Now, after adding the dependencies, just hit pub get button or run below command in your IDE terminal.

flutter pub get

So this will download the package into your project as external library.

Import qr_flutter.dart

now in your flutter dart code, you need to import qr_flutter.dart file where you are generating QR and displaying it.

import 'package:qr_flutter/qr_flutter.dart';

Properties of qr_flutter

QR Version 1 – 40 Example

QR Code Flutter Examples

Basic QR Code Widget

QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
size: 320,
)

QR Image with a Image at center of QR CODE

QrImage(
                data: controller.text,
                size: 300,
                embeddedImage: AssetImage('images/logo.png'),
                embeddedImageStyle: QrEmbeddedImageStyle(
                  size: Size(80,80)
                ),
 ),

Complete Source Code – How to Generate QR Code in Flutter

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:qrscan/qrscan.dart' as scanner;
import 'package:permission_handler/permission_handler.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GenerateQRPage(),
    );
  }
}

class GenerateQRPage extends StatefulWidget {

  @override
  _GenerateQRPageState createState() => _GenerateQRPageState();
}

class _GenerateQRPageState extends State<GenerateQRPage> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR GENERATOR'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              QrImage(
                data: controller.text,
                size: 300,
                embeddedImage: AssetImage('images/logo.png'),
                embeddedImageStyle: QrEmbeddedImageStyle(
                  size: Size(80,80)
                ),
              ),
              Container(
                margin: EdgeInsets.all(20),
                child: TextField(
                  controller: controller,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(), labelText: 'Enter URL'),
                ),
              ),
              ElevatedButton(
                  onPressed: () {
                    setState(() {

                    });
                  },
                  child: Text('GENERATE QR')),

           
            ],
          ),
        ),
      ),
    );
  }
}