شرح وتعريف ال  Provider  وطريقه استخدامه فى ال  NavigationBa

شرح وتعريف ال  Provider  وطريقه استخدامه فى ال  NavigationBar  : -
 

 

تعريف ال Provider

بما انا عارفين ان فلاتر لازم عشان نحدث اى شئ فى الواجهه نعمل StatfulWidget

وننادى على SetState   , لكى تقوم بالنداء مجددا على داله ال Build

التى تقوم باعاده تحميل الواجهه كامله من الاول

وطبعا هذا الأمر ليس جيدا على الاطلاق من ناحيه جوده واداء التطبيق وخصوصا لو مرتبط بقاعده بيانات

لذلك اقترحوا حلول جديده

تسمى Management State

وهذا الأمر له حلول كتير من ضمنها Provider

وبيكون عباره عن مستمع او مخزن مثلا بنخزن فيه الاشياء التى سنحتاج الى تغييرها ويمكننا فى هذه الحاله من خلال اى مكان فى التطبيق ان ننادى عليها ونستدعيها

وطبعا بما اننا هننادى علىه فى حاله الحاجه الى تحديث مكان محدد فى التطبيق بالتالى هنحدد الجزء ده ونقوم بعمله داخل ChangeNotifierProvider

ولو هنقوم بعمل أكتر من Provider

داخل التطبيق نفسه

نذهب الى داله ال Main فى البدايه خالص للتطبيق و نعملها داخل MultiProvider

 

 

@override

  Widget build(BuildContext context) {

    return MultiProvider(providers: [

      ChangeNotifierProvider(create: (_) => BottomNaviProvider()),] ,

        child : const MaterialApp(

                title: 'Bottom NavBar Demo',

                debugShowCheckedModeBanner: false,

                home:SplashScreen() ,

        ) // SplashScreen

    );

 

خطوات استخدام ال  Provider  فى عمل  BottomNavigatioBar  :-

1. عمل كلاس لل Provider  الأول ويكون  , الكلاس ده  هنعرف فيه الحجات اللى هتتغير , وفى حالتنا هنا هنعرف فيه  Index  خاص بالواجهه التى ستستخدم فى ال navigation  يعنى مثلا لو اتحرك من زر  Home  مثلا الى زر  Favourite  وهكذا
    
2.  فى نفس الكلاس بتاع ال  Provider  ده هننادى على الداله notifyListeners();

عشان تستمع الى اى تغيير فى الواجهه

3 .   نجهز الجزء الخاص بال Navigation  الأول نعمل List  من ال  Widgets  اللى هترجع اى واجهه التى ستستخدم حين الضغط على زر ال  Navigation   وليكن كالتالى

 

List<Widget> pages = const [ImageScreen() , VideoScreen()];

نعمل ليست تانيه من الايقونات والنصوص التى ستظهر فى اسفل ال

  Navigation 





static const List<BottomNavigationBarItem> _bottomNavigationBarItems

= <BottomNavigationBarItem>[

  BottomNavigationBarItem(

    icon: Icon(Icons.image),

    label: 'Image',

  ),

  BottomNavigationBarItem(

    icon: Icon(Icons.video_call),

    label: 'Video',

  ), ];

1.  
2. نأخد  Instance  من ال  Provider  بتعنا عشان ندخل قيمه ال  Index  اللى هيتحرك بها الواجهه
3. .  نعمل ال  Body  بتاعنا عادى داخل  Scafold  
   بس طبعا ال  Body  بتاعها هيكون الواجهه اللى جايه من ال  Provider  تبعى
4. ال  Items  بتاعه عباره عن الليست اللى عملناها فوق لل  Navigation
5. وطبعا داله  OnTab

 

 

1. فى داله ال  Main  بقى أصلا اللى فى بدايه التطبيق هنعمل  لها  wrap  بال  Provider  عشان نقدر نستمع الى اى تغيير له
   
   
   
   لكن فى حالتنا اختارنا  Multi Provider  لأننا هنعمل اكتر من  Provider  فى التطبيق
   
   الكود كامل

 

 

 

كلمات دليلية: flutter navigationbar provider