Flutter | Membuat Scanner QR dan barcode

Oke kita akan membuat scanner barcode pada aplikasi flutter, saya menggunakan base aplikasi yang sudah kita buat sebelumnya disini

Pertama tama kita bisa kunjungi link berikut untuk mendapatkan dokumentasi mengenai dependencies yang akan kita gunakan disini

jika sudah masuk ke tab installation dan copy kode yang ada :

Buka android studio, kemudian buka pubspec.yaml kemudian paste kode diatas kedalam pubscpec.yaml seperti gambar berikut :

Setelah itu kita lakukan pub get, bisa dengan cara membuka terminal pada android studio kemudian tuliskan kode :

flutter pub get

Dan tekan enter, jika hasil sama dengan gambar dibawah berarti kita berhasil mendapatkan depedenciesnya :

Setelah itu kita import class yang dibutuhkan dengan mengcopy kode dibawh ini :

import ‘package:flutter_barcode_scanner/flutter_barcode_scanner.dart’;

disini saya akan menggunakan Class Menu Dua untuk saya jadikan tempat Scanner, jadi saya akan mengcopy kode import diatas ke menu_dua.dart, jika mengcopy kode import diatas kita akan rubah MenuDua yang sebelumnya StatelessWidget menjadi StatefulWidget seperti kode dibawah ini :

class MenuDua extends StatefulWidget{
 @override
 _MenuDuaState createState() => _MenuDuaState();
 
 }
 
 class _MenuDuaState extends State<MenuDua>{
 @override
 Widget build(BuildContext context) {
 
 }
 }

kemudian tambahkan kode berikut :

String _scanBarcode = '-';

kode diatas digunakan untuk menyimpan text hasil dari scan yang kita lakukan nantinya

selanjutnya kita buat tampilan aplikasinya agar rapi, saya akan menambahkan assets gambar berupa barcode pada halaman scanner, kalian boleh skip yang satu ini, tapi jika ingin tau kita hanya perlu membuat folder baru dengan nama bebas sesuai dengan kehendak kalian, saya membuat folder dengan nama assests.

Klik kanan pada root direktori dari project kita kemudian new -> directory, seperti gambar dibawah :

Jika sudah copy file gambar kalian kedalam folder asstes tersebut, jika sudah kita lakukan registrasi terhadap assets yang barusan kita tambahkan tersebut di pubscpe.yaml

Buka pubspec.yaml kemudian scroll kebawah atau search ‘assets’ tanpa tanda kutip seperti gambar dibawah ini :

Perhatikan pada gambar yang diberikan garis merah, kita membutuhkan kode tersebut, jadi kita hilangkan saja tutup kodenya dan ikuti seperti gambar dibawah ini :

Samakan directory dan nama file beserta tipe filenya. Jika sudah jalankan perintah :

flutter pub get

pada terminal yang disediakan android studio :

Selanjutnya kita load gambar yang kita tambahkan ke assets tadi dengan cara :

Image(image:
  AssetImage('assets/qrcode.png'),
  height: MediaQuery.of(context).size.height * 0.5,
),

Kode MediaQuery ini digunakan untuk mengukur ketinggian agar tampilan menjadi responsive, 0.5 ini berarti 50% dari ukuran layar hehe

Selanjutnya tambahkan satu Text untuk menampilakn hasil scan dan dua button yang akan kita gunakan untuk melakukan scan barcode ataupun QR code. Saya menggunakan flatbutton yang saya buat sudutnya menjadi melengkung,

Berikut kode untuk text :

Text('Scan result :', style: TextStyle(fontSize: 24),),
Text('$_scanBarcode', style: TextStyle(fontSize: 24),),

Dan berikut kode untuk tombol scannya :

FlatButton(
  padding: EdgeInsets.all(15),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25.0),
      side: BorderSide(color: Colors.red[900], width: 2,)
  ),
  onPressed: (){},
  child: Text("Scan Barcode", style: TextStyle(color: Colors.red[900]),),
),
FlatButton(
  padding: EdgeInsets.all(15),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25.0),
      side: BorderSide(color: Colors.red[900], width: 2,)
  ),
  onPressed: (){},
  child: Text("Scan QR Code", style: TextStyle(color: Colors.red[900]),),
),

Dan saat dirun maka hasilnya akan seperti ini :

Dari sisi view sudah lanjut ke fungsi dari button button yang ada, dan copy kode berikut yang merupakan fungsi untuk melakukan Scanning dan perhatikan pada bagian ScanMode.QR, tinggal ubah menjadi barcode untuk melakukan scanning terhadap barcode, tetapi diakhir setelah saya tes ternyata Scanner QR Code juga bisa digunakan untuk scanning pada Barcode 😊

Future<void> scanQR() async {
  String barcodeScanRes;
  try {
    barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
        "#ff6666", "Cancel", true, ScanMode.QR);
    print(barcodeScanRes);
  } on PlatformException {
    barcodeScanRes = 'Failed to get platform version.';
  }
  if (!mounted) return;
  setState(() {
    _scanBarcode = barcodeScanRes;
  });
}

Jika sudah, kita Kembali ke bagian view dan panggil fungsi scanQR pada property onPressed(){} seperti kode dibawah ini :

onPressed: () => scanQR(),

Berikut keseluruhan kodenya :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
class MenuDua extends StatefulWidget{
  @override
  _MenuDuaState createState() => _MenuDuaState();
}
class _MenuDuaState extends State<MenuDua>{
  String _scanBarcode = '-';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(height: 60),
            Text('Barcode and QR Scanner', style: TextStyle(fontSize: 24, letterSpacing: 2.0, color: Colors.red[900]),),
            Image(image:
              AssetImage('assets/qrcode.png'),
              height: MediaQuery.of(context).size.height * 0.5,
            ),
            Text('Scan result :', style: TextStyle(fontSize: 24),),
            Text('$_scanBarcode', style: TextStyle(fontSize: 24),),
            SizedBox(height: MediaQuery.of(context).size.height * 0.1),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FlatButton(
                  padding: EdgeInsets.all(15),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                      side: BorderSide(color: Colors.red[900], width: 2,)
                  ),
                  onPressed: () => scanQR(),
                  child: Text("Scan Barcode", style: TextStyle(color: Colors.red[900]),),
                ),
                FlatButton(
                  padding: EdgeInsets.all(15),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                      side: BorderSide(color: Colors.red[900], width: 2,)
                  ),
                  onPressed: () => scanBarcodeNormal(),
                  child: Text("Scan QR Code", style: TextStyle(color: Colors.red[900]),),
                ),
              ],
            ),
          ],
        )
      ),
    );
  }
  startBarcodeScanStream() async {
    FlutterBarcodeScanner.getBarcodeStreamReceiver(
        "#ff6666", "Cancel", true, ScanMode.BARCODE)
        .listen((barcode) => print(barcode));
  }
  Future<void> scanQR() async {
    String barcodeScanRes;
      try {
      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          "#ff0000", "Cancel", true, ScanMode.QR);
      print(barcodeScanRes);
    } on PlatformException {
      barcodeScanRes = 'Failed to get platform version.';
    }
    if (!mounted) return;
    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }
//codenya sama dengan yang diatas, pembedanya di bagian ScanMode
  Future<void> scanBarcodeNormal() async {
    String barcodeScanRes;
        try {
      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          "#ff0000", "Cancel", true, ScanMode.BARCODE);
      print(barcodeScanRes);
    } on PlatformException {
      barcodeScanRes = 'Failed to get platform version.';
    }
    if (!mounted) return;
    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }
}

Berikut adalah hasilnya :

Untuk runnya kalau bisa gunakan device android asli ya, jangan emulator karena ada akses kamera dan kita lakukan scanning pada QR asli. Sekian cara untuk membuat QR code dan barcode Scanner menggunakan flutter, terima kasih 😊