حل مشكلة الشاشة الحمراء في Flutter بسهولة

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

بس متقلقش
النهارده هنتكلم عن طريقة بسيطة وشيّقة إزاي تعمل Custom Error Widget بدل الشاشة الحمرا دي، وتخلي تطبيقك يبان احترافي جدًا حتى لو حصل خطأ.

يعني إيه Error Widget؟ ​

بكل بساطة، الـ Error Widget هي الواجهة اللي بيظهر فيها الخطأ جوه التطبيق.
بشكل افتراضي، Flutter بيعرض شاشة حمرا فاقعة وقت الخطأ، وده بيدّي شكل مش حلو خالص
لكن إحنا هنبدّلها بـ Widget لطيفة شكلها أنيق بتعرض الخطأ بطريقة منظمة.

خطوة رقم 1: نعمل Widget مخصصة للخطأ ​

أول حاجة هنعملها هي إننا نكتب كود Widget خاصة بالـ Error تظهر لما يحصل مشكلة في الكود.
هنسميها مثلًا: CustomErrorWidget.

الكود

class CustomErrorWidget extends StatelessWidget {
  final String errorMessage;

  CustomErrorWidget({this.errorMessage});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.error_outline,
            color: Colors.red,
            size: 50.0,
          ),
          SizedBox(height: 10.0),
          Text(
            'Error Occurred!',
            style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10.0),
          Text(
            errorMessage,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 16.0),
          ),
        ],
      ),
    );
  }
}

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

خطوة رقم 2: معالجة الخطأ في التطبيق ​

الخطوة الجاية إننا نخلي التطبيق نفسه يعرف يتعامل مع الأخطاء ويعرض الـ Widget اللي عملناها بدل الشاشة الحمرا.
وده هيكون عن طريق FlutterError.onError.

الكود

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterError.dumpErrorToConsole(details);
    runApp(ErrorWidgetClass(details));
  };
  runApp(MyApp());
}

class ErrorWidgetClass extends StatelessWidget {
  final FlutterErrorDetails errorDetails;

  ErrorWidgetClass(this.errorDetails);

  @override
  Widget build(BuildContext context) {
    return CustomErrorWidget(
      errorMessage: errorDetails.exceptionAsString(),
    );
  }
}

الكود ده ببساطة بيقول لـ Flutter:
"لو حصل أي Error، ما تطلعليش الشاشة الحمرا... استخدم الـ CustomErrorWidget بدلها"

ليه الطريقة دي مهمة جدًا؟ ​

1. بتخلي التطبيق شكله احترافي
2. المستخدم مش بيخاف من الشاشة الحمرا الغريبة
3. المطور بيقدر يعرف نوع الخطأ بسهولة.
4. ممكن تخصص الرسالة حسب نوع الـ Error (يعني لو Error في API تعرض رسالة مختلفة مثلًا).

فكرة إضافية احترافية ​

تقدر تطور الفكرة أكتر وتضيف زرار Reload أو Send Report جوه الـ Widget، بحيث المستخدم يقدر يبلغك عن المشكلة أو يعيد تحميل الصفحة.

مثال بسيط:

TextButton(
  onPressed: () {
    runApp(MyApp()); // يعيد تشغيل التطبيق
  },
  child: Text('Reload App 🔄'),
)

اللمسة الصغيرة دي هتخلي الأبلكيشن بتاعك يبان احترافي جدًا

نصيحة خفيفة للمطورين ​

حاول دايمًا تضيف معالجة للأخطاء في كل مشروع Flutter بتشتغل عليه،
لأنها مش بس بتحافظ على تجربة المستخدم UX، كمان بتساعدك تكتشف المشاكل بسهولة أثناء التطوير.

الخلاصة ​

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