Easy QR Code Scanner with Flutter

Icons made by Freepik, Smashicons, and Vectors Market from www.flaticon.com

For a long time, I thought that reading a simple QR code was a complex task, but it actually isn't. If you are just starting developing apps for Android and iOS, you might face a requirement to add a QR scan code feature in your app. That's why in this post I will give you a step-by-step guide on how to create a QR code scanner with Flutter


1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the  “Flutter: New Project” option:

2. Create a folder called widgets inside the lib folder and create an scan_qr.dart file. This is where we are going to work:

3. Also, create a folder apps, and inside it create a main_app.dart file:

4. Remove anything from the main.dart file, import the main_app.dart file and call your main app:

import 'package:flutter/material.dart'; 
import 'package:qr_reader_test/apps/main_app.dart'; 
void main() => runApp(ScanApp());

5. Open the main_app.dart and add a stateless widget that will return our main widget app:

import 'package:flutter/material.dart';
import 'package:qr_reader_test/widgets/scan_qr.dart';

class ScanApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
     
    return MaterialApp(
    
       title: 'My App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'Quicksand',
        primarySwatch: Colors.purple,
      ),
      home:  ScannerApp(),

    );
  } 
 }

6. Open the scan_qr.dart widget and create the ScannerApp Stateful widget. Copy the following code to create our widget skeleton:

import 'package:flutter/material.dart';

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

class ScannerApp extends StatefulWidget {
  @override
  _ScannerAppState createState() => _ScannerAppState();
}

class _ScannerAppState extends State<ScannerApp> {

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Our Custom QR Scanner'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[           
               
            ],
          ),
        ),
      ),
    );
  }
}

7. In order to scan QR codes, import the qrscan plugin to your flutter project. Open the pubspec.yaml file, and add it as a dependency:

qrscan: ^0.2.17

8. Go back to the scan_qr.dart widget. Import the qrscan plugin as scanner, and in addition to that, import the async and typed_data libraries:

9.test

import 'package:qrscan/qrscan.dart' as scanner; 
import 'dart:async'; 
import 'dart:typed_data';

10. Create two variables

String barcode = ''; 
Uint8List bytes = Uint8List(200);

11. Create a future asynchronous function called _scanFromCamera, where you will await the response from the scanner and then set the value for the barcode variable:

Future _scanFromCamera() async {
String barcode = await scanner.scan();
setState(() => this.barcode = barcode);

}

12. Let's go back to the widget, and create a RaisedButton that on pressed will call the _scanFromCamera function, and will read the content of the QR code:

SizedBox( 

 width: 200, 
 height: 200, 

 child: Image.memory(bytes), 

 ), 

Text('Result of reading QR: $barcode'), 
RaisedButton( 
 onPressed: _scanFromCamera, 
child: Text("Scan QR Code")
), 

SizedBox( 

 height: 128,

 ),

14. And that's it! You can scan QR codes with Flutter!

15. If you have questions or suggestions, drop a comment below!

Get the source code here: https://github.com/rjcalifornia/qr_reader_test