كيفية التبديل بين الوضع الداكن والفاتح في Flutter باستخدام Bloc,

 إن السماح للمستخدمين بالتبديل بين الوضع الداكن والوضع الفاتح في تطبيق Flutter أمر ضروري في الوقت الحاضر. في هذا المنشور، ستتعلم كيفية تغيير السمات في Flutter باستخدام Bloc مع Cubits. يضمن Bloc أن التطبيق يفتح دائمًا بالسمات التي يختارها المستخدم. بدلاً من استخدام فئات Bloc العادية، يمكننا تحقيق الوظيفة المطلوبة باستخدام cubits مما يجعل التنفيذ أبسط كثيرًا.

تثبيت الحزم للتبديل بين الوضع الداكن والفاتح في Flutter

لكي يصبح من الممكن التبديل بين الوضع الداكن والوضع الفاتح في Flutter باستخدام Bloc with cubits، نحتاج إلى تثبيت حزمة  https://pub.dev/packages/flutter_blocFlutter Bloc مع حزمة https://pub.dev/packages/shared_preferences Shared Preferences و https://pub.dev/packages/equatable Equatable . يمكن القيام بذلك عن طريق تنفيذ الأمر التالي داخل مشروعك:

flutter pub add flutter_bloc shared_preferences equitable /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><div class="copyarea">بعد تنفيذ الأمر، تحقق من  pubspec.yaml ملفك بحثًا عن التبعيات المضافة. يجب أن ترى حزم Flutter Bloc وShared Preferences وEquatable المضمنة في الشكل  dependenciesالتالي:</div><div class="copyarea"><br /></div></div><p></p>

بعد تنفيذ الأمر، تحقق من  pubspec.yaml ملفك بحثًا عن التبعيات المضافة. يجب أن ترى حزم Flutter Bloc وShared Preferences وEquatable المضمنة في الشكل  dependenciesالتالي:

dependencies: equatable: ^2.0.5 flutter_bloc: ^8.1.6 shared_preferences: ^2.2.3 /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div><div class="copyarea"><br /></div><div class="copyarea"><div class="copyarea">إنشاء المجلدات والملفات</div><div class="copyarea">لتسهيل المتابعة، دعنا نبدأ بإنشاء المجلد والملفات التي سنستخدمها أثناء هذا البرنامج التعليمي. أولاً، سننشئ مجلدًا لضمان وجود جميع الملفات المتعلقة بالموضوع في مكان واحد. بعد إنشاء المجلد، themeيمكننا إنشاء المجلدات الفرعية cubitsو repositories. داخل cubitsالمجلد سيكون لدينا ملفان: theme_cubit.dartو theme_state.dart. في repositoriesالمجلد، سيكون لدينا theme_repository.dartالملف.</div><div><br /></div><div><br /></div><div><br /></div></div></div></div>

إنشاء المجلدات والملفات

لتسهيل المتابعة، دعنا نبدأ بإنشاء المجلد والملفات التي سنستخدمها أثناء هذا البرنامج التعليمي. أولاً، سننشئ مجلدًا لضمان وجود جميع الملفات المتعلقة بالموضوع في مكان واحد. بعد إنشاء المجلد، themeيمكننا إنشاء المجلدات الفرعية cubitsو repositories. داخل cubitsالمجلد سيكون لدينا ملفان: theme_cubit.dartو theme_state.dart. في repositoriesالمجلد، سيكون لدينا theme_repository.dartالملف.

|-- theme/ |-- cubits/ |-- theme_cubit.dart |-- theme_state.dart |-- repositories/ |-- theme_repository.dart |-- main.dart /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div><div><br /></div><div><br /></div></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div></div></div>

بعد إنشاء كافة المجلدات والملفات يمكننا الاستمرار من خلال تنفيذ وظيفة تبديل السمة.

التبديل بين الوضع الداكن والوضع الفاتح في Flutter باستخدام Bloc With Cubits

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

إنشاء فئة ThemeRepository

داخل ThemeRepositoryالفصل سيكون لدينا دالتين، ستكون الدالة الأولى مسؤولة عن الحصول على السمة الحالية وستكون الدالة الأخرى مسؤولة عن تعيين السمة.

import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; import 'package:shared_preferences/shared_preferences.dart'; class ThemeRepository { Future<bool> getTheme() async => (await SharedPreferences.getInstance()).getBool('isDarkTheme') ?? SchedulerBinding.instance.platformDispatcher.platformBrightness == Brightness.dark; Future<void> setTheme({required bool isDarkTheme}) async => (await SharedPreferences.getInstance()).setBool('isDarkTheme', isDarkTheme); } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div></div></div></div>

في مقتطف التعليمات البرمجية، قمنا بإنشاء ThemeRepositoryفئة. داخل هذه الفئة، لدينا وظيفة getThemeلاسترداد السمة الحالية من SharedPreferencesاستخدام getBoolالوظيفة مع المفتاح "isDarkTheme". إذا getBoolأعادت الوظيفة قيمة null، فإننا نضبط القيمة الأولية لسمة جهاز المستخدم باستخدام SchedulerBinding.instance.platformDispatcher.platformBrightnessgetter.

part of 'theme_cubit.dart'; class ThemeState extends Equatable { const ThemeState({this.themeMode = ThemeMode.light}); final ThemeMode themeMode; ThemeState copyWith({ThemeMode? themeMode}) => ThemeState( themeMode: themeMode ?? this.themeMode, ); @override List<Object?> get props => [themeMode]; } } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div></div></div></div></div>

في الكود أعلاه، قمنا بإنشاء ThemeStateفئة تمتد إلى Equatableالفئة. الامتداد مطلوب لضمان إمكانية مقارنة مثيلات الفئة ThemeStateمع بعضها البعض لتحديد التغييرات. ThemeStateتحتوي الفئة على سمة واحدة themeModeسيتم استخدامها لتخزين السمة الحالية.

لاحظ أيضًا أن theme_state.dartالملف جزء من theme_cubit.dartالملف. وبالتالي، تتم جميع عمليات الاستيراد داخل theme_cubit.dartالملف.

نظرًا لأن theme_state.dartالملف جزء من theme_cubit.dartالملف، فمن المحتمل أن يعرض برنامج IDE الخاص بك الكثير من الخطوط الحمراء. سيتم إصلاح هذا الأمر بمجرد الانتهاء من إنشاء الفصل ThemeCubit.

إنشاء فئة ThemeCubit

ستحتوي الفئة ThemeCubitعلى دالتين سنقوم باستدعائهما داخل أدواتنا للحصول على السمة الحالية أو لتغيير السمة.

import 'dart:async'; import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:switching_theme/theme/repositories/theme_repository.dart'; part 'theme_state.dart'; class ThemeCubit extends Cubit<ThemeState> { ThemeCubit({ required ThemeRepository themeRepository, }) : _themeRepository = themeRepository, super(const ThemeState()); final ThemeRepository _themeRepository; static late bool _isDarkTheme; Future<void> getCurrentTheme() async { _themeRepository.getTheme().then((isDarkTheme) { if (isDarkTheme) { _isDarkTheme = true; emit(state.copyWith(themeMode: ThemeMode.dark)); } else { _isDarkTheme = false; emit(state.copyWith(themeMode: ThemeMode.light)); } }); } Future<void> switchTheme() async { if (_isDarkTheme) { await _themeRepository.setTheme(isDarkTheme: false); _isDarkTheme = false; emit(state.copyWith(themeMode: ThemeMode.light)); } else { await _themeRepository.setTheme(isDarkTheme: true); _isDarkTheme = true; emit(state.copyWith(themeMode: ThemeMode.dark)); } } } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p> </p></div><div class="copyarea"><br /></div></div></div></div></div></div></div></div>

في مقتطف التعليمات البرمجية أعلاه، نقوم بإنشاء ThemeCubitالفئة التي توسع Cubitالفئة بنوع ThemeState. ThemeCubitتحتوي الفئة على منشئ يأخذ مثيلًا من ThemeRepositoryالفئة. بخلاف ذلك، لدينا _isDarkThemeمتغير يستخدم لتتبع السمة الحالية ولدينا دالتان.

الدالة الأولى هي getCurrentThemeالدالة التي تستدعي getThemeالدالة من ThemeRepositoryالفصل. بناءً على نتيجة الدالة، getThemeنقوم بتعيين _isDarkThemeالمتغير وتحديث الحالة بالحالة الحالية ThemeModeباستخدام emitالدالة.

الوظيفة الثانية switchThemeتستخدم للتبديل بين ThemeMode.lightو ThemeMode.dark. بناءً على قيمة المتغير _isDarkThemeنقوم بتحديث المتغير نفسه وتحديث الحالة بالتحديث ThemeMode.

إنشاء تطبيق المثال

تطبيق المثال نفسه عبارة عن تطبيق بسيط سيعرض Switchأداة داخل AppBarأداة Scaffold. ومع ذلك، لجعل تبديل السمة يعمل باستخدام Bloc، نحتاج إلى تكوين الكثير داخل ملفنا main.dart.

import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:switching_theme/theme/cubits/theme_cubit.dart'; import 'package:switching_theme/theme/repositories/theme_repository.dart'; void main() { runApp(MyApp( themeRepository: ThemeRepository(), )); } class MyApp extends StatefulWidget { const MyApp({ required ThemeRepository themeRepository, super.key, }) : _themeRepository = themeRepository; final ThemeRepository _themeRepository; @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MultiRepositoryProvider( providers: [ RepositoryProvider<ThemeRepository>( create: (context) => widget._themeRepository, ), ], child: MultiBlocProvider( providers: [ BlocProvider( create: (BuildContext context) => ThemeCubit(themeRepository: widget._themeRepository) ..getCurrentTheme()) ], child: BlocBuilder<ThemeCubit, ThemeState>( builder: (BuildContext context, ThemeState state) => MaterialApp( theme: ThemeData.light(useMaterial3: true), darkTheme: ThemeData.dark(useMaterial3: true), themeMode: state.themeMode, home: Scaffold( appBar: AppBar( actions: [ Switch( value: state.themeMode == ThemeMode.dark, onChanged: (_) async => context.read<ThemeCubit>().switchTheme(), ), ], ), ), ), ), ), ); } } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </p><p style="background-color: white; border: none; box-sizing: border-box; color: #3a4f66; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-size: 16px; font-stretch: inherit; font-variant-alternates: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-variant-position: inherit; font-variation-settings: inherit; line-height: inherit; margin-block-end: var(--theme-content-spacing); margin-block-start: 0px; margin-inline: var(--theme-default-editor,auto); margin: 0px; max-width: var(--theme-default-editor,var(--theme-block-max-width)); padding: 0px; width: var(--theme-default-editor,var(--theme-block-width));"><br /></p><p style="background-color: white; border: none; box-sizing: border-box; color: #3a4f66; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-size: 16px; font-stretch: inherit; font-variant-alternates: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; font-variant-position: inherit; font-variation-settings: inherit; line-height: inherit; margin-block-end: var(--theme-content-spacing); margin-block-start: 0px; margin-inline: var(--theme-default-editor,auto); margin: 0px; max-width: var(--theme-default-editor,var(--theme-block-max-width)); padding: 0px; width: var(--theme-default-editor,var(--theme-block-width));"><br /></p></div><p></p></div></div></div></div></div></div></div></div>

في الكود أعلاه، لدينا MyAppعنصر واجهة المستخدم الرئيسي. MyAppيتطلب عنصر واجهة المستخدم مثيلًا للفئة ThemeRepository. يمكن تمرير هذا المثيل داخل منشئه. لاحقًا، ThemeRepositoryيتم استخدام مثيل الفئة في فئة MultiRepositoryProviderو MultiBlocProvider. تعد فئتا المزود ضروريتين لضمان قدرتنا على الوصول عالميًا إلى مثيلات ThemeRepositoryوعبر ThemeCubitتطبيقنا.

على سبيل المثال، نقوم بالوصول إلى ThemeCubitالمثيل في onChangedسمة Switchالقطعة لاستدعاء switchThemeوظيفة الفئة ThemeCubitعلى السطر 51.

للحصول على السمة الأولية أيضًا، نستدعي الوظيفة getCurrentThemeعلى الفور باستخدام تدوين الشلال على ThemeCubitالمثيل على السطر 38. للتأكد من أن MaterialAppعنصر واجهة المستخدم لدينا على دراية بالسمة الحالية، قمنا بتغليف عنصر واجهة المستخدم داخل BlocBuilderعنصر واجهة مستخدم. BlocBuilderعنصر واجهة المستخدم من النوع ThemeCubitوبالتالي ThemeStateلدينا إمكانية الوصول إلى ThemeStateداخل عنصر واجهة المستخدم لدينا MaterialApp.

داخل MaterialAppعنصر واجهة المستخدم الخاص بنا، نقوم بتعريف كل من السمة الفاتحة باستخدام themeالسمة والسمة الداكنة باستخدام darkThemeالسمة. كما نقوم بتعيين themeModeالسمة إلى state.themeModeللتأكد من أنها تساوي دائمًا قيمة themeModeالمثيل ThemeStateالمنبعث من ThemeCubit.

وحتى لو قمنا بإعادة تشغيل التطبيق الذي يعيد تعيين الحالة الحالية ستلاحظ أن التطبيق يحتفظ بموضوعه الحالي وهو في هذه الحالة ThemeMode.dark:

التحسينات الممكنة

قبل أن ننهي هذا البرنامج التعليمي، هناك تحسينان أرغب في مناقشتهما.

استخدام SharedPreferencesController

بدلاً من الوصول SharedPreferencesمباشرةً إلى داخل صندوق الأمان الخاص بنا، ThemeRepositoryأوصي باستخدام تطبيق SharedPreferencesControllerلتسهيل إدارة جميع SharedPreferencesمفاتيحك.

import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; import 'package:shared_preferences/shared_preferences.dart'; class _SharedPreferencesKeys { static const String isDarkTheme = 'isDarkTheme'; } class SharedPreferencesController { static late final SharedPreferences _preferences; static Future init() async => _preferences = await SharedPreferences.getInstance(); static bool get isDarkTheme => _preferences.getBool(_SharedPreferencesKeys.isDarkTheme) ?? SchedulerBinding.instance.platformDispatcher.platformBrightness == Brightness.dark; static Future<void> setIsDarkTheme({required bool isDarkTheme}) async => _preferences.setBool(_SharedPreferencesKeys.isDarkTheme, isDarkTheme); } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div></div></div><div class="copyarea"><div class="copyarea"><b>استخدام SharedPreferencesController</b></div><div class="copyarea">بدلاً من الوصول SharedPreferencesمباشرةً إلى داخل صندوق الأمان الخاص بنا، ThemeRepositoryأوصي باستخدام تطبيق SharedPreferencesControllerلتسهيل إدارة جميع SharedPreferencesمفاتيحك.</div><div class="copyarea"><br /></div></div></div><div class="copyarea"><br /></div><p></p></div></div></div></div></div></div></div></div></div>

تعديل فئة ThemeRepository

نظرًا لأننا قدمنا ​​الفصل SharedPreferencesController، فيمكننا الآن تغيير الوظائف الموجودة داخل ThemeRepositoryالفصل لاستخدام الوظائف من SharedPreferencesControllerالفصل.

import 'package:switching_theme/shared_preferences_controller.dart'; class ThemeRepository { bool getTheme() => SharedPreferencesController.isDarkTheme; Future<void> setTheme({required bool isDarkTheme}) async => SharedPreferencesController.setIsDarkTheme(isDarkTheme: isDarkTheme); } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div></div></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

في مقتطف التعليمات البرمجية أعلاه، قمنا بتغيير كل من الدالتين getThemeand setThemeلاستخدام دالات الفئة SharedPreferencesController. الآن لم نعد بحاجة إلى الوصول مباشرة إلى SharedPreferencesداخل ThemeRepositoryالفئة getThemeولم تعد الوظيفة غير متزامنة مما يحسن الأداء.

تعديل الوظيفة الرئيسية

لجعل SharedPreferencesالمثيل متاحًا داخل تطبيقنا، SharedPreferencesControllerنحتاج إلى استدعاء initالوظيفة قبل بدء تشغيل التطبيق. لذلك، نحتاج إلى إجراء التغييرات التالية على الوظيفة main.

Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await SharedPreferencesController.init(); runApp(MyApp( themeRepository: ThemeRepository(), )); } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div><div class="copyarea"><br /></div></div></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div><div class="copyarea"><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

في الكود أعلاه، قمنا بتغيير mainالوظيفة لتصبح غير متزامنة. داخل الوظيفة main، نبدأ باستدعاء الوظيفة WidgetsFlutterBinding.ensureInitializedللتأكد من تهيئة الارتباطات. فقط بعد تهيئة الارتباطات يمكننا الوصول إلى SharedPreferencesالمثيل، والذي يتم عن طريق استدعاء initوظيفة الفئة SharedPreferencesController.

إعادة تصميم ThemeCubit

حاليًا، تعد دالتا getCurrentTheme وswitchTheme التابعتان لفئة ThemeCubit مطوّلتين للغاية. يمكننا إعادة صياغتهما لجعلهما أقصر. ومع ذلك، فإن إعادة الصياغة قد تجعل فهمهما أكثر صعوبة.

import 'dart:async'; import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:switching_theme/theme/repositories/theme_repository.dart'; part 'theme_state.dart'; class ThemeCubit extends Cubit<ThemeState> { ThemeCubit({ required ThemeRepository themeRepository, }) : _themeRepository = themeRepository, super(const ThemeState()); final ThemeRepository _themeRepository; static late bool _isDarkTheme; void getCurrentTheme() { final isDarkTheme = _themeRepository.getTheme(); _isDarkTheme = isDarkTheme; emit(state.copyWith(themeMode: isDarkTheme ? ThemeMode.dark : ThemeMode.light)); } Future<void> switchTheme() async { _isDarkTheme = !_isDarkTheme; await _themeRepository.setTheme(isDarkTheme: _isDarkTheme); emit(state.copyWith(themeMode: _isDarkTheme ? ThemeMode.dark : ThemeMode.light)); } } } /textarea> <button class="ClickToCopyButton" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button> </div> </div></div></div><div class="copyarea"><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

في مقتطف التعليمات البرمجية أعلاه، استبدلنا عبارات if في الدالتين getCurrentThemeand switchThemeلاستخدام عامل ثلاثي. تظل وظيفة الدالتين كما هي، إلا أنها أصبحت الآن أقصر كثيرًا.

ضع في اعتبارك أن هذا الكود مبني على الكود المعاد صياغته ThemeRepository. إذا لم تقم بإجراء التغييرات المذكورة أعلاه باستخدام then فإن SharedPreferencesControllerالدالة getThemeلا تزال غير متزامنة وبالتالي getCurrentThemeيجب إرجاع Future<void>استخدام asyncالكلمة الأساسية awaitوالدالة getTheme.

 خاتمة

في هذا البرنامج التعليمي، قمنا بتنفيذ تبديل السمات باستخدام Flutter Bloc مع cubits للتبديل بين الوضع الداكن والوضع الفاتح. لقد ناقشنا جميع الفئات التي تم استخدامها للتأكد من فهمك للوظيفة. في نهاية البرنامج التعليمي، ناقشنا التحسينات الممكنة لضمان اتباعك لأفضل الممارسات وجعل الكود الخاص بك أكثر قابلية للإدارة.