Tutorial Flutter QR Code Scanner: Setup dan Implementasi
Irhan Hisyam Dwi Nugroho
•
04 September 2025
•
28
Flutter QR Code Scanner memudahkan kamu menambahkan fitur pemindaian QR code ke aplikasi. Di tutorial ini, Warga Bimbingan, kita akan bahas cara setup dan implementasinya.
Kamu akan langsung belajar bagaimana menambahkan dependensi dan mengintegrasikan pemindaian QR ke dalam aplikasi Flutter. Yuk baca sampai akhir dan coba praktekkan langsung!
Baca juga: Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Apa Itu Flutter QR Code Scanner?
Flutter QR Code Scanner adalah sebuah package atau library yang memungkinkan aplikasi Flutter untuk memindai QR code dengan mudah.
Dengan menggunakan library ini, pengembang dapat mengintegrasikan fitur pemindaian QR code dalam aplikasi tanpa harus membuat fungsi pemindaian dari awal.
Flutter QR Code Scanner bekerja dengan menggunakan kamera perangkat untuk membaca dan mengenali QR code, lalu mengembalikan hasilnya dalam bentuk data yang dapat diproses lebih lanjut.
Dengan kemudahan ini, aplikasi Flutter bisa memanfaatkan QR code untuk berbagai keperluan, seperti autentikasi, pembayaran, atau berbagi informasi.
Baca juga : Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Keunggulan Flutter QR Code Scanner
Sumber: Canva
Flutter QR Code Scanner memiliki keunggulan-keunggulan yang membuatnya sangat berguna untuk aplikasi Flutter. Warga Bimbingan, berikut ini adalah beberapa keunggulan utama yang perlu kamu tahu:
1. Mudah Digunakan dan Implementasi Cepat
Dengan dokumentasi lengkap, Flutter QR Code Scanner memungkinkan implementasi yang sangat cepat.
Kamu hanya perlu menambahkan dependensi di pubspec.yaml dan mengikuti langkah-langkah mudah. Ini sangat membantu dalam mempercepat pengembangan aplikasi.
2. Kompatibilitas Lintas Platform
Flutter QR Code Scanner mendukung Android dan iOS dengan satu codebase. Kamu tidak perlu menulis kode terpisah untuk kedua platform, sehingga lebih efisien. Aplikasi akan bekerja secara konsisten di berbagai perangkat tanpa masalah.
3. Akses Kamera Secara Langsung
Package ini memungkinkan akses kamera perangkat secara langsung untuk memindai QR code.
Pemindaian bisa dilakukan dengan cepat tanpa penundaan. Pengguna langsung mendapatkan hasil pemindaian yang akurat dan instan.
4. Dukungan Pembacaan Berbagai Format QR
Flutter QR Code Scanner mendukung berbagai format QR seperti URL, teks, dan informasi lainnya.
Ini memberi aplikasi kamu lebih banyak opsi penggunaan QR code untuk berbagai keperluan. Fleksibilitas ini membuat aplikasi lebih interaktif dan berguna.
Baca juga : Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
Cara Menggunakan Flutter QR Code Scanner
Sumber: Canva
Untuk memanfaatkan Flutter QR Code Scanner di aplikasi kamu, ada beberapa langkah yang perlu dilakukan.
Berikut adalah langkah-langkah untuk mengimplementasikan fitur pemindaian QR code dengan qr_code_scanner:
Struktur Folder Proyek:
Berikut adalah struktur folder proyek Flutter yang sesuai dengan penggunaan QR Code Scanner:
/application_dibimbing /lib /scanqrcode.dart # Halaman untuk memindai QR Code /main.dart # Halaman utama aplikasi /ios /android /pubspec.yaml # Konfigurasi dependensi ... |
1. Pastikan Dependensi di pubspec.yaml Sudah Benar
Pertama, pastikan kamu telah menambahkan qr_code_scanner di file pubspec.yaml:
name: application_dibimbing description: A new Flutter project dependencies: flutter: sdk: flutter qr_code_scanner: ^0.5.0 # Gunakan versi terbaru yang mendukung null safety cupertino_icons: ^1.0.8 path_provider: ^2.1.5 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
Setelah itu, jalankan perintah berikut di terminal untuk memperbarui dependensi:
flutter pub get |
2. Buat main.dart
Di file main.dart, kita akan mengonfigurasi tampilan utama aplikasi dan halaman pemindaian QR code. Pastikan untuk mengimpor library yang diperlukan.
Contoh Kode: main.dart
import 'package:flutter/material.dart'; import 'scanqrcode.dart'; // Mengimpor file halaman pemindaian QR void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), // Halaman utama yang menampilkan tombol untuk memulai pemindaian ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('QR Code Scanner')), body: Center( child: ElevatedButton( onPressed: () { // Navigasi ke halaman pemindaian QR saat tombol ditekan Navigator.push( context, MaterialPageRoute(builder: (context) => ScanQR()), ); }, child: Text('Scan QR Code'), ), ), ); } } |
3. Buat Halaman Pemindaian QR: scanqrcode.dart
Di halaman ini, kita akan menampilkan widget untuk memindai QR code. Kita akan menggunakan QRView dari qr_code_scanner untuk menampilkan antarmuka pemindaian.
Contoh Kode: scanqrcode.dart
import 'package:flutter/material.dart'; import 'package:qr_code_scanner/qr_code_scanner.dart'; // Mengimpor package untuk QR code scanner class ScanQR extends StatefulWidget { @override _ScanQRState createState() => _ScanQRState(); } class _ScanQRState extends State<ScanQR> { final GlobalKey<QRViewControllerState> _qrKey = GlobalKey(); // Key untuk QRViewController String result = "Scan a QR code"; // Menyimpan hasil pemindaian QR @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Scan QR Code')), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ QRView( key: _qrKey, onQRViewCreated: (QRViewController controller) { controller.scannedDataStream.listen((scanData) { setState(() { result = scanData.code; }); }); }, ), Padding( padding: const EdgeInsets.all(8.0), child: Text( result, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), ), ], ), ); } } |
Penjelasan Kode:
- QRView: Ini adalah widget utama yang digunakan untuk menampilkan tampilan pemindaian QR code. Widget ini menerima callback onQRViewCreated, yang dipanggil saat pemindaian QR dimulai.
- QRViewController: Mengontrol pemindaian QR code dan mendengarkan hasil pemindaian melalui scannedDataStream.
- scannedDataStream.listen: Menangkap data QR code yang dipindai dan memperbarui tampilan dengan hasilnya.
4. Pengaturan Izin Kamera
Agar aplikasi dapat memindai QR code, kamu perlu memastikan bahwa aplikasi memiliki izin untuk mengakses kamera perangkat.
Untuk Android:
Tambahkan izin kamera di file android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA"/> |
Untuk iOS:
Tambahkan izin kamera di file ios/Runner/Info.plist:
<key>NSCameraUsageDescription</key> <string>We need access to your camera to scan QR codes</string> |
5. Menjalankan Aplikasi
Setelah semua langkah di atas dilakukan, jalankan aplikasi menggunakan perintah berikut:
flutter run |
Aplikasi akan menampilkan halaman utama dengan tombol untuk memindai QR code. Ketika tombol ditekan, pengguna akan diarahkan ke halaman pemindaian QR, dan hasil pemindaian akan ditampilkan di layar.
Baca juga : Panduan Lengkap Flutter Developer Roadmap untuk Pemula
Ingin Jadi Mobile Developer Profesional?
Setelah mempelajari cara implementasi QR Code Scanner di Flutter, kini saatnya mengembangkan kemampuan mobile development kamu ke level berikutnya!
Yuk, ikuti Bootcamp Mobile Developer di dibimbing.id! Di sini, kamu akan mempelajari Flutter secara mendalam, mulai dari desain antarmuka responsif hingga pengembangan aplikasi mobile yang optimal di berbagai perangkat.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantu kamu menguasai mobile development dan siap bekerja di dunia teknologi.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia IT semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu menjadi Mobile Developer profesional! #BimbingSampeJadi!
Referensi:
- Flutter - QR Code Scanner and QR Generator [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
