كل شيء widget: Text وContainer وIcon

افهم فكرة Flutter الكبرى، شجرة الـ widgets، من خلال ثلاث لبنات أساسية: Text وContainer وIcon.

8 دقيقة · 3 أسئلة

في Flutter، كل شيء widget. إن الـ widget لبنة أساسية في الواجهة: أي وصف لجزء مما يظهر على الشاشة. فالنص widget، والأيقونة widget، والمسافة widget... والشاشة بأكملها أيضًا! ولبناء واجهة، تُعشِّش عناصر widget داخل بعضها البعض، مثل الدُّمى الروسية. وتشكّل معًا شجرة الـ widgets: فلكل widget أب (الذي يحتويه) وأحيانًا أبناء (الذين يحتويهم). لنعد إلى برنامجنا البسيط ونتأمل شجرته.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Center(
          child: Text(
            "Everything is a widget!",
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

من الأعلى إلى الأسفل: يضبط MaterialApp التطبيق بأكمله (السمة والتنقل) وفق Material 3، لغة Google البصرية. ويوفّر Scaffold (وتعني حرفيًا "السقالة") بنية الشاشة: الخلفية، وشريط عنوان اختياري... ويوسّط Center ابنه، ويعرض Text النص. ويتلقّى الوسيط style الخاص بـ Text كائن TextStyle يحدّد الحجم (fontSize) أو اللون أو سماكة الأحرف. والآن لنكتشف Container، الصندوق متعدّد الاستخدامات: مستطيل تتحكم في حجمه ولونه ومحتواه.

import 'package:flutter/material.dart';

Widget buildYellowBox() {
  return Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: const Center(
      child: Text("I'm inside a box"),
    ),
  );
}

تُرجِع الدالة buildYellowBox عنصر widget: وتقسيم واجهتك بهذه الطريقة إلى أجزاء صغيرة مُسمّاة ممارسة شائعة جدًا. عرض هذا الـ Container 200 بكسل، وارتفاعه 100، ويلوّن نفسه بالأصفر الكهرماني بفضل كتالوج الألوان Colors، ويحتوي على نص موسَّط. اللبنة الأساسية الثالثة: Icon، التي تعرض رمزًا تصويريًا. وتأتي Flutter بمئات الأيقونات الجاهزة للاستخدام في كتالوج Icons: نجمة، وقلب، ومنزل...

import 'package:flutter/material.dart';

Widget buildStar() {
  return const Icon(
    Icons.star,
    size: 48,
    color: Colors.orange,
  );
}

تذكّر منطق الشجرة: عندما يقبل الـ widget ابنًا واحدًا، يُسمى الوسيط child (وهذا هو حال Center وContainer). في مثالنا الأول، Scaffold أبٌ لـ Center، الذي هو أبٌ لـ Text. وترسم Flutter الشاشة بالسير عبر هذه الشجرة من الأعلى إلى الأسفل. وإذا استطعت أن تحدّد مَن أبو مَن، يمكنك قراءة أيّ واجهة في Flutter.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. في Flutter، ما هو الـ widget؟
   • لبنة أساسية في الواجهة تصف جزءًا من الشاشة
   • ملف إعدادات للمشروع
   • قاعدة بيانات مدمجة في الهاتف
2. أيّ widget تستخدم لعرض رمز تصويري مثل نجمة؟
   • Text
   • Container
   • Icon
3. في Center(child: Text("Hi"))، أيّ widget هو الأب؟
   • Text، لأنه مكتوب أخيرًا
   • Center، لأنه يحتوي على Text عبر وسيطه child
   • لا هذا ولا ذاك: العنصران مستقلان