شجرة Widgets

جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 3 من 32.

توجد عناصر الواجهة داخل عناصر واجهة أخرى. العنصر الذي يحتوي على عنصر آخر يمرّره إلى خاصية child:، مثل Center هذا:

Center(
  child: Text('Hello'),
)

لا يرسم Center أي شيء بنفسه. يأخذ العنصر الذي بداخله ويضعه في منتصف المساحة المتاحة له. ومن دونه، يظهر النص في الزاوية العلوية اليسرى.

تُشكّل عناصر الواجهة المتداخلة شجرة عناصر الواجهة. في تطبيقك، تتكوّن الشجرة من MaterialApp، ثم Scaffold، ثم أي شيء تضعه في خاصية body: الخاصة به. يُكتب العنصر الداخلي لكل عنصر واجهة داخل أقواسه، لذا تُظهر الأقواس الشجرة. وتُبقي الفواصل في نهاية كل سطر التنسيق مرتبًا.

التحدي

سهل

النص عالق في الزاوية العلوية اليسرى. ضعه داخل Center ليظهر في منتصف الشاشة:

استبدل body: Text('Right in the middle'), بـ Center يكون child: الخاص به هو عنصر Text هذا

جرّب بنفسك

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}