Flutter’da “Qr Code” Kullanımı
Herkese merhaba, bugün cross platformda mobil uygulama geliştirmemize imkan sağlayan Flutter’da bir projeye “Qr Code” teknolojisini nasıl ekleyebileceğimizden bahsedeceğim. İyi okumalar.
“Qr Code” teknolojisi özellikle pandemi süreciyle birlikte hayatımıza daha çok dahil oldu. Oluşturulması ve kullanılması oldukça kolay ve pratik olduğundan pek çok mobil uygulamada da yerini almaya başladı.
Nedir Bu “Qr Code”?
Kısaca özetlemek gerekirse qr code dediğimiz aslında özel bir verinin gömülü olduğu bir kare koddur. Kodun köşelerinde bulunan kareler kodun pozisyonunu belirlerken kodun kalan kısmı veridir. Telefon kamerası veya kod tarayıcı kullanılarak kod çözümlenir ve veri taratan kişiye iletilir.
Flutter’da Qr Code
Flutter geliştiricileri de bu konuyu kulak ardı etmeyip qr code oluşturmak için “qr_flutter” taratmak için ise “flutter_barcode_scanner” eklentisini oluşturdular. Şimdi bu eklentileri sırasıyla nasıl kullanabileceğimize beraber bakalım.
Adım 1— Paketleri Ekleme
pub.dev sitesinden qr_flutter ve flutter_barcode_scanner eklentisinin güncel sürümünü pubspec.yaml dosyasına ekleyelim.
Adım 2— Gerekli Düzenlemeleri Yapma
Android için herhangi bir düzenleme gerekmezken iOS için ufak bir düzenleme yapmamız gerek. Projenin içerisindeki iOS/Runner klasörü içerisindeki Info.plist dosyasına aşağıdaki kodları eklememiz yeterli olacaktır.
Adım 3 — Qr Code Oluşturma
Paketlerimizi projemize ekledikten sonra qr code oluşturmak istediğimiz sayfaya qr_flutter eklentisini import edelim. Qr Code içine koyacağımız datayı da tanımladıktan sonra QrImage widget’ını gerekli parametreleri ile birlikte sayfaya ekleyelim.
Parametrelerin Türleri ve Anlamları
data (String): Qr Code’un içeriğidir.
version (QrVersions): Qr Code’un büyüklüğüdür. 1–40 aralığında değer alır. Default => auto.
backgroundColor (Color): Qr Code'un arka plan rengidir. Default => transparent.
foregroundColor (Color): Qr Code'un verilerinin rengidir. Default => black.
size (double): Qr Code'un boyutudur.
padding (EdgeInsets): Qr Code ile arka alan arasındaki piksel boşluğudur. Default => 10.
gapless (bool): Pikseller arasındaki boşluğun olup olmamasını belirler. Doğru ise boşluksuz, yanlış ise boşlukludur. Default => true.
errorStateBuilder (void Function): Herhangi bir hata durumunda çalıştırılan özelleştirilebilir fonksiyondur. Default => null.
errorCorrectionLevel (QrErrorCorrectLevel): Qr Code'da hasar veya tahribat olduğunda çalışmayı devam ettirme yeteneğinin seviyesidir. Default =>L.
constrainErrorBounds (bool): Hata olması durumunda gösterilecek hata widget'ının; Qr Code boyutundan büyük olamamasıdır. Doğru ise olamaz, yanlış ise olabilir. Default => true.
dataModuleStyle (QrDataModuleStyle):
color (Color): Datayı içeren kısmın rengidir ancak foreground tanımlı ise geçersiz olur. Default => black.
dataModuleShape (QrDataModuleShape): Pikselleri kare veya yuvarlak yapmanızı sağlar. Default => square.
eyeStyle (QrEyeStyle):
color (Color): Köşedeki karelerin rengidir ancak foreground tanımlı ise geçersiz olur. Default => black.
eyeShape (QrEyeShape): Köşelerin şeklini kare veya yuvarlak yapmanızı sağlar. Default => square.
embeddedImage (AssetImage): Qr Code'un ortasına resim koymanıza imkan sağlar.
embeddedImageStyle (QrEmbeddedImageStyle):
color (Color): Resminizin rengini ayarlamanızı sağlar.
size (Size): Resminizin boyutunu ayarlamanızı sağlar.
embeddedImageEmitsError (bool): Doğru ise resimde hata olduğunda error fonksiyonu çağırır false ise resimde hata olduğunda resim yok gibi düşünerek devam eder. Default => false.
semanticsLabel (String): İçeriği tanımladığınız etikettir. Default => 'qr code'.
Not 1: Bu adımlar bizim statik bir qr code oluşturmamızı sağlar. Eğer ki dinamik qr code üretmek istiyorsanız datayı textformfield ile alabilirsiniz.
Not 2: Eğer ki resimli qr code oluşturmak isterseniz resminizi projenize eklemeniz ve pubspec.yaml a da tanımlamanız gerekecektir.
Adım 4 — Qr Code Taratma
Gelelim son başlığımız olan taratma konusuna. Taratma işlemini yapmak istediğimiz sayfaya flutter_barcode_scanner eklentisini ekleyelim. Ardından sonucu tutacağımız datayı ve işlemleri yapacağımız scanQrCode fonksiyonunu tanımlayalım.
Parametrelerin Türleri ve Anlamları
lineColor (String): Tarama ekranındaki kenar çizgisi rengidir. Hex kodu olarak girmeniz gerekir.
cancelButtonText (String): İptal butonu yazısıdır.
isShowFlashIcon (bool): Flaş ikonunun görünüp görünmemesini belirler. True görünür, false görünmez.
scanMode (ScanMode): Taratmak istenilen objenin qr code ya da barkod olmasını belirler.
Not 3: Metod ilk açılışta çağrılmak isteniyorsa initState içerisine tanımlanmalı. Tıklanma ile çağrılmak isteniyorsa butonun onPressed parametresine verilmesi yeterli olacaktır.
Hepsi bu kadar. Artık Flutter’da Qr Code oluşturabilir ve taratabilirsiniz. Uygulamanın GitHub linkine buradan ulaşabilirsiniz. Okuduğunuz için teşekkür ederim. İyi çalışmalar.
Kaynakça
