The Example will show about QR Code Generator And Scanner Flutter. This article will creating a simple application using qr_flutter 3.1.0 package. The qr_flutter 3.1.0 package have features like that :

  • Built on QR – Dart
  • Automatic QR code version/type detection or manual entry
  • Supports QR code versions 1 – 40
  • Error correction / redundancy
  • Configurable output size, padding, background and foreground colors
  • Supports image overlays
  • Export to image data to save to file or use in memory
  • No internet connection required

You can read other article with flutter  in this section :

First, we must create a project using Visual Studio Code software with name “barcode_scanner”. Let’s to create a new project using Visual Studio Code:

  1. Invoke View > Command Palette.
  2. Type “flutter”, and select the Flutter: New Project.
  3. Enter a project name, example such as “barcode_scanner”, and press Enter.
  4. Create or select the parent directory for the new project folder.
  5. Wait for project creation progress to complete and the main.dart file to appear.


Next, add the qr_flutter package to your project. The qr_flutter  is a Flutter library for simple and fast QR code rendering via a Widget or custom painter.

Then we click the get package, wait until the process is complete.

After we created pubspec.yaml , You must edit file with name main.dart like below :

We will create home_screen.dart to default screen, Our home screen can be allow the user to select scan or generate QR Code by tapping on button. The widget will return a Column with 2 RaisedButton as the children, one of routing to generating QR code screen and one of routing to scanning QR code screen when the button is tapped. The home screen code like below:

For detail widget we need create detail.dart :

Create scan screen widget display the start scan with camera button and a Text widget that display the result of the camera QR code scan. It uses the Column Widget as the parent for the Text and Button children.

Create Generate screen widget displays a TextField for user enter the text data that will be used to generate the QR Code widget using the qr_flutter plugin when the user tap on the submit Button. It also provides a Share Button in the Navigation bar to share the image png file to other apps in iOS and Android.

The application can be run to show output below :




For complete source code you can see flutter qr code scanner in Here.

Thank you for reading this article about QR Code Generator And Scanner Flutter, I hope this article is useful for you. Visit My Github about Flutter in Here.

QR Code Generator And Scanner Flutter

Leave a Reply

Your email address will not be published. Required fields are marked *