Building Flutter QR Code Scanner, For ios and Android.

Introduction

In this article, I will create a QR code scanner, using plugging QR code Scanner, https://pub.dev/packages/qr_code_scanner. and generating text with camera, and if text contain any http than, it will open to a browser, else it will show a normal text.

This application contains.

1. Home screen to click A button to open QR code Scanner Screen.
2. QR code Scanner Screen.
3. Text or Web View Screen if data contain any url.

Android Setup

change android gradle minSdkVersion 16 to 21 in gradle file android/app/gradle.

minSdkVersion 21

iOS Integration

in order to use this plugin, add the following to your Info.plist file:

<key>io.flutter.embedded_views_preview</key>
<true/>

Project Dependencies

pubspec.yaml file consist these plugin dependencies:

dependencies:
qr_code_scanner: ^0.0.10
utter_widget_from_html: ^0.2.2+1

1. qr_code_scanner :- written by Julius Canute, for Qr code scanning.
2. wbview_flutter :- by Flutter Team, It provides a WebView widget.

Home Screen

This home screen contain one single button, when you click it, it will open QR code scanner screen, where you have to give access to your camera to capture QR code.

QR Scanner Screen

This screen scan QR code, where user has give camera access, and it can flash light turn on and turn off.

text screen / webview screen.

if text containing a url then it will show a WebView screen other wise a normal screen will appears.

This is not the end

So here we come to the end of this article, but this is not the end, this is my first article, I hope will be continue post new things with some amazing idea,This work for both ios and android, if you have any question you can asked me in comment section. Thanks for reading.

github repositories