كيفية تغيير سمة التطبيق في وقت التشغيل باستخدام نمط BLoC في Flutter.

هناك العديد من الحالات التي قد ترغب في دعم سمات متعددة في التطبيق الخاص بك ، والسماح للمستخدم بتغييرها بشكل حيوي. اسمحوا لي أن أشرح لك كيفية القيام بذلك في هذا البرنامج التعليمي باستخدام نمط "مكون منطق الأعمال" ، المعروف أيضًا باسم BLoC.

TL، DR. بالنسبة لأولئك المهتمين فقط بالشفرة ، إليك الرمز الذي تمت تغطيته في هذه المقالة: https://github.com/jorgecoca/theme_switcher/tree/theme-switcher-tutorial-1

سنقوم ببناء تطبيق رفرفة يتكون من:

  • و MaterialApp في جذر التطبيق لدينا
  • صفحتين: HomePage و theThemeSelectorPage
  • مكون BLoC سيتلقى سمة محددة ، وسوف ينبعث منها كائن ThemeData

لنبدأ بإنشاء تطبيق باسم theme_switcher ، واستبدال محتويات main.dart وإنشاء ملف home_page.dart سيمثل الشاشة "الأولية" لتطبيقنا.

لقد أنشأنا للتو تطبيقًا بسيطًا ، استنادًا إلى MaterialApp ، مع AppBar ، ونصه توسيط و FloatingButton. يجب أن تبدو مثل هذا:

ستكون خطوتنا التالية هي فتح ThemeSelectorPage من الأيقونة التي أضفناها على AppBar. للقيام بذلك ، لنقم بإنشاء theme_selector_page.dart ، ودعونا نقوم بتعديل الصفحة الرئيسية لدينا لفتحها عند الضغط على IconButton

الآن طلبنا يشبه هذا:

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

  • استمع إلى أحداث الزر ، لذلك عندما نتلقى حدثًا ، يمكننا إرسال كائن ThemeData يحتوي على المواصفات الخاصة بالسمات المحددة.

لإنجاز هذا ، سنستخدم Stream و Sink. يمكنك التفكير في Sink كمدخلات غير متزامنة في BLoC ، و Stream كشيء واحد ، ولكن كإخراج بدلاً من ذلك.

باستخدام القليل من RxDart ، تتمثل مهمتنا الرئيسية هنا في تحويل إدخال اسم السمة المحدد ، وتحويله إلى كائن ThemeData. يبدو شيء مثل هذا:

selectTheme.distinct (). map ((theme) => theme.data)؛

نستخدم مميزة () هنا لتجنب إعادة طلاء نفس المظهر مرة أخرى.

من أجل استخدام RxDart ، سنحتاج إلى إضافة حزمة جديدة إلى pubspec لدينا وتحديث تبعياتنا مع rxdart: ^ 0.18.1.

مع هذه المعلومات ، سيبدو ملف theme.dart لدينا كما يلي:

لقد حددنا نموذج DemoTheme الذي سيكون مدخلات BLoC ، وحدد فصل ThemeBloc Sink لمعالجة المدخلات ، ومخرجات Stream لتنبعث منها ، وموضوعنا الأولي.

الآن يمكننا تحديث ThemeSelectorPage الخاص بنا لربط أحداث الأزرار لدينا مع Sink في BLoC:

لقد أضفنا مُنشئًا لتمييز ThemeBloc الخاص بنا على أنه تبعية.

الخطوة التالية هنا هي تعديل ملفات main.dart و home_page.dart للرد على السمات الجديدة المنبعثة:

دعنا نقسم هذه التغييرات:

  • تقوم أداة ThemeSwitcherApp الخاصة بنا الآن بإرجاع StreamBuilder ، مما سيساعدنا على إعداد الحالة الأولية للعنصر ، بالإضافة إلى أنه مسؤول عن معالجة التواصل مع Stream of the ThemeBloc.
  • ولكن لماذا نحتاج إلى تعديل الصفحة الرئيسية؟ حسنًا ، نظرًا لأننا نتنقل إلى ThemeSelectorPage من هنا ، فهو مجرد مرور للكائن ThemeBloc. إذا كنا بصدد إنشاء مثيلين لـ ThemeBloc ، فربما نبعث أحداثًا في كائن واحد ونستمع إلى مظاهر مختلفة. هناك طرق أفضل للقيام بذلك ، كما سأشرح في المنشورات التالية ، ولكن هذا يعمل الآن.

مع كل هذه القطع معًا ، يمكننا اختبار الجلاد الخاص بنا:

يا هلا! تطبيقنا يعمل !!! ومع ذلك ، لا تزال هناك بعض التفاصيل التي يمكننا تحسينها:

  • من أجل استخدام نفس مثيل ThemeBloc ، قمنا بتعديل HomePage لأنه كان الصلة بين ThemeSwitcherApp و ThemeSelectorPage الخاص بنا
  • نحن لم نكتب أي اختبارات! وهذا ، "ميل أميغو" ، هذا غير مقبول!

سنقوم بتحسين هاتين الحالتين في المقالات التالية ؛)

أتمنى أن تستمتع بهذا البرنامج التعليمي بقدر ما استمتعت به!