Menerapkan Pin Code Fields di Flutter untuk Masukan Kode Verifikasi

August 1, 2023

Flutter adalah kerangka kerja pengembangan aplikasi seluler yang populer dan kuat, yang menyediakan berbagai widget yang kaya fitur. Salah satu widget yang berguna untuk mengumpulkan masukan kode verifikasi adalah pin_code_fields. Dalam artikel ini, kita akan membahas tentang pin_code_fields, serta memberikan contoh penggunaan untuk memahami cara menggunakannya.

Apa itu Pin Code Fields?

pin_code_fields adalah pustaka di Flutter yang digunakan untuk menampilkan dan mengumpulkan masukan kode verifikasi berupa pin (PIN). Widget ini menyediakan tampilan yang ramah pengguna dengan beberapa kotak teks yang memungkinkan pengguna memasukkan kode PIN yang diberikan.

pin_code_fields memberikan berbagai opsi untuk menyesuaikan tampilan kode PIN, seperti jumlah kotak teks, gaya teks, panjang kode, dan banyak lagi. Ini sangat berguna ketika Anda memerlukan masukan kode verifikasi dari pengguna, seperti saat mereka melakukan pendaftaran atau mengatur ulang kata sandi.

Contoh Penggunaan Pin Code Fields

Mari kita lihat contoh sederhana penggunaan pin_code_fields dalam aplikasi Flutter.

Pastikan Anda sudah menginstal Flutter dan sudah memiliki proyek Flutter yang sedang berjalan.
Buka file pubspec.yaml dan tambahkan pustaka pin_code_fields:

dependencies:
flutter:
sdk: flutter
pin_code_fields: ^8.0.1

Berikut adalah contoh implementasi code :

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;
import ‘package:pin_code_fields/pin_code_fields.dart’;

class ArtikelPage6 extends StatefulWidget {
const ArtikelPage6({super.key});

@override
State<ArtikelPage6> createState() => _ArtikelPage6State();
}

class _ArtikelPage6State extends State<ArtikelPage6> {
final TextEditingController _pinController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Pin Code’),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: PinCodeTextField(
controller: _pinController,
appContext: context,
length: 6,
obscureText: false,
animationType: AnimationType.fade,
onChanged: (pin) {
print(‘Current pin: $pin’);
},
onCompleted: (pin) {
print(‘Completed pin: $pin’);
},
),
),
));
}
}

Pada contoh di atas, kami menggunakan PinCodeTextField untuk membuat enam kotak teks yang memungkinkan pengguna memasukkan kode PIN. Setiap kotak teks akan memunculkan karakter masukan sebagai bintang untuk mengamankan kode PIN. Metode onChanged akan dipanggil setiap kali ada perubahan pada kode PIN yang dimasukkan, dan metode onCompleted akan dipanggil ketika kode PIN sudah selesai dimasukkan.

Berikut adalah hasil dari render visualnya:

Kesimpulan

pin_code_fields adalah pustaka yang berguna di Flutter untuk mengumpulkan masukan kode verifikasi dalam bentuk PIN dengan tampilan yang ramah pengguna. Dalam artikel ini, kita telah melihat contoh sederhana tentang cara menggunakan pin_code_fields dalam aplikasi Flutter. Anda dapat menyesuaikan tampilan dan perilaku widget ini lebih lanjut sesuai dengan kebutuhan proyek Anda, seperti menambahkan gaya teks yang berbeda atau memvalidasi kode PIN yang dimasukkan sebelum melakukan tindakan lebih lanjut.