QR Code Scanner di Flutter

Cara membuat QR Code Scanner di Flutter

Pengenalan

QR Code sampai saat ini pemanfaatannya masih banyak digunakan di beberapa aplikasi besar. Jangan jauh-jauh ambil contohnya coba lihat beberapa aplikasi di HP kita sekarang saja sudah ada seperti Go-Jek, OVO, DANA dan masih banyak lagi aplikasi lainnya.

Beberapa aplikasi besar yang menggunakan fitur Scanner

Ini membuktikan bahwa fitur scanner pada aplikasi mobile sampai saat ini masih banyak dimanfaatkan oleh berbagai kalangan industri dan salah satunya adalah industri fintech. Oleh karena itu, pada tulisan kali ini saya akan memberikan contoh mengenai bagaimana cara membuat fitur scanner QR Code di Flutter. Selain itu, saya juga pernah menulis tentang cara membuat fitur scanner QR Code di Android Native. Bagi fans berat Android Native bisa baca tulisan tersebut di link berikut ya.

QR Code Scanner di Android dengan ZXing

Contoh Projek

Mulai Pembuatan Projek

Silakan kita buka IDE atau Text Editor favorit kita masing-masing dan beri nama projek tersebut dengan nama flutter_qr_code_scanner.

Buat projek

Atur pubspec.yaml

Buka file pubspec.yaml dan tambahkan kode berikut didalam dependencies-nya.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  # A Flutter plugin for scanning 2D barcodes and QRCodes via camera.
  barcode_scan: ^2.0.1

Pada contoh projek kali ini kita menggunakan plugin barcode_scan.

barcode_scan | Flutter Package

Tipe plugin ini dia mengarahkan kita ke tampilan barcode scanner-nya jadi, dia nggak embedded kedalam widget-nya.

Integrasi Android

Untuk Android, ada beberapa hal yang perlu kita atur agar plugin tersebut bisa berjalan sebagaimana mestinya. Yang pertama, pastikan saja bahwa teman-teman memang secara default-nya ketika buat projek tadi sudah menggunakan Kotlin sebagai bahasa native si Android-nya jadi, kita nggak perlu atur-atur lagi untuk migrasinya. Lalu, kita perlu buka file AndroidManifest.xml dan tambahkan permission berikut.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_qr_code_scanner">

    <uses-permission android:name="android.permission.CAMERA" />

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_qr_code_scanner"
        android:icon="@mipmap/ic_launcher">
...

Integrasi iOS

Untuk sisi iOS, kita cuma perlu buka file Info.plist dan tambahkan kode berikut.

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

Dan yang perlu saya jelaskan dari proses integrasi diatas ialah bahwa integrasi yang kita lakukan tadi sebenarnya lebih mengarah ke izin kamera perangkat dari si Android dan iOS agar kameranya bisa diakses oleh app kita.

Atur file main.dart

Sekarang kita buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

class _MyAppState extends State<MyApp> {
  String barcode = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Barcode Scanner Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Scan'),
                onPressed: () async {
                  try {
                    String barcode = await BarcodeScanner.scan();
                    setState(() {
                      this.barcode = barcode;
                    });
                  } on PlatformException catch (error) {
                    if (error.code == BarcodeScanner.CameraAccessDenied) {
                      setState(() {
                        this.barcode = 'Izin kamera tidak diizinkan oleh si pengguna';
                      });
                    } else {
                      setState(() {
                        this.barcode = 'Error: $error';
                      });
                    }
                  }
                },
              ),
              Text(
                'Result: $barcode',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Adapun penjelasan dari kode diatas adalah sebagai berikut

1. Pertama, kita ada membuat 2 widget yaitu RaisedButton dan Text.
2. Widget RaisedButton kita pakai agar si pengguna bisa melakukan scan melalui tombol tersebut.
3. Widget Text berfungsi sebagai output dari hasil scan-nya dimana, untuk menampilkan datanya kita menggunakan variable.
4. Untuk menjalankan scan-nya kita bisa menggunakan kode BarcodeScanner.scan() dan karena fungsi tersebut mengembalikan nilai future maka, kita bisa tambahkan kode await didepannya seperti berikut await BarcodeScanner.scan()
5. Dan hasil dari await BarcodeScanner.scan() kita simpan kedalam sebuah variable.
6. Lalu, variable tersebut kita masukkan kedalam fungsi setState() sehingga UI app kita akan mem-build kembali dengan data yang terbaru.

Output

Berikut ialah output akhir dari programnya.

Output Android

Output iOS

Contoh diatas adalah contoh scanner yang mengarahkan kita ke tampilan scanner-nya alias tampilannya tidak embedded kedalam widget. Lalu, bagaimana dengan contoh scanner yang berada didalam widget. Silakan lanjut baca lagi ya 😉.

Contoh Scanner Didalam Widget

Untuk yang contoh scanner didalam widget kita bisa menggunakan plugin berikut ya.

qr_code_scanner | Flutter Package

Silakan kita buka file pubspec.yaml dan tambahkan plugin tersebut ya.

# QR code scanner that can be embedded inside flutter.
qr_code_scanner: ^0.0.12

Selanjutnya kita perlu atur file Info.plist untuk sisi iOS dan tambahkan kode berikut.

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

Selanjutnya, silakan kita buka file main.dart dan ubah kodenya menjadi seperti berikut.

import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';

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

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

class _MyAppState extends State<MyApp> {
  final GlobalKey qrKey = GlobalKey();
  String barcode = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Barcode Scanner Example'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: QRView(
                key: qrKey,
                onQRViewCreated: (controller) {
                  controller.scannedDataStream.listen((value) {
                    setState(() {
                      barcode = value;
                    });
                  });
                },
              ),
            ),
            Expanded(
              child: Center(
                child: Text('Result: $barcode'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Jadi, cara kerja dari kode diatas ialah kita sisipkan widget QRView kedalam app kita sehingga kita lebih leluasa terhadap tampilan dari scanner-nya. Lalu, didalam widget tersebut terdapat atribut onQRViewCreated dimana didalamnya ada callback controller yang berfungsi untuk melakukan listen ketika ada terdeteksi QR Code.

Dan berikut ialah outputnya.

Scanner didalam widget (Android)

Scanner didalam widget (iOS)

Kesimpulan

Jadi, kesimpulannya adalah buat teman-teman yang mau buat fitur QR Scanner silakan bebas pilih plugin yang ingin dipakai dan harap disesuaikan dengan kebutuhannya masing-masing ya. Di tulisan ini saya sudah berikan 2 contoh fitur scanner yaitu scanner yang diluar widget dan scanner yang didalam widget.

CoderJava/QR-Code-Scanner-Flutter