كيفية التاكد من قوة كلمة المرور وانها تحتوي على حروف وارقام وعلامات في flutter
في كثير من الاحيان نحتاج الى ان نقوم بعمل كلمة مرور قوية في فلاتر ونحتاج من المستخدم ان تكون كلمة المرور تحتوي على حروف كبيره وصغيره ورموز وارقام ونظهر شريط بالاسفل يوضح ماهي المتطلبات التي نحتاجها لكملة المرور وفي هذا الدرس نشارك معكم مكتبة تساعدنا في امكانية التاكد من قوة كلمة المرور كما هو موضح بالشكل الخاص بالمقاله وهي عباره عن شريط يظهر اسفل كلمة المرور يوضح قوة الكلمة وماهي المتطلبات التي نحتاجها لكي تكون كلمة المرور قوية .
أصدرت Google Flutter كإطار عمل مفتوح المصدر لترميز وتطوير تطبيقات Android و iOS الأصلية. Flutter هو إطار عمل جديد نسبيًا ، حيث تم الكشف عنه كأول إصدار مستقر 1.0 في حدث Flutter Live في ديسمبر 2018.
يوفر Flutter بساطة البرمجة بأداء يشبه الأصلي ، كل ذلك مع الحفاظ على التناسق البصري عبر الأنظمة الأساسية. تم تصميم Dart ، لغة برمجة Flutter ، لتكون بديلاً لجافا سكريبت. Flutter هو ، قبل كل شيء ، مفتوح المصدر ومجاني تمامًا. على GitHub و Stack Overflow ، أصبح Flutter مرتبطًا الآن بـ React Native من حيث الشعبية. في مقال حديث ، قمنا بمقارنة مزايا وعيوب Flutter vs React Native باستخدام تسعة معايير.
add flutter_pw_validator dependencies
dependencies:
flutter_pw_validator: ^1.4.2
check password in flutter
سوف تقوم بعمل التصميم الذي ترغب به وهنا كان عباره عن تصميم بسيط لمحتوي نصي نحتاج من المستخدم ان يقوم بإدخال كلمة مرور واسفله مباشره قمنا بوضع المكتبة التي تم تثبيتها والتي توضح قوة كلمة المرور وماهي متطلبات الكلمة ويمكنك تخصص عدد الحروف الكبيره والصغيره والرموز والارقام وايضا تستطيع تخصيص قوة كلمة المرور وطولها وعندما تصبح كلمة المرور صحيحه ومتاشبهه يظهر مربع يوضح ان كلمة المرور صحيحة وسوف تحد ان اللون تغير الى اللون الاخضر كما هو موضح .
ui.dart
import 'package:flutter/material.dart';
import 'package:flutter_pw_validator/flutter_pw_validator.dart';
class GG extends StatefulWidget {
@override
State<GG> createState() => _GGState();
}
class _GGState extends State<GG> {
final TextEditingController controller = TextEditingController();
bool success = false;
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: success ? Colors.green : Colors.red,
title: Column(
children: const [
Text("Password Validate"),
Text(
"geecoders.com",
style: TextStyle(
color: Colors.white54,
fontSize: 18,
fontWeight: FontWeight.w400),
),
],
),
centerTitle: true,
),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 12.5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Center(
child: Icon(
success ? Icons.lock_open : Icons.lock_outline,
color: success ? Colors.green : Colors.red,
size: 130,
),
),
SizedBox(
height: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: TextField(
cursorColor: Colors.white,
controller: controller,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 207, 207, 207),
width: 2),
borderRadius: BorderRadius.circular(5)),
floatingLabelStyle: const TextStyle(
color: Colors.white,
fontSize: 18,
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: success ? Colors.green : Colors.red,
width: 2),
borderRadius: BorderRadius.circular(15),
),
hintText: "Password",
border: const OutlineInputBorder(
borderSide: BorderSide()))),
),
const SizedBox(
height: 5,
),
FlutterPwValidator(
controller: controller,
minLength: 8,
uppercaseCharCount: 2,
numericCharCount: 3,
specialCharCount: 1,
normalCharCount: 3,
width: 400,
height: 150,
onSuccess: () {
setState(() {
success = true;
});
print("MATCHED");
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Password is matched")));
},
onFail: () {
setState(() {
success = false;
});
print("NOT MATCHED");
},
),
],
),
),
],
),
),
);
}
}
لمزيد من المقالات
- شرح كيفية تحديث flutter وDart الى احدث اصدار
- شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
- شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود
- شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت
- شرح كيفية تكبيره الصورة والتحكم في جميع تفاصيلها بواسطة flutter
