شرح كيفية استخدام StatefulBuilder داخل Flutter ورفع كفاءة تطبيقك

شرح كيفية استخدام StatefulBuilder داخل Flutter ورفع كفاءة تطبيقك

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

How to use StatefulBuilder in Flutter

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

ui.dart

class PagePage extends StatelessWidget {
  PagePage({Key? key}) : super(key: key);
  bool isSwitch = false;

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        title: const Text('Flutter Platform Widgets'),
      ),
      body: Column(
        children: [
          Center(
            child: PlatformSwitch(
              value: isSwitch,
              onChanged: (value) {
               // isSwitch = value;
              },
            ),
          ),
          Center
            (child:
             StatefulBuilder(builder: (state, innerSetState) {
                return PlatformSwitch(
              value: isSwitch,
              onChanged: (value) {
                innerSetState(() => isSwitch = value);
              },
            );
          })),
        ],
      ),
    );
  }
}