הסבר על Pass Params ב-Flutter

תמלול ההרצאה: הסבר על Pass Params ב-Flutter

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

1. 00:02

   שלום חברים, בסרטון הזה אני רוצה שנלמד איך אפשר להעביר פרמטרים ממסך למסך. בעבר אנחנו אמנם עברנו ממסך למסך, אבל אף פעם לא העברנו פרמטרים. אז אני רוצה שהמסך הראשי שלנו יהיה המסך לוגין שבנינו בעבר.

2. 00:16

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

3. 00:35

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

4. 00:44

   בואו נעשה את זה עכשיו. ניגש ליוזר.dart שנמצא תחת התיקי המודל ונוסיף כאן ליסט של סטרינג שנקרא לו הוביז.

5. 00:57

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

6. 01:07

   מה זאת אומרת? אם אני שם סוגריים מסולסלים, אני יכול להגדיר כאן גם פרמטרים אופציונליים. זאת אומרת שאת כל הפרמטרים האלו חובה להזין בקונסטרקטור, ואת אלו שבסוגריים המסולסלים זה אופציונלי, ולא חובה להכניס אותם.

7. 01:23

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

8. 01:37

   ובשביל זה אנחנו נצטרך להעביר למסך החדש את אותו יוזר. אז בואו נגיע ללוגין פייג' ונזהה את הלחיצה על הכפתור, הנה זה קורה בדיוק כאן ב-on-pressed, ואני רואה שכרגע אנחנו עוברים למסך to-do list page.

9. 01:52

   אז בואו ניצור מסך חדש, נקרא לו user page, ונעביר את המשתמש לשם. אז ניגש ל-screens, new dart file, נקרא לו userPage, stfull userPage, אימפורט מ-material, מעולה. עכשיו, כדי להעביר פרמטרים למסך הזה, userPage, פשוט מאוד צריך ליצור קונסטרקטור,

10. 02:20

    אז ניצור קונסטרקטור ל-userPage, נרשום this.user, כמובן שאנחנו חייבים לייצר משתנה כאן שנקרא user, אז user, user, אימפורט, אז בואו נסכם.

11. 02:35

    יצרנו קובץ חדש שנקרא userPage, שהוא בעצם Stateful widget, בתוך הuser page יש לנו משתנה מסוג user שנקרא user והוספנו קונסטרקטור פשוט שמקבל user ומאתחל אותו.

12. 02:47

    עכשיו חשוב לי רק לציין, אם אנחנו מקבלים פרמטר בקונסטרקטור של stateful widget אנחנו צריכים שהמשתנה הזה יהיה final.

13. 02:57

    חייבים להגדיר אותו כ-final אחרת הקומפיילר ייתן לנו הערה. מעולה, אז בואו נשתמש בדבר הזה שבנינו, נגיע ל-login page ובמקום לעבור ל-todo list page נעבור ל-user פייג' ושימו לב שהוא מקבל כאן איזשהו יוזר.

14. 03:14

    אז אין לנו יוזר עדיין, בואו נדמה איזושהי הורדה של היוזר מהאינטרנט. אני אומר נדמה רק בגלל שאני סתם רוצה שהוא יתעכב שנייה כדי שזה יהיה כמו בעולם האמיתי. אז ניצור כאן פונקציה שמחזירה לנו פיוצ'ר מסוג יוזר והיא נקראת getUser והיא מחזירה future.delayed פעולה שתתבצע בעוד x שניות, במקרה שלנו אנחנו נלך על שנייה ולאחר שנייה

15. 03:52

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

16. 04:16

    אז בואו ניתן לו איזשהו ID אחד, לא כזה חשוב, name נקרא לו קובי, username יהיה user, האימייל שלו יהיה קובי, עוד אל ג'ימל נקודה קום ובאופן תיאורטי אני יכול לסיים כאן אבל בא לי להוסיף גם רשימה של תחביבים אז אני ארשום כאן הוביז בגלל שזה פרמטר אופציונלי חובה לציין את השם שלו

17. 04:44

    וההוביז יהיה רשימה חדשה ונרשום כאן בסקט בול וכמובן נחזיר את אותו יוזר יופי אז ברגע שלוחצים על הכפתור אני אתפוס את היוזר הזה נגדיר פה user user שווה get user ואת היוזר הזה אני מעביר ליוזר פייג' אבל שימו לב שהוא צועק עליי למה?

18. 05:16

    בגלל שהגט יוזר הוא מחזיר פיוצ'ר, זה משהו שיקרה בעוד זמן מסוים. לכן אני חייב להגיד פה a-wait. אבל אי אפשר לכתוב a-wait בפונקציה שהיא לא אסינכרונית, לכן נהפוך את הפונקציה on-press הקטנה הזאת לאסינכרונית.

19. 05:30

    אז נרשום כאן async, והפכנו את הפונקציה on-press לאסינכרונית. זאת אומרת שברגע שלוחצים על כפתור לוגין הזה, תרוץ פונקציה אסינכרונית, שתלך ותביא את היוזר בעוד שנייה דרך הפונקציה הזאת, ותעביר אותו למסך user page.

20. 05:47

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

21. 06:04

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

22. 06:29

    נריץ שוב והנה אנחנו באמת במסך הבא, נלחץ על בק ונדמה שוב לחיצה על הוגין, אחרי שנייה עברנו לפה והכי חשוב שהיוזר באמת עבר למסך הבא. בואו נדגים את זה, היוזר תמיד נמצא בתוך ה-Stateful widget שלנו, ואנחנו רוצים עכשיו ליצור כאן את ה-Body.

23. 06:48

    אז לצורך הדוגמה נשים כאן כרגע איזשהו column שהילד הראשון שלו יהיה פשוט טקסט, ובטקסט אני רוצה לשים את השם של היוזר. אבל שימו לב, אין לי שום משתנה בשם יוזר בסטייט שלי, אלא הוא נמצא במחלקה אחרת ב-user page.

24. 07:06

    אז איך מגיעים מהמחלקה שאני נמצא בה למחלקת אב שהיא ה-user page? פשוט רושמים widget. ווידג'ט נקודה והנה כאן אפשר לראות את היוזר בסדר אז הכלל הוא שכדי להגיע מהסטייט לסטייט פול ווידג'ט שלנו פשוט לוחצים על ווידג'ט והווידג'ט זה שדה שיהיה בכל משתנה מסוג סטייט אז הערך של הטקסט יהיה ווידג'ט נקודה יוזר נקודה ניי במקרה הזה ונרענן את המסך והנה אפשר לראות כאן קובי מעולה אז עכשיו כל מה

25. 07:38

    שנשאר לנו לעשות זה רק להציג את הרשימה של ההוביז את הרשימה של התחביבים מתחת לשם שלו ובשביל זה משתמשים בווידג'ט שנקרא expanded. לתפוס את כל השטח שנשאר באזור מסוים. אז אנחנו עדיין בתוך ה-children, ניתן כאן פסיק ונרשום expanded וה-child של ה-expanded יהיה כמו שאנחנו מכירים list view.builder ו-item.builder הוא פונקציה שמצד אחד מקבלת קונטקסט ובנוסף אינדקסט וכל מה שהוא עושה היא רק מחזירה לנו בכל איתרציה

26. 08:15

    את ההובי הרלוונטי. אז בוא נעשה שהיא תחזיר לנו list tile אתם בטח זוכרים אותו ובתוך ה-list סטייל יש לנו טייטל והטייטל יהיה פשוט טקסט ומערך של הטקסט אז שוב זה וידג'ט נקודה יוזר נקודה הוביז במקום אינדקס ויש לנו כאן שגיאה range error invalid value only valid values 0 או 1 הסיבה היא ששכחנו לתת את מספר האיברים ברשימה אז כאן בליסט ויו בילדר נתנו באמת את האייטם

27. 08:51

    בילדר אבל לא אמרנו את מספר האיברים אייטם קאונט אז אייטם קאונט הוא עוד פעם widget.user.hobbies.length מספר האיברים ברשימה הוא מספר האיברים שבליסט שלנו. אז עכשיו אנחנו באמת רואים פה בסקטבול כמו שצריך.

28. 09:10

    אבל עכשיו אנחנו רוצים להוסיף כאן איזשהו פלוס, אייקון כזה שנקרא floating action button, ולעבור למסך חדש שבו אנחנו נוכל להוסיף איבר לרשימה.

29. 09:19

    אז בואו נחשוב, אנחנו צריכים למעשה גם למסך החדש להעביר את אותו אובייקט של יוזר שמכיל את הרשימה שאליה אנחנו מוסיפים את ה-hobby