עץ הווידג'טים

חלק מהיחידה האפליקציה הראשונה שלך במסלול ה-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'),
      ),
    );
  }
}