الأدوات الأساسية (Widgets)

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

التمييز المفيد ليس بين «widget بسيط» و«widget متقدم»، بل بين widget للمحتوى وwidget للتزيين وwidget للبنية. فـ Text وImage تعرضان شيئًا ما. أما Container وCard فتكسوان ما تعرضه أدوات أخرى. وأما ListView فتنظّم العناصر. والخلط بين هذه العائلات الثلاث ينتج ذلك الكود المتدرّج الذي نراه في كثير من مشاريع المبتدئين: سبعة Container متداخلة حيث كان يكفي Padding اثنان في مكانيهما الصحيح.

يعرض هذا الدرس كل widget مع المعاملات المستخدمة فعليًا، وينبّه إلى ما تذكره الوثائق بشكل عابر: الـ Container الذي لا يأخذ الحجم المطلوب، والـ ListView الذي يبني ألف عنصر دفعة واحدة فينخفض عدد الإطارات في الثانية، والـ Image.network بلا معالجة للأخطاء الذي يعرض مربعًا رماديًا عند انقطاع الشبكة.

Text: النمط يأتي من السمة (Theme) لا من الـ widget

// الأبسط.
const Text('Bonjour')

// مع نمط محلي. لاحظ `const`: لا السلسلة ولا النمط
// يتغيران، لذلك يستطيع المترجم تثبيت الـ widget مرة واحدة وإلى الأبد.
const Text(
  'Titre de section',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w600,
    color: Colors.black87,
  ),
)