كيفية التعرف على نوع ال credit card الخاصه بك في flutter
في هذا المقال سوف نشارك معكم واحده من المكتبات الجميله في flutter والتي تحسن من تطوير تطبيقات الجوال حيث ان المكتبة تعمل على التعرف على نوع الcredit card المدخل بناء على الرقم فكما نعلم ان كل نوع يكون له طريقة كتابة معينه وفي هذه المقالة سوف نجعل التطبيق يتعرف على نوع البطاقة المدخله بناء على القيمه التي يدخلها المستخدم كما هو موضح بالصورة الخاصه بالمقال , الطريقة بسيطه جدا وغير معقده وكل شيئ مشروح في هذه المقالة بكل وضوح كل ما عليك فقط هو التركيز جيدا في المقال لعدم حدوث مشاكل .
عادة ، من وجهة نظر المطور ، تتناقض أطر العمل والمكتبات عبر الأنظمة الأساسية مع بعضها البعض. على الرغم من أن هذا مفيد من الناحية الفنية عند الاختيار بين Flutter و React Native ، على سبيل المثال ، إلا أنه لا يمثل نظرة عامة شاملة على قدرات Flutter.
من الناحية الفنية ، سيكون من الأصح الإشارة إلى Flutter على أنها SDK بدلاً من إطار عمل. الفرق الرئيسي بين الاثنين هو أن Flutter يوفر جميع الموارد والأدوات المطلوبة للمطورين لإنشاء تطبيقات عبر الأنظمة الأساسية.
يمتلك المطور كل ما يحتاجه لبدء إنشاء التطبيقات إذا كان لديه معرفة سابقة بـ Flutter ، وقام للتو بتنزيل SDK ، ويستخدم محرر كود مناسب. حاليًا ، يمكن لـ Flutter إنشاء تطبيقات لأنظمة iOS و Windows و Linux و macOS.
dependencies:
awesome_card: ^1.1.7
How to detect credit card in Flutter
بعد تثبيت المكتبة من خلال الجزء العلوي يمكنك استخدام الامر CreditCard وهو الذي يعمل على تنفيذ التصميم على البطاقة واسفلة قمنا بعمل مجموعه من ال testFormFiled لكي يقوم المستخدم بإدخال البيانات وبناء على القيمة المدخله يتم تنفيذها على الCreditCard كما هو موضح , هذه المكتبة تحسن من شكل تطبيقك بصورة رائعه يمكنك استخدامها في مشاريع من اجل تحسين التطبيق .
card.dart
import 'package:awesome_card/awesome_card.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;
class PasswordField extends StatefulWidget {
const PasswordField({Key? key}) : super(key: key);
@override
State<PasswordField> createState() => _PasswordFieldState();
}
class _PasswordFieldState extends State<PasswordField> {
String cardNumber = '';
String cardHolderName = '';
String expiryDate = '';
String cvv = '';
bool showBack = false;
late FocusNode _focusNode;
TextEditingController cardNumberCtrl = TextEditingController();
TextEditingController expiryFieldCtrl = TextEditingController();
@override
void initState() {
super.initState();
_focusNode = FocusNode();
_focusNode.addListener(() {
setState(() {
_focusNode.hasFocus ? showBack = true : showBack = false;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
'Sneaker',
style: TextStyle(
color: Colors.black, fontSize: 28, fontStyle: FontStyle.italic),
),
centerTitle: true,
elevation: 0.1,
backgroundColor: Colors.white,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.shopping_cart,
color: Colors.deepPurpleAccent,
))
],
),
// https://models.babylonjs.com/boombox.glb
body:
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 40,
),
CreditCard(
cardNumber: cardNumber,
cardExpiry: expiryDate,
cardHolderName: cardHolderName,
cvv: cvv,
bankName: 'Axis Bank',
showBackSide: showBack,
frontBackground: CardBackgrounds.black,
backBackground: CardBackgrounds.white,
showShadow: true,
// mask: getCardTypeMask(cardType: CardType.americanExpress),
),
SizedBox(
height: 40,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: TextFormField(
controller: cardNumberCtrl,
decoration: InputDecoration(hintText: 'Card Number'),
maxLength: 16,
onChanged: (value) {
final newCardNumber = value.trim();
var newStr = '';
final step = 4;
for (var i = 0; i < newCardNumber.length; i += step) {
newStr += newCardNumber.substring(
i, math.min(i + step, newCardNumber.length));
if (i + step < newCardNumber.length) newStr += ' ';
}
setState(() {
cardNumber = newStr;
});
},
),
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: TextFormField(
controller: expiryFieldCtrl,
decoration: InputDecoration(hintText: 'Card Expiry'),
maxLength: 5,
onChanged: (value) {
var newDateValue = value.trim();
final isPressingBackspace =
expiryDate.length > newDateValue.length;
final containsSlash = newDateValue.contains('/');
if (newDateValue.length >= 2 &&
!containsSlash &&
!isPressingBackspace) {
newDateValue = newDateValue.substring(0, 2) +
'/' +
newDateValue.substring(2);
}
setState(() {
expiryFieldCtrl.text = newDateValue;
expiryFieldCtrl.selection = TextSelection.fromPosition(
TextPosition(offset: newDateValue.length));
expiryDate = newDateValue;
});
},
),
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: TextFormField(
decoration: InputDecoration(hintText: 'Card Holder Name'),
onChanged: (value) {
setState(() {
cardHolderName = value;
});
},
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 25),
child: TextFormField(
decoration: InputDecoration(hintText: 'CVV'),
maxLength: 3,
onChanged: (value) {
setState(() {
cvv = value;
});
},
focusNode: _focusNode,
),
),
],
)
],
),
),
);
}
}
مزيد من المقالات
- تصميم صفحة sign in و sign up بإستخدام animation في flutter
- كيفية وضع العناصر فوق بعض في فلاتر بدون مكتبات باستخدام Stack
- التعديل على زر الرجوع للخلف في فلاتر
- شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات
- تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه
