בונים אפליקציה ראשונה ב-Flutter

תמלול ההרצאה: בונים אפליקציה ראשונה ב-Flutter

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

1. 00:02

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

2. 00:08

   כמובן כל פרויקט פלאטר יתחיל עם הפונקציה void main, ועכשיו נפעיל את הפונקציה run-up. הפונקציה run-up היא למעשה הסטארטר של האפליקציה שלנו, והיא תקבע מה יהיה הווידג'ט הראשי באפליקציה.

3. 00:21

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

4. 00:45

   אז סטייטלס וידג'ט וכאן בראן-אפ ניתן לו מופע חדש של מיי-אפ וכפי שהסברנו בהקדמה בפלאטר אפשר לייתר את המילה new והכל יהיה בסדר אז עכשיו אנחנו רואים שהקומפיילר צועק עלינו ואומר missing concreted implementation of stateless widget build והוא צודק בגלל שכל stateless widget חייב לממש את הפונקציה build הפונקציה build למעשה קובעת את הנראות של הווידג'ט אז

5. 01:11

   יש לנו שתי דרכים לפתור את זה או שנעמוד על השגיאה ונלחץ על Alt ו-Enter ונלחץ על create one missing overwrite או שפשוט נתחיל לשלום את המילה build והוא יממש עבורנו את כל הפונקציה המלאה אז עכשיו אנחנו רוצים לממש את הפונקציה build ואנחנו רואים שמחזירה וידג'ט אז השאלה היא איזה ווידג'ט נחזיר.

6. 01:30

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

7. 01:47

   אז נמחק את התוכן ונרשום Material App למטריאל אפ יש המון המון שדות השדה הראשי הוא home וכמו שאפשר לראות home הוא למעשה ווידג'ט וזה יהיה ועכשיו נגדיר אותו.

8. 02:05

   נגדיר וידג'ט חדש, נקרא לו MyHomePage והוא יירש עכשיו מ-StatefulWidget. למה StatefulWidget? כי במסך הזה אנחנו רוצים להחזיק משתנה שנקרא counter.

9. 02:20

   ה-counter הזה בעצם מייצג את מספר הלחיצות שלחצנו על הכפתור, ובכל פעם שמספר הלחיצות משתנה ה-State משתנה והמסך מרוטר שוב פעם עם ה-State החדש. אז עכשיו ב-Home אנחנו נחזיר מופע חדש של MyHomePage, וכמובן שוב אפשר לאתר את המילה new ונקודה פסיק בסוף אז עכשיו בואו נטפל במיי הום פייג' אז מיי הום פייג' הוא

10. 02:43

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

11. 03:06

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

12. 03:25

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

13. 03:34

    אז יש לנו את הפונקציה מיין שמפעילה את הפונקציה run-up. ל-run-up אנחנו שולחים מופע חדש של my-app שהוא למעשה material-app.

14. 03:42

    ה-homepage של material-app הוא הווידג'ט my-homepage שהוא למעשה stateful-widget. הפונקציה create-state של my-homepage מחזירה מופע חדש של my-homepage-state.

15. 03:54

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

16. 04:02

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

17. 04:30

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

18. 04:45

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

19. 05:07

    לכן אנחנו נוסיף לסקייפולט שלנו את השדה App Bar שהוא יהיה מופע של App Bar חדש ול-App Bar יש שדה שנקרא Title. בתור Title אנחנו נבנה ווידג'ט חדש שהוא גם מסוג טקסט וכאן נרשום ככותרת My first ועכשיו אני רוצה להריץ שוב את הפרויקט שימו לב כמה מהר זה קורה ברגע שנלחץ על האייקון

20. 05:30

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

21. 05:42

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

22. 05:54

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

23. 06:06

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

24. 06:17

    בעמודה יש צדה שנקרא children, ו-children הוא למעשה list של וידג'טים. כאן אנחנו נוכל לשים את כל הווידג'טים שלנו אחד אחרי השני והם יוצגו ברשימה אחד מתחת לשני.

25. 06:29

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

26. 07:06

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

27. 07:20

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

28. 07:31

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

29. 07:42

    כרגע נרשום הערה לקונסול, נכתוב כאן Button has been clicked ובואו נריץ ונראה. אני אלחץ על הכפתור ובכל פעם שאני לוחץ אפשר לראות שמופיע הכיתוב Button has been clicked.

30. 07:57

    1, 2, 3. מעולה. אז מה אנחנו רוצים לעשות עכשיו? אנחנו רוצים להחזיק משתנה בתוך הווג'ט שלנו מסוג int ונקרא לו counter שווה 0. אנחנו רוצים שהכיתוב שבטקסט הוא לא יציג ליין אחד כמובן אלא אנחנו רוצים שהוא יציג את הערך של counter אז בואו נרשום כאן counter to