אתגר UI

תמלול ההרצאה: אתגר UI

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

1. 00:02

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

2. 00:13

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

3. 00:19

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

4. 00:42

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

5. 01:13

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

6. 01:39

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

7. 02:01

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

8. 02:38

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

9. 03:05

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

10. 03:26

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

11. 03:55

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

12. 04:32

    נריץ שוב, אוקיי, וזה נראה הרבה יותר טוב. אז שימו לב שה-top ממוקם באמצע למעלה כי הגדרנו את ה-alignment להיות top center ואת ה-bottom הזה הגדרנו רק את ה-bottom ובדיפולט הוא הולך פשוט שמאלה.

13. 04:46

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

14. 04:56

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

15. 05:34

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

16. 06:04

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

17. 06:14

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

18. 06:34

    ועכשיו אנחנו רוצים למקם את הכפתור שלנו באמצע, אז בואו נגדיר את ה-alignment של הקולום, cross-access alignment יהיה cross-access alignment center נריד שוב ואנחנו רואים ששום דבר לא עוזר.

19. 06:45

    הסיבה היא בגלל שכל ה-bottom שלנו תופס למעשה מינימום רוחב אז הכפתור הוא באמת באמצע של ה-column אבל ה-column עצמו תופס קצת מדי רוחב לכן נעטוף את כל ה-column בווידג'ט שנקרא sized box wrap with widget זה יהיה ה-sized box וכאן נוכל להגדיר את הרוחב ואת הגובה שאנחנו רוצים אז נגיד שהרוחב שלנו יהיה

20. 07:07

    media query נקודה off context בצורה הזאת אנחנו יכולים לגשת לרוחב ולגובה המסך נקודה size נקודה width אנחנו בוחרים את רוחב המסך בואו נריץ שוב אוקיי ועכשיו אפשר לראות שהקולום תופס את כל רוחב המסך והכפתור באמת נמצא באמצע עכשיו אנחנו רוצים להגדיר כפתור נוסף אז דרך אחת היא פשוט לשכפל את כל הקוד הזה אבל זה יהיה לא כל כך אלגנטי

21. 07:32

    אז בואו נגדיר כאן פונקציה חדשה שנקראת get button get pattern שהיא תחזיר לנו כפתור, נעתיק את כל הקוד הזה ctrl+x ו-return ctrl+v רק שאנחנו רוצים שהטקסט כאן יהיה דינמי אז בואו נגיד שהפונקציה הזאת מקבלת איזשהו פרמטר בשם טייטל אני אגזור את הטקסט הזה ואשים כאן

22. 07:43

    טייטל ועכשיו נשתמש בפונקציה get pattern והטייטל שלנו יהיה pay for fuel ואני אלחץ על ctrl+d כדי לשכפל את השורה ויהיה לנו כאן שתי כפתורים זהים בואו נריץ שוב מעולה כמו שציפינו אז אני אחזור על מה שקרה כאן הגט בטון שלנו היא למעשה פונקציה שבכילה סייזד בוקס הסיבה היא כי אנחנו רצינו להגדיר את הרוחב להיות כל רוחב המסך בתוך הסייזד בוקס הגדרנו קולום, עמודה,

23. 08:27

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

24. 08:54

    דבר נוסף, אפשר לראות שבתמונה כאן הכפתור תופס טיפה יותר רוחב. אז אפשר להגדיר גם את הכפתור הזה בתוך sizebox, crop with widget, sizebox, ואפשר להגדיר את הרוחב שלו, לדוגמה בוא נתחיל עם 100, נראה קטן מדי, בוא נעבור ל-150,

25. 09:16

    מתקרב, אבל נראה לי ש-200 זה הערך שאנחנו מחפשים. אוקיי, זה נראה קרוב מספיק. אז כמו שזה נראה, אפשר לומר שסיימנו עם החלק התחתון.

26. 09:26

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

27. 09:53

    השלישי אז בואו נתחיל ממימוש של קולום עם האייקון הזה אז נמחק את הטקסט עם הטופ, נשים כאן column.psic בתור children הילד הראשון יהיה פשוט icon.icons.menu כן, סליחה זה אייקון בואו נריץ ונראה אוקיי אז יש לנו כאן אייקון קודם כל הצוות הוא לא נכון אז פשוט נרשום כאן פסיק color יהיה colors.white גם הגודל לא

28. 10:33

    מתאים אז size יהיה אולי 30 אם זה נראה יותר טוב עכשיו אנחנו אנחנו רוצים להצמיד אותו לחלק השמאלי. אז כדי להתחכם פשוט נעטוף אותו ב-row drop quiz row.

29. 10:56

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

30. 11:04

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

31. 11:17

    יש לנו כאן איזשהו לוגו של החברה SpeedPass אבל היה נורא את התמונה הזאת כי המעצב לא סיפק לנו אז פשוט נרשום כאן SpeedPass אז ניתן כאן הופעה של טקסט עם הטקסט SpeedPass+ בואו נראה מעולה רק נטפל בעניין של הסטייל הופעה חדה של טקסט סטייל הצבע יהיה colors.white יפה גודל הטקסט font size יהיה בוא נראה איך

32. 11:50

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

33. 11:56

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

34. 13:01

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

35. 13:31

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

36. 14:00

    סליחה יש לנו כאן שגיאה type int is not subtype of double הסיבה היא שההייד של הסייזבוקס מצפה לקבל דאבל ואנחנו שלחנו לו int פשוט נעשה כאן 30.0 ונעלה שוב ועכשיו זה נראה בסדר אז בואו נשתמש בספייס הזה שוב פעם כאן ספייס עם 20.0 ועכשיו יש לנו ספייסים גם כאן ב-welcome flatter רק כשאפשר לראות שיש כאן ירידת שורה בין ה-welcome לבין ה-jaymey

37. 14:27

    אז נוסיף את זה הטאבלי הידעת שורה הוא backslash n מלשון new line בואו נראה מעולה רק שהוא לא מיושר אז בואו נגדיר כאן את הטקסט אליין להיות טקסט אליין כולה center וזה נראה יותר טוב אפשר קצת להגדיל את הטקסט אז בואו נעבור ל25 בסדר גמור בחלק הבא יש לנו איזשהו קו מקווקו בואו לממש אותו פסיק והקו הזה יהיה למעשה איזשהו קונטיינר