Flutter QR Code Scan Simple example

https://pub.dev/packages

Page 1 | Top packages

 

If you access the Flutter (Dart) package site above and search for qrcode, you will see many packages.

Let's use the qrscan package from the above list.

From now on, we will assume that you have already created a Flutter project.

https://blog.naver.com/chandong83/221839307790

VSCode에서 Flutter(플러터) 프로젝트 만들기

The work proceeds in the following order.

1. Add and download packages to pubspec.yaml

2. Add permission to AndroidManifest.xml for Android

3. Writing source code

1. Add qrscan package to pubspec.yaml

Location: project / pubspec.yaml

To use the qrscan package, add the qrscan package as shown below.

dependencies:
...
qrscan: ^ 0.2.17 # added

After adding the package, download and apply the package with the following command.

Flutter pub get

2. Add AndroidManifest.xml permission

Location: project / android / app / src / main / AndroidManifext.xml

Add permission to control the Android camera and storage.

Actually, the code we test does not need to be related to the repository, but it is inevitable because it is used entirely within the qrscan package.

 

3. main.dart complete source code

Location: project / lib / main.dart

This source code is written using only the parts necessary for scanning the QR code to help understanding.

Anyone who knows the basics of Flutter will understand it without difficulty.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:qrscan/qrscan.dart' as scanner; //Use the qrscan package as the scanner alias.

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

class MyApp extends StatefulWidget {
	@override
	_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
	String _output = 'Empty Scan Code';
	@override
	initState() {
	super.initState();    
	}

	@override
	Widget build(BuildContext context) {
	return MaterialApp(
		home: Scaffold(
		backgroundColor: Colors.grey[300],
		body: Builder(
			builder: (BuildContext context) {
			return Center( 
				//QR scan value displayed in the center
				child: Text(_output, style: TextStyle(color: Colors.black)),);
			},
		),
		//Running qr scan function with floating action button
		floatingActionButton: FloatingActionButton(
			onPressed: () => _scan(),
			tooltip: 'scan',
			child: const Icon(Icons.camera_alt),
		    ),
		),
	  );
	}
	
	//Asynchronous function    
	Future _scan() async {
	//Start scan-blocking until scan
	String barcode = await scanner.scan();
	//When the scan is completed, the status is requested while saving the string in _output.
	setState(() => _output = barcode);   
	}
}

4. Main screen

It is marked as Empty Scan code in the middle and press the camera-shaped button at the bottom to start the QR scan.

When the scan is complete, the QR code scanned will be displayed in the middle.

 

 

5. Demo video