كيفية اضافة الوضع الليلي ( Dark Mode ) في Flutter وحفظ التغيير في sharedPreferences

كيفية اضافة الوضع الليلي ( Dark Mode ) في Flutter وحفظ التغيير في sharedPreferences 

في سوق التطبيقات اليوم ، أصبح وجود سمة Light and Dark لتطبيقك أمرًا ضروريًا تقريبًا. نظرًا لأن المظهر الداكن أكثر راحة لأعيننا من المظهر الفاتح ، ،ولذلك فإن معظم الناس يفضلون إستخدامه عن المظهر الفاتح بشكل كبير وفي هذه المقالة ، سنوضح لك كيفية إنشاء فكرة التبديل بين الوضع الليلي والوضع الاخر داخل فلاتر وايضا سوف نقوم بحفظ القيمة داخل sharedpreferences مع استخدام الcubit بسهوله .

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

نحن تهتم في موقعنا في مساعتدكم على تعلم وتطوير تطبيقاات الاندرويد و ios باستخدام تقنية flutter وهي تقنيه حديثه مقدمه لنا من العملاق جوجل والتي تهدف وتسعى ان الى توسع علم البرمجه وتسهل على المستخدمين التعامل مع مختلف الاجهزه بلغة واحده مثل تطوير تطبيقات android , ios , embeded , desktop بلغة واحده وهذا ما يميز هذه اللغه ونسبة الوظائف بها اصبحت مطلوبه بشكل كبير عن غيرها من التقنيات ولكن في نهاية الامر هي تعد cross platform .

اضافة مكتبة hexcolor الى Flutter

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

dependencies:
  flutter:
hexcolor: ^2.0.5

تغيير مظهر التطبيق في Cubit .

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

cubit.dart

  void changeMode() {
    isDark = !isDark;
    emit(ChangeModeThemeApp());
  }

  void changeIconMode() {
    isDark = !isDark;
    emit(ChangeModeThemeApp());
  }
  

اضافة ايقونة التبديل الى الوضع الليلي في Flutter

الان داخل class layout وهو الكلاس الي يحتوي على المتغيرات الموجود في التبديل بين الصفحات سوف نقوم بعمل زر يحتوي على ايقونه وعندما يتم النقر عليه يتم تبديل الايقونه ووضعية التطبيق من النهاري الى الليلي او العكس ولكن لا تنسى تحويله الى bloc لكي تتمكن من استخدام الاكواد الموجوده في bloc ومنها احصل على وضعية التطبيق 

NewsLayout.dart

              IconButton(onPressed: (){
                NewsCubit.get(context).changeMode();
              },
                  icon: NewsCubit.get(context).isDark ? Icon(Icons.wb_sunny) : 
                   Icon(Icons.brightness_2_outlined)) ,
                   

عمل تصميم light و dark للتطبيق في Flutter

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

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(Object context) {

    return BlocProvider(
      create: (BuildContext context)=> NewsCubit()..getBusiness()..getSports()..getScience(),
      child: BlocConsumer<NewsCubit , NewsStates> (
        listener: (context , state) {},
        builder: (context , state) {
          return MaterialApp(
          // delete debug in app
          debugShowCheckedModeBanner: false,
          themeMode: NewsCubit.get(context).isDark ? ThemeMode.dark : ThemeMode.light,
          theme: ThemeData(
          // لون اتطبيق الرئيسي
          primarySwatch: Colors.deepOrange,
          textTheme: TextTheme(
          bodyText1: TextStyle(
          fontSize: 18 , color: HexColor('212121') , fontWeight: FontWeight.bold
          ),
          bodyText2: TextStyle( fontSize: 14 , color: HexColor('4A403A') , fontWeight: FontWeight.bold),
          ),
          floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.deepOrange,
          ),
          scaffoldBackgroundColor: Colors.white,
          appBarTheme: AppBarTheme(
          iconTheme: IconThemeData(
          color: Colors.black54
          ),
          // سماح بتغيير لون الشريط العلوي

          backwardsCompatibility: false,
          systemOverlayStyle: SystemUiOverlayStyle(
          // لون شريط الايقونات
          statusBarColor: Colors.white,
          // لون الايقونات
          statusBarIconBrightness : Brightness.dark
          ),
          titleTextStyle: TextStyle(color: Colors.black , fontSize: 18.0 , fontWeight: FontWeight.bold),
          backgroundColor: Colors.white,
          elevation: 1.0,
          ),
          bottomNavigationBarTheme: BottomNavigationBarThemeData(
          type: BottomNavigationBarType.fixed,
          elevation: 20.0,

          selectedItemColor: Colors.deepOrange,
          ),

          ),
          darkTheme: ThemeData(
          // لون اتطبيق الرئيسي
          primarySwatch: Colors.deepOrange,
          floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.deepOrange,
          ),
          scaffoldBackgroundColor: HexColor('6B4F4F'),
          appBarTheme: AppBarTheme(
          iconTheme: IconThemeData(
          color: Colors.white
          ),
          // سماح بتغيير لون الشريط العلوي

          backwardsCompatibility: false,
          systemOverlayStyle: SystemUiOverlayStyle(
          // لون شريط الايقونات
          statusBarColor: HexColor('483434'),
          // لون الايقونات
          statusBarIconBrightness : Brightness.light
          ),
          titleTextStyle: TextStyle(color: Colors.white , fontSize: 18.0 , fontWeight: FontWeight.bold),
          backgroundColor: HexColor('483434'),
          elevation: 1.0,
          ),
          bottomNavigationBarTheme: BottomNavigationBarThemeData(
          type: BottomNavigationBarType.fixed,
          backgroundColor: HexColor('483434'),
          elevation: 20.0,

          selectedItemColor: HexColor('EED6C4'),
          unselectedItemColor: HexColor('6B4F4F'),
          ),
          textTheme: TextTheme(
          bodyText1: TextStyle(
          fontSize: 18 , color: HexColor('FFF3E4') , fontWeight: FontWeight.bold
          ),
          bodyText2: TextStyle( fontSize: 14 , color: HexColor('C7BEA2') , fontWeight: FontWeight.bold),
          ),
          ),
          home: Directionality(
          textDirection: TextDirection.ltr,
          child: NewsLayout(),
          )
          );
        },
      ),

    );
  }
}

تغيير لون النص عند التبديل الى dark mode

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

componant.dart

   Expanded(child: Text('${article['title']}' , maxLines: 3 , overflow: TextOverflow.ellipsis ,   style: Theme.of(context).textTheme.bodyText1)),
      Text('${article['publishedAt']}' , style: Theme.of(context).textTheme.bodyText2),
              

الان يبتقى خطوة وهيا وهي تشغيل حفظ الوضعية التي قام بها المستخدم في ذاكرة التخزين المؤقت وفتح التطبيق عليها عند البدء , ولهذا سوف نكمل معكم هذة المرحله في درس اخر وهو بعنوان كيفية حفظ الوضع الليلي في sharedPreferences يمكنك الانتقال اليه واكمال الدرس .

شرح إستخدام الStatefulWidget في Flutter وعمل تطبيق counter