הגדרת Stack ב-Flutter

תמלול ההרצאה: הגדרת Stack ב-Flutter

הטקסט המלא של הדקות הראשונות בהרצאה «הגדרת Stack ב-Flutter» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אוקיי אז עד עכשיו הכרנו מגוון רחב של וידג'טים אבל עדיין לא למדנו איך להניח וידג'ט מעל וידג'ט. בדיוק בשביל זה יש לנו וידג'ט שנקרא Stack.

2. 00:11

   Stack הוא וידג'ט שיש לו children בדיוק כמו column ו-row רק שאצלו הווידג'טים בתוך ה-children מונחים אחד מעל השני. בואו נממש דוגמא ביחד.

3. 00:21

   אז נבנה מסך חדש תחת Screens ונקרא לו StackTestPage אוקיי st full נקרא לו StackTestPage import ונחזור ל-material-app שלנו וב-home במקום לוגין-פייג' נגדיר את ה-stack-test-page שלנו להיות המסך הראשי stack-test-page-port מעולה stack-test-page כמובן נחזיר כאן

4. 01:09

   stack-fold שה-body שלו יהיה get-body יש את הפונקציה get-body שימו לב שהפעם לא רשמתי את המילה widget לפני קומפייל לא יודע לבד איזה סוג של אובייקט אנחנו מחזירים אוקיי אז בואו נריץ ונראה מה אנחנו מקבלים אוקיי כמו שציפינו מסך לבן וריק אבל בואו נחזיר כאן איזשהו קונטיינר, נגדיר שהגובה שלו יהיה 200 והרוחב שלו יהיה 300

5. 01:45

   וצבע הרקע שלו יהיה כחול. נריץ. אוקיי, עכשיו אנחנו רוצים שכל הסיפור הזה יהיה באמצע, אז נעטוף את הקונטיינר שלנו בווידג'ט שנקרא Center.

6. 02:00

   אני אשתמש ב- Alt Enter ויש לי כאן אופציה שנקראת WrapWidth Center. אוקיי, כל מה שזה עושה, סך הכל מוסיף לי ווידג'ט מעל שהצ'יילד שלו הוא אותו קונטיינר.

7. 02:12

   בואו נריץ. ועכשיו הכל באמצע אני אחזור על הפעולה ואממש אותה בצורה ידנית אוקיי אז כאן יש לנו את הקונטיינר שלנו נריג שוב ואני ארשום return center כאשר ה-child שלו יהיה בעצם אותו קונטיינר אוקיי מעולה עכשיו בתוך הקונטיינר הזה יש לי גם child וה-child הזה יהיה stack ול-stack הזה יש children עכשיו כל

8. 02:46

   ילד שמתווסף ב-children נמצא מעל לילד הקודם לו ובעצם מסתיר אותו כביכול בואו ניתן דוגמה נוסיף כאן איזשהו קונטיינר עם גובה 50 ורוחב 50 ובצבע יאוק אפשר לראות שבדיפולט הבנים מוצמדים לפינה השמאלית העליונה בואו נשכפל את הבן הזה ונוסיף עוד קונטיינר רק שהפעם הוא יהיה בצבע אדום אוקיי אז רואים

9. 03:17

   שהקונטיינר השני עלה על הקונטיינר הראשון אוקיי אז עכשיו נשאלת השאלה איך אפשר למקם את הווידג'טים בתוך הסטאק שלנו בשביל זה יש לנו שתי ווידג'טים נוספים אחד שנקרא align וב-align יש לנו כמובן את ה-child נגזור את הקונטיינר בתוך ה-child ובאליימנט יש לנו שדה שנקרא אליימנט.

10. 03:43

    אליימנט מאפשר לנו לקבוע איפה אנחנו רוצים את הווידג'ט בתוך האבא שלו שהוא בעצם הסטאק נבחר באליימנט נקודה וכאן יש לנו את כל האפשרויות לאישור לדוגמה בוטום סנטר נריץ אוקיי ועכשיו האדום נמצא באמצע ובתחתית או לדוגמה טופ רייט אוקיי מעולה.

11. 04:03

    כלי נוסף שיש לנו נקרא פוזישן פוזישן דוגם ווידג'ט שבדרך לה נמצא בתוך סטאק ומאפשר לנו לקבוע את ההסט שבו הווג'ט יימצא לדוגמה נבנה פה עוד איזשהו צ'יילד שיהיה גם קונטיינר עם גובה 50 רוחב 50 סליחה וגובה 50 בצבע שחור ובפוטישנט יש לנו למעשה left זה אומר באיזה מרחק הווג'ט יהיה מהצד השמאלי שלו אם לדוגמה נבחר כאן ב-70 ונריץ נראה שהווג'ט

12. 04:44

    נמצא 70 פיקסלים מהצד השמאלי באותו באותו אופן אפשר לבחור ב-top, בואו ניקח top 120, נריץ, אוקיי, הוודג'ט קיבל מרחק של 120 פיקסלים מהחלק העליון, ובאותו אופן אני יכול לבחור את ה-set בכל אחד מהכיוונים, top, left, bottom ו-right.

13. 05:02

    אוקיי, עכשיו בואו נמחק רגע את כל הבנים, ונניח שנרצה לשים תמונה, ומעל התמונה איזשהו טקסט. אז הבן הראשון יהיה image.network וכאן אני אוכל לשים url של תמונה, נדביק כרגע איזה תמונה שמצאתי באינטרנט ונוריד את גובה הקונטיינר מ-200 ל-130, נריץ, מעולה, נמחק את הרקע מהקונטיינר ונגדיר שה-alignment

14. 05:36

    של הסטאק יהיה alignment.center רק בשביל