شرح كيفية تغيير رسالة الError في فلاتر | Explain how to change the error message in Flutter

Ahmed Mahmoud

اخر تحديث :

شرح كيفية تغيير رسالة الError في فلاتر | Explain how to change the error message in filters

شرح كيفية تغيير رسالة الError في فلاتر | Explain how to change the error message in Flutter

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

أصبحت flutter من اهم ال platforms التي ينتقل لها الكثير من الdeveloper وذلك لانها بيئة عمل تستطيع من خلالها تطوير تطبيقات android , desktop , ios , websites كل هذا يكون بكود واحد فقط وهذا ما يتميز ال Cross platforms ويوجد لغات برمجة اخرى تقوم بنفس الوظيفة تقريبا مثل objectiv-c و React المطوره من قبل العملاق facebook كل هذه اللغات تقوم بنفس الوظيفة تقريبا ولكنها تختص بجعلك moblie developer عكس فلاتر التي تميزك في اكثر من مجال .

تعمل flutter بلغة الdart وهي من اللغات الحديثة التي ظهرت مؤخرا في عام 2011 ولكن لم نكن نسمع عنها بشكل كبير من قبل ولكن بعد اعتمادها للflutter اصبح هذا الاسم يتكرر في ذهوننا بشكل كبير وهي لغة قريبة جدا من java فاذا كنت متمكن من الجافا فستتمكن من البداية بشكل سريع في flutter وسوف نشارك معكم الكثير من الدروس في هذا القسم .

How to change Error Screen in flutter

بكل سهوله سوف نقوم بعمل class جديد باسم ErrorPageScreen ونرجع بداخل widget من نوع ErrorWidget.builder وبداخله ذلك التصميم الذي نريد القيام به وبعد ذلك يتم في النهايه وضع نص والنص يكون عباره عن الdetails التي تظهر او المشكلة التي تظهر وبهذا تكون انتهيت ولكن بقي خطوة واحده وهيا تشغيل هذا الكود في الmain يمكنك ذلك كما هو موضح بالصورة التي تحتوي على الكود في الاعلى سوف تجد اننا قمنا بتشغيل الclass الذي يحتوي على الايرور بالاعلى ليعمل .

ErrorPageScreen.dart

customErrorScreen() {
  return ErrorWidget.builder = ((details) {
    return Material(
      child: Container(
        child: Container(
          color: Colors.black87,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.network('https://cdn.pixabay.com/photo/2017/02/12/21/29/false-2061131__340.png', height: 250,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Text(details.exception.toString(),
                style: TextStyle(
                  color: Colors.white,fontSize: 18
                ),
                textAlign: TextAlign.center,),
              ),
            ],
          ),
        ),
      ),
    );
  });
}