Create a QR based Identification Scanner App with Flutter

Icons made by phatplus, Vectors Market and Nikita Golubev from www.flaticon.com

On previous posts, I demonstrated how to display a dynamic list view from a JSON, and also how to create a QR code scanner. Those posts might seem as something easy to do, but I had main goal in mind. Initially what I had in mind was to create an QR-based user identification scanner app, and instead of just jumping into that, I decided to create two separate posts first, showing how to make basic things. Previously
I had the idea and the code ready to create the app, but I didn't have a nice design. If you see my previous posts, it is pretty clear that all the apps lack design. Luckily there are some people on Reddit that posts Flutter UI tutorials, which help me to save time and money. For this app, I used one of cybdom flutter designs: Flight Ticket App (my favorite btw) because looks and feels like a native app. Let's get started!

1. First, let's clone the Flight App UI project
2. Open the project with Visual Studio Code
3. Inside lib, create a models folder, and inside it, create a users.dart file:

4. Create the UsersModel, which will help us to find the user when we scan a QR code. Add the id, name, and userName, email and phone. Also add a Map from Json:

	class UsersModel {
	int id;
	String name;
	String userName;
	String email;
	String phone;
	UsersModel(
	this.id,
	this.name,
	this.userName,
	this.email,
	this.phone,
	);
	UsersModel.fromJson(Map json)
	: id = json['id'],
	name = json['name'],
	userName = json['username'],
	email = json['email'],
	phone = json['phone'];
	Map toJson() {
	return {
	'id': id,
	'name': name,
	'username': userName,
	'email' : email,
	'phone' : phone,
	};
	}
	}

view raw users.dart hosted with ❤ by GitHub

5. Create an api folder, and inside it create a active_users_api.dart file. Here we are going to get our users from an API:

	import 'dart:async';
	import 'package:http/http.dart' as http;
	const api_v1 = "https://jsonplaceholder.typicode.com";
	class UsersList {
	static Future getActiveUsers() {
	var urlUsrList = api_v1 + "/users";
	return http.get(urlUsrList);
	}
	}

view raw active_users_api.dart hosted with ❤ by GitHub

6. Now, add the HTTP and QRscan library to your pubspec.yaml file:

	qrscan: ^0.2.17
	http: ^0.12.0+2

view raw app_dependencies hosted with ❤ by GitHub

7. Go to the folder "lib -> ui -> screens" and open the home.dart file:

8. Import the following libraries/packages:

	import 'package:qrscan/qrscan.dart' as scanner;
	import 'dart:async';
	import 'dart:convert';
	import 'package:flight_app/api/active_users_api.dart';
	import 'package:flight_app/models/users.dart';

view raw import_packages hosted with ❤ by GitHub

9. Create an activeUsers variable, which will have our UserModels as list. Also, add a timer variable (for updating the list), an active variable, a barcode variable (to store the value of the QR code):

	var activeUsers = new List<UsersModel>();
	Timer timer;
	int _active = 0;
	String barcode = '';

view raw home.dart_variables hosted with ❤ by GitHub

10. Create a future asynchronous function, that will get the json and will convert it to an iterable list, then as a map and finally it will pass it to the model to make it a list:

	Future _getFromApi() async {
	UsersList.getActiveUsers().then((response) {
	setState(() {
	Iterable list = json.decode(response.body);
	activeUsers = list.map((model) => UsersModel.fromJson(model)).toList();
	});
	});
	}

view raw home.dart_getFromApi hosted with ❤ by GitHub

11. Load the active users by calling the _getFromApi function when the widget is created, and also load the timer. We will load users every 5 seconds (you can change that) by calling the _getFromApi function:

	initState() {
	super.initState();
	_getFromApi();
	timer = Timer.periodic(Duration(seconds: 15), (Timer t) => _getFromApi());
	}

view raw home.dart_initState hosted with ❤ by GitHub

12. 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 {
	print('testing');
	String barcode = await scanner.scan();
	setState(() => this.barcode = barcode);
	}

view raw home.dart_scanFromCamera hosted with ❤ by GitHub

14. For the purposes of this example, instead of sending the result of the scan to the backend, I will iterate through the users obtained from the API in Flutter, and search the user by ID with a for loop, and when the user has been found, it will push the result to the DetailScreen widget:

	Future _scanFromCamera() async {
	print('testing');
	String barcode = await scanner.scan();
	setState(() => this.barcode = barcode);
	for (int i = 0; i < activeUsers.length; i++) {
	if (activeUsers[i].id.toString() == barcode) {
	Navigator.push(
	context,
	MaterialPageRoute(
	builder: (ctx) => DetailsScreen(id: i, user: activeUsers),
	),
	);
	}
	}
	}

view raw home.dart_scanFromCamera_push_to_DetailsScreen hosted with ❤ by GitHub

15. Open the details.dart file. Replace everything in that file with the code below, in which we change how the information is displayed, and some colors as well:

	import 'package:flutter/material.dart';
	import 'package:flight_app/global.dart';
	import 'package:flight_app/ui/widgets/widgets.dart';
	class DetailsScreen extends StatelessWidget {
	final int id;
	final user;
	const DetailsScreen({Key key, @required this.id, this.user}) : super(key: key);
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	backgroundColor: Color.fromRGBO(49, 57, 69, 0.9),
	automaticallyImplyLeading: true,
	centerTitle: true,
	title: Text("VISITOR INFORMATION"),
	elevation: 0.0,
	actions: <Widget>[
	IconButton(
	icon: Icon(Icons.save),
	onPressed: () {},
	)
	],
	),
	body: Stack(
	children: <Widget>[
	Positioned.fill(
	child: Column(
	children: <Widget>[
	Flexible(
	flex: 1,
	child: Container(
	color: Color.fromRGBO(49, 57, 69, 0.9),
	),
	),
	Flexible(
	flex: 2,
	child: Container(),
	)
	],
	),
	),
	Positioned.fill(
	child: Container(
	height: double.infinity,
	margin: EdgeInsets.symmetric(horizontal: 35.0, vertical: 15.0),
	decoration: BoxDecoration(
	boxShadow: [
	BoxShadow(
	color: Colors.black45,
	blurRadius: 7.0,
	offset: Offset(0, 3),
	)
	],
	borderRadius: BorderRadius.circular(15.0),
	color: Color(0xfff7f9ff)),
	child: Column(
	children: <Widget>[
	Container(
	padding: const EdgeInsets.symmetric(
	horizontal: 15.0, vertical: 25.0),
	decoration: BoxDecoration(
	borderRadius: BorderRadius.only(
	topLeft: Radius.circular(15.0),
	topRight: Radius.circular(15.0)),
	gradient: LinearGradient(
	begin: Alignment.topCenter,
	end: Alignment.bottomCenter,
	colors: [Color.fromRGBO(49, 57, 69, 0.9), Color(0xfff7f9ff)],
	),
	),
	),
	Container(
	margin: EdgeInsets.symmetric(vertical: 15.0),
	padding: const EdgeInsets.all(15.0),
	color: Colors.white,
	child: Column(
	children: <Widget>[
	PassengerContainer(
	id: "${user[id].id}",
	imageUrl: userimageUrl,
	fullName: "${user[id].name}",
	email: "${user[id].email}",
	phone: "${user[id].phone}",
	username: "${user[id].userName}",
	),
	Divider(),
	],
	),
	),
	Image.network(boardingpassImg),
	],
	),
	),
	)
	],
	),
	);
	}
	}
	class FlightInfoRow extends StatelessWidget {
	final String title, content;
	const FlightInfoRow({Key key, this.title, this.content}) : super(key: key);
	@override
	Widget build(BuildContext context) {
	return Column(
	children: <Widget>[
	Text(
	"$title",
	style: Theme.of(context).textTheme.body1.apply(color: Colors.black45),
	),
	SizedBox(
	height: 3.0,
	),
	Text(
	"$content",
	style: Theme.of(context).textTheme.title.apply(color: Colors.black87),
	)
	],
	);
	}
	}

view raw details.dart hosted with ❤ by GitHub

16. Finally, open the passangercontainer.dart file, and replace everything there with the code below:

	import 'package:flutter/material.dart';
	class PassengerContainer extends StatelessWidget {
	final String imageUrl, fullName, id, email, phone, username;
	const PassengerContainer(
	{Key key, this.imageUrl, this.fullName, this.id, this.email, this.phone, this.username})
	: super(key: key);
	@override
	Widget build(BuildContext context) {
	return Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: <Widget>[
	CircleAvatar(
	backgroundImage: NetworkImage(imageUrl),
	),
	Spacer(
	flex: 1,
	),
	FittedBox(
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: <Widget>[
	Text(
	fullName,
	style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
	),
	Text(
	"Username: $username",
	style: TextStyle(fontSize: 13.0),
	),
	Text(
	"Identification number: $id",
	style: TextStyle(fontSize: 13.0),
	),
	Text(
	"Email: $email",
	style: TextStyle(fontSize: 13.0),
	),
	Text(
	"Phone number: $phone",
	style: TextStyle(fontSize: 13.0),
	),
	],
	),
	),
	Spacer(
	flex: 3,
	),
	],
	);
	}
	}

view raw passangercontainer.dart hosted with ❤ by GitHub

17. And that's it! You can run the app and scan QR codes:

18. As you can see, there are few explanations about the code and that's because it is mostly copy and paste from previous posts I linked at the beginning of this post. As you can see, Flutter is extremely flexible. I could just grab a Flutter design from github and integrate already working code in just few steps.

You can grab the full code for this app here: Card Scanner App UI

Also, you can view the article about the original design here: Flight Ticket App

This concludes the Create a QR based Identification Scanner App with Flutter tutorial. If you have questions, drop a comment below!