Cara Membuat Qr Code Scanner di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membaut qr code scanner atau pembaca qr code di flutter. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Pada kesempatan kali ini kita akan belajar cara membuat qr code scanner pada android atau flutter. Kita bisa membuat qr code scanner dengan mudah dengan menggunakan paket qr_code_scanner. Sederhana saja, nantinya terdapat kamera yang dapat memindai qr code. Lalu hasilnya akan ditampilkan di bagian bawah kamera. Kamera akan secara aktif membaca setiap qr code yang berhasil discan dan ditampilkan kembali hasilnya. Scroll ke bagian bawah artikel ini untuk melihat hasil akhirnya.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Cara Cepat dan Mudah Membuat QR Code Scanner di Flutter

1. Buat sebuah project flutter baru dengan nama yang kalian inginkan. Dan gunakan flutter versi terbaru atau flutter yang mendukung null safety.

2. Buka pubspec.yaml lalu tambahkan paket qr_code_scanner: seperti gambar di bawah ini.

3. Buat sebuah file baru dengan nama qr_code_scanner_widget.dart di dalam folder lib. Ikuti scriptnya seperti di bawah ini.

  import 'package:flutter/material.dart';
  import 'package:qr_code_scanner/qr_code_scanner.dart';
  
  class QRCodeScannerWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => _QRCodeScannerWidgetState();
  }
  
  class _QRCodeScannerWidgetState extends State<QRCodeScannerWidget> {
    final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
    QRViewController? controller;
    String qrText = "";
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(
            'QR Code Exercise',
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10),
              child: Text(
                'point the camera at the qr code to start scanning',
                style: TextStyle(fontSize: 20),
                textAlign: TextAlign.center,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Align(
              alignment: Alignment.center,
              child: Container(
                padding: EdgeInsets.only(left: 10, right: 10),
                width: double.infinity,
                height: 300,
                child: QRView(
                  key: qrKey,
                  onQRViewCreated: _onQRViewCreated,
                  overlay: QrScannerOverlayShape(
                    borderColor: Colors.red,
                    borderRadius: 10,
                    borderLength: 20,
                    borderWidth: 5,
                    cutOutSize: MediaQuery.of(context).size.width * 0.6,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              'Hasil Scan: $qrText',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      );
    }
  
    void _onQRViewCreated(QRViewController controller) {
      this.controller = controller;
      controller.scannedDataStream.listen((scanData) {
        setState(() {
          qrText = scanData.code!;
        });
      });
    }
  
    @override
    void dispose() {
      controller?.dispose();
      super.dispose();
    }
  }

Penjelasan Script di atas:

1. Import package yang diperlukan yaitu flutter/material.dart dan qr_code_scanner/qr_code_scanner.dart.\
2. Buat class QRCodeScannerWidget yang merupakan turunan dari StatefulWidget.
3. Dalam class _QRCodeScannerWidgetState, deklarasikan globalKey dengan tipe GlobalKey yang digunakan untuk mengakses objek QR code scanner.
4. Deklarasikan controller dengan tipe QRViewController? yang digunakan untuk mengontrol QR code scanner.
5. Deklarasikan qrText dengan tipe String yang akan menyimpan hasil dari pemindaian QR code.
6. Override method build yang akan membangun tampilan widget.Di dalam method build, buat sebuah Scaffold sebagai kerangka halaman utama.
7. Di dalam Scaffold, buat appBar yang berisi judul halaman dengan menggunakan widget AppBar.
8. Di dalam Scaffold, buat body yang berisi tampilan utama dengan menggunakan widget Column.
9. Di dalam Column, atur mainAxisAlignment menjadi MainAxisAlignment.center agar widget-widget di dalamnya berada di tengah vertikal halaman.
10. Di dalam Column, tambahkan widget Text yang berisi pesan "point the camera at the qr code to start scanning".
11. Di dalam Column, tambahkan widget SizedBox untuk memberikan jarak antara widget-widget.
12. Di dalam Column, gunakan widget Align dengan properti alignment yang diatur menjadi Alignment.center untuk memposisikan widget secara horizontal di tengah.
13. Di dalam Align, buat sebuah Container untuk mengatur tampilan QR code scanner dengan ukuran dan padding tertentu.
14. Di dalam Container, gunakan widget QRView untuk menampilkan QR code scanner.
15. Di dalam QRView, atur key menjadi qrKey yang telah dideklarasikan sebelumnya.
16. Di dalam QRView, atur onQRViewCreated menjadi _onQRViewCreated yang merupakan method untuk menangani kejadian QR code berhasil dipindai.
17. Di dalam QRView, gunakan overlay dengan tipe QrScannerOverlayShape untuk mengatur tampilan lingkungan QR code scanner seperti warna garis, ukuran, dan sebagainya.
18. Di dalam Column, tambahkan widget SizedBox untuk memberikan jarak antara widget-widget.
19. Di dalam Column, tambahkan widget Text yang akan menampilkan hasil scan QR code.
20. Di dalam method _onQRViewCreated, simpan hasil scan QR code ke dalam variabel qrText dan perbarui tampilan dengan memanggil setState.
21. Override method dispose untuk melakukan pembersihan saat widget dihapus.
22. Dalam method dispose, panggil dispose pada controller untuk membersihkan sumber daya yang digunakan oleh QR code scanner.

4. Buka main.dart di dalam folder lib. Lalu ganti script di dalamnya dengan script di bawah ini.

import 'package:flutter/material.dart';
  import 'qr_code_scanner_widget.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: QRCodeScannerWidget()
      );
    }
  }

5. Semua step sudah kita kerjakan, saatnya kita melakukan uji coba. Jalankan emulator. Jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

Flutter QR Code Scanner

Sekarang kalian sudah bisa memanfaatkan kamera android untuk membaca qr code. Selanjutnya kalian bisa melakukan improvisasi dengan menggabungkan data api untuk mengecek apakah qr code ditemukan atau tidak. Dan juga improvisasi pada aplikasi lainnya.

Sekian tutorial kali ini tentang cara membuat QR Code Scanner di Flutter. Semoga tulisan singkat ini membantu. Jika ada pertanyaan silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.