شرح كيفية اضافة بصمة جهازك لتطبيقك وامكانية فتح التطبيق بالبصمه فلاتر | Add FingerPrint in flutter easy

شرح كيفية اضافة بصمة جهازك  لتطبيقك وامكانية فتح التطبيق بالبصمه فلاتر

البصمة اصبحت الان موضه شائعه بين التطبيقات الموجوده على متجر جوجل بلاي او غيره ومعظم الهواتف حاليا تتوفر على البصمه وفي كل نسخه من الاجهزة تحاول كل شركة اثبات كفائتها في ناحية سرعة البصمة ولهذا لابد عليك ان تقوم بإضافة البصمة في مشروعك لان هذا يترك طابع جميل لدى المستخدمين وفي مقالة اليوم سوف نساعدك على كيفية اضافة خيار تسجيل الدخول عن طريق البصمة لتطبيقك والبصمة سوف تكون نفس بصمة الهاتف بمعنى البصمة التي تعمل على فتح الهاتف هيا تفسها المسؤوله عن فتح التطبيق .

أصدرت 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 package's  local_auth 

dependencies:

  local_auth: ^2.1.0

change to FlutterFragmentActivity (MainActivity)

في الخطوة الاولى عليك بالانتقال الى ملف MainActivity الخاص بالاندرويد وجعل الimport يكون FlutterFragmentActivity وايضا الclass عليك ان تجعله FlutterFragmentActivity لكي لا يحدث معك مشاكل اثناء عملية التعديل .

MainActivity.kt

import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
}

add permission to manifest

الان عليك بوضع اذن لادخال البصمة وذلك سوف يكون عن طريق ملف manifest ووضع الpermission بداخله .

manifest

<uses-permission android:name="android.permission.USE_FINGERPRINT"/>

create finger class

الان عليك ان تقوم بإنشاء class يحتوي على السماح بالبصمة وايضا التاكد من ان البصمة المدخله نفس بصمة الجهاز .

auth.dart

class FingerPrint {
  final LocalAuthentication _localAuthentication = LocalAuthentication();

  Future<bool> isFingerPrintEnable() async {
    bool fingerPrintEnabled = await _localAuthentication.canCheckBiometrics;
    return fingerPrintEnabled;
  }

  Future<bool> isAuth(String reason) async {
    bool auth = await _localAuthentication.authenticate(
        localizedReason: reason,
        options: const AuthenticationOptions(biometricOnly: true));
    return auth;
  }

}

save and remove data from finger

الان ياتي دور حفظ وحذف البيانات اثناء تفعيل خيار البصمة في الهاتف , سوف نقوم بعمل صفحة للاعدات ونضع بداخلها switch تكون وظيفته هي تفعيل او الغاء البصمة وبناء على القيمة سوف نحفظ ان نحذف البيانات كما هو موضح .

setting_ui.dart

class SettingPage extends StatefulWidget {
  const SettingPage({Key? key}) : super(key: key);

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {


  late LoginBloc cubit;
  final FingerPrint _fingerPrint = FingerPrint();
  late bool isSwitch;

  @override
  void initState() {
    super.initState();
    cubit = context.read<LoginBloc>();
    cubit.getUserDate();
    isSwitch = CacheHelper.getData(key: 'finger') ?? false;

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(),
          body: Center(
            child: Switch(
              value:isSwitch,
              // switch
              inactiveThumbColor: Colors.lightBlue,
              // slider
              inactiveTrackColor: Colors.indigoAccent,
              onChanged: (value) {
                  enableFinger(value);
              },
            ),
          ),
        );
  }
  void enableFinger(bool value) async {
    if (!value) {
      bool isFingerEnabled = await _fingerPrint.isFingerPrintEnable();
      if (isFingerEnabled) {
        CacheHelper.saveData(key: 'email', value: cubit.userModel!.email);
        CacheHelper.saveData(key: 'password', value: '123456');
        print('------------------------------ ${cubit.userModel!.email}');
        print('------------------------------ 123456');
      }
      else {
        CacheHelper.removeData(key: 'email');
        CacheHelper.removeData(key: 'password');
      }
    }
    setState(() {
      isSwitch = value;
      CacheHelper.saveData(key: 'finger', value: value);
      print('------------------------------ $isSwitch');
    });
  }
}

login with fingerPrint in flutter

الان ياتي دور اخر مرحلة وهيا في اثناء تسجيل الدخول اذا كانت توجد قيمة للبصمة فهذا يعني انه قام بتفعيل البصمه واذا لم تكن فهذا يعني انه لم يفعل البصمة يمكنك فقط تغيير اظهار واخفاء البصمة عن طريق الif الموجود بالاعلى استبدل فقط isFinger بي !isFinger وهذا سوف يعمل على الحصول على قيمة البصمة الصحيحه التي قمنا بتخزينها وبعدها يفتح لك شريط لادخال البصمة وبناء على القيمة المدخله يقوم بإدخالك للتطبيق ام لا .

ui_login.dart

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  bool isDisabled = true;
  LoginBloc cubit = LoginBloc();
  int? _state;

  // finger
  late bool isFinger;
  final FingerPrint _fingerPrint = FingerPrint();

  @override
  void initState() {
    super.initState();
    cubit = context.read<LoginBloc>();
    isFinger = CacheHelper.getData(key: 'finger');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: if (isFinger)
                  InkWell(
                    onTap: (){
                      fingerLogin();
                    },
                    child: Container(
                      height: 130,
                      width: 100,
                      child: Icon(Icons.fingerprint_rounded,color: Colors.white,size: 64),
                    ),
                  ),
                TextButton(
                    onPressed: () {
                      navigateAndFinish(context, const RegisterPage());
                    },
                    child: const Text("you Don't have a account ?"))
    );
  }

  void fingerLogin() async {
    bool isFinished = await _fingerPrint.isFingerPrintEnable();
    // After placing the hand on the fingerprint
    if (isFinished) {
      bool isAuth = await _fingerPrint.isAuth('login finger print');
      // success .
      if (isAuth) {
        String mail = CacheHelper.getData(key: 'email');
        String pass = CacheHelper.getData(key: 'password');
        cubit.userLogin(email: mail, password: pass);
      }
    }
  }

}

لمزيد من الشروحات :

• شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات
• تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه
•  حل مشكلة No application found for TargetPlatform.android_x86.
• التعامل مع التصميم في حالة portrait و landscape باستخدام mediaQuery في Flutter
• كيفية ضبط ابعاد التصميم للعمل بشكل افقي وعمودي بدون مشاكل في فلاتر باستخدام