מעבר בין המסכים בתוך האפליקציה ב-Flutter
פרקי ההרצאה: מעבר בין המסכים בתוך האפליקציה ב-Flutter
תמלול ההרצאה: מעבר בין המסכים בתוך האפליקציה ב-Flutter
הטקסט המלא של הדקות הראשונות בהרצאה «מעבר בין המסכים בתוך האפליקציה ב-Flutter» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי, אז עכשיו אנחנו מגיבים ללחיצה על הכפתור לוגין ואנחנו רוצים לעבור למסך הבא. אבל קודם כל אנחנו צריכים לבנות את המסך הבא.
אז בואו נניח שאנחנו רוצים להציג את רשימת המשימות שלנו, to-do list. אז בואו ניצור קובץ חדש תחת התיקי הסקרינס, new dart file, ונקרא לו to-do list page.
וכאן אנחנו יודעים מה לעשות, נשתמש בקיצור stful כדי ליצור stateful widget, ונבנה widget חדש בשם to-do list page. אני משתמש בקיצור המתלדת Alt ו-Enter כדי להציג ואני בוחר באימפורט של Material Dart עכשיו בואו נממש את הפונקציה בילד במקום להחזיר קונטיינר נחזיר כמובן סקייפולד כי מדובר במסך ובבאדי נחזיר את הערך של הפונקציה getBody ועכשיו
נממש אותה אז נביא פונקציה שמחזירה וידג'ט קוראים לה getBody וכרגע לצורך הבדיקה נחזיר סתם איזה טקסט שנקרא to do list page נהדר בואו נחזור ללוגין page כאן ב-onpress אנחנו מגיבים ללחיצה על הכפתור לוגין אז אני רואה כמו שאנחנו מדפיסים את היוזרניים ואת הפסוורט, נהדר, אבל עכשיו נשתמש באובייקט שנקרא Navigator ובנביקטור
יש פונקציה שנקראת פוש. הפונקציה הזאת אחראית להוסיף מסך או למעשה לדחוף מסך חדש למערכת הניווט של האפליקציה שלנו. אנחנו רואים שהפונקציה פוש מקבלת שתי פרמטרים, אחד זה בילד קונטקסט והשני זה ראוט.
אני רוצה לומר משהו לגבי קונטקסט. כבר ראינו בשיעורים הקודמים שאפליקציית פלאטר היא למעשה עץ של ווידג'טים. עכשיו לכל ווידג'ט ווידג'ט יש את הווי אקט קונטקסט.
הקונטקסט הזה עוזר לנו להבין איפה אנחנו נמצאים בעץ הווידג'טים שלנו. אנחנו לא צריכים לדאוג לו יותר מדי, אנחנו מקבלים קונטקסט גובר באפ שלנו שזה הווידג'ט הראשי, ואנחנו מעבירים אותו הלאה ומשתמשים בו או בבנים שלו בווידג'טים הבאים.
אז ניתן את הפרמטר קונטקסט, ולפרמטר ראוט ניצור מופע של מטריאל פייג' ראוט וכאן יש לו שדה שנקרא בילדר, הבילדר כמו שאפשר לראות הוא פונקציה שמקבלת build context ומחזירה ווידג'ט, זאת אומרת תן לי קונטקסט ואני אתן לך הווידג'ט חזרה, הווידג'ט שאנחנו רוצים להחזיר הוא ה-todo
list page שלנו, אז בואו ניצור פונקציה שמקבלת קונטקסט, נפרה קונטקסט ומחזירה to do list page, עכשיו אנחנו רק צריכים לעשות אימפורט, נשתמש באימפורט האוטומטי וסיימנו אז בואו נחזור navigator.push משתמשים בפונקציה פוש של navigator שמקבל שתי פרמטרים אחד זה הקונטקסט והשני זה material page out ל material page out יש
פונקציה שמקבלת קונטקסט ומחזירה וידג'ט במקרה הזה הווידג'ט יהיה to do list page בואו נריץ ונבדוק נלחץ על הוגין ואנחנו רואים שגיאה the method plus was called on null וזה בגלל שהיוזרנלם שלנו ולמעשה נעל כי לא הזמנו שום ערך אז הפעם נזין כאן אדמין וסתם איזשהו ספארט ועכשיו נלחץ על לוגין
ועברנו למסך הבא במסך הבא אפשר לראות טקסט מאחורי השעה שנקרא to do list page אז בואו נחזור חזרה אחורה ונטפל בכמה דברים אחד אנחנו לא צריכים לראות את הטקסט בשדה הפסוורד בגלל שהוא סיסמה איך מטפלים בזה נגיע לגט פסוורד ונדרוס את הערך OpsQtext לתרום נריץ שוב ועכשיו אפשר לראות שהשדה מוסתר נהדר דבר שני
נעלים את ההערה של הפרינט כדי שלא נצטרך כל הזמן להזין איזוני ופסוורד ודבר שלישי ואחרון במסך הבא כדאי להוסיף איזשהו upbar למעלה כדי להבהיר שמדובר במסך to do list אני אדגים לכם נריץ שוב אפשר כבר למחוק את המילה admin כדי להראות שהכל בסדר אוקיי וכאן אפשר לראות שחסר לנו upbar אז ניגש ל-to do
list page וב-scanfold נוסיף upbar נבנה מופע חדש של אפבר עם טייטל שהוא למעשה וידג'ט שיהיה טקסט ונקרא לו to do list page נוריד שוב ועכשיו רואים את האפבר שלנו נהדר אז כמובן שהבאדי לא אמור להיות to do list page אלא באמת רשימה או ליסט ויו של to do list אז ניגש לפונקציה get body ובמקום להחזיר טקסט נחזיר כאן
list view נקודה בילדר והליסט ויו נקודה בילדר מקבל שתי פרמטרים עיקריים אני אדלג רגע על אייטם בילדר והפרמטר שאני אתחיל איתו זה ItemCount ItemCount בעצם אומר לנו כמה איברים יהיה לך ב-ListView אנחנו באופן שרירותי כרגע נחזיר 4 אוקיי?
תכף נשנה את זה. ItemBuilder זה בעצם פונקציה שמקבלת שתי פרמטרים אחד זה קונטקסט והשני זה אינדקס זאת אומרת, תן לי אינדקס מסוים ואני אחזיר לך את מה להציג באותה שורה, איזה וידג'ט אז מגדיר פונקציה שמקבלת קונטקסט ואינדקס וזה המימוש שלה.
ועבור כל אינדקס מסוים אנחנו נחזיר וידג'ט. בואו נחזיר לרגע ריטרן טקסט שהערך שלו יהיה בעצם האינדקס to string. אנחנו מצפים עכשיו לראות ארבע שורות עם הערכים 0, 1, 2, 3. בואו נריץ רגע בדיוק כמו שציפינו.
כל ספרה ממוקמת בשורה בליסט-יו שלנו. עכשיו אנחנו רוצים שהתוכן של הרשימה שלנו יהיה קצת יותר דינמי ולא סתם המספר 4. אז בואו ננסה שהתוכן של הליסט-יו יהיה מבוסס על רשימה מסוימת.
var data נקרא לה שווה לליסט חדש של סטרינגים בסטרינג הראשון נשים כאן לדוגמה dog וכאן cat וכאן mouse אוקיי יש לנו שלושה איברים ברשימה ועכשיו האייטם קאונט הוא לא יהיה ארבע הוא יהיה למעשה data.length אורך הרשימה שבמקרה הזה הוא יהיה שלוש אבל
הוא דינמי ובאייטם בילדר אנחנו לא נחזיר סתם טקסט עם האינדקס אלא נחזיר טקסט שהערך שלו יהיה הערך של האיבר ברשימת data במיקום האינדקס אוקיי אז אם לדוגמה באיבר הראשון האינדקס שלנו הוא 0 אז מה יש לנו בדאטה במקום 0?
dog אז אנחנו נראה dog לאחר מכן cat ולאחר מכן mouse בואו נראה את זה נהדר עכשיו אם ניזכר אנחנו רוצים להציג רשימה של to-do to-do list וכל איבר ברשימה אמור לייצג to-do 1 to-do item נקרא לו אוקיי אז בואו נגדיר מחלקה חדשה ניגש לlib ניצור תיקייה חדשה ונקרא לה מודל, כאן ייכנסו כל המודלים שלנו, בתוך מודל ניצור קובץ
Dart חדש ונקרא לו do-item. בתוך to-do-item נגדיר class to-do-item ול-to-do-item יש שתי שרדות, אחד זה יהיה סטרין שנקרא לו טייטל שייצג את תוכן המשימה והשני יהיה בוליאן checked, בעצם האם המשימה בוצעה או לא בוצעה.
נגדיר שבדיפולט זה יהיה false כי אמרנו שבדארט ערכי דיפולט מקבלים נ"ל. בנוסף בואו נגדיר קונסטרקטור כדי שנוכל לייצר איברים בקלות אז to do item נקבל כאן title ו-check אז צריך להיות check אוקיי אז to do item יש לו קונסטרקטור שם נקבל title ו-checked ו-dis.title
שווה ל-title ו-dis.checked שווה ל-checked עכשיו אני רק רוצה לחדש לכם שיש לנו דרך הרבה יותר קצרה להגדיר קונסטרקטורים בדארט אז אז אני שם את זה בהערה והדרך היותר מהירה היא פשוט להגדיר to do item ולשון dist.title ו-dist.chat וזה באופן אוטומטי מבצע את הפעולה שעשינו כאן אוקיי אבל דבר נוסף כשאנחנו מציעים to do item
אנחנו לא צריכים בכלל להגדיר את ה-checked כי ב-default to false כשאנחנו מגדירים לשימת to do חדשה מן הסתם לא ביצענו אותה בינתיים אז אני מתעלם מהפרמטר הזה ומשאיר אותו כ-false אז עכשיו בואו נחזור ל-to do list page שלנו והרשימה של data לא תהיה רשימה של סטרינגים שמייצגים חיות אלא רשימה של to-do items אז כאן ניתן to-do item ונרשום כאן למשל by
מיל זה to-do item אחד to-do שני זה יהיה may n to-do שלישי יהיה לדוגמה watch a movie אוקיי מעולה אז יש לנו רשימה של to-do item שנקראת data ועכשיו בפונקציה של אייטם בילדר אנחנו נחזיר כאן טקסט שהערך שלו יהיה דאטה במקום אינדקס אבל נקודה טייטל מריץ ונראה ובאיזושהי סיבה קיבלנו קריסה אני חושב שאם אני פשוט
אעצור את ההפעלה ואקמפל שוב זה יסתדר תעלוגים וכן אנחנו רואים שזה באמת יסתדר מעולה אז עכשיו אנחנו רוצים להציג למעשה בכל שורה שתי וידג'יטים אחד יהיה צ'קבוקס שמייצג האם המשימה בוצעה או לא בוצעה והשני יהיה הטייטל אז במקום להחזיר את הטקסט הזה כאן אני רוצה להשתמש בווידג'ט שנקרא קארד.
קארד הוא כמו קונטיינר כזה שהוא נראה הרבה יותר מודרני, הוא מכיל הצללה מסוימת שנותנת לו להיראות קצת כאילו מרחף מעל המסך.
וכדי לשלוט על הריחוף הזה נוכל לדרוס את הערך של השדה Elevation. אני אשתמש לרגע בשלוש ואני תכף אמחיש לכם מה זה עושה.
מעולה. אז אנחנו רוצים להציג את ה-checkbox ואת הטקסט שלנו אחד ליד השני. אז נשתמש ב-row. אז ה-child של ה-car שלנו יהיה למעשה row ול-row יש כידוע children אז הילד הראשון של ה-row שלנו יהיה צ'קבוקס אז צ'קבוקס ה-value של הצ'קבוקס הוא בעצם בוליאן true או false האם הצ'קבוקס הוא מסומן או לא מסומן
אז איך נדע מה הערך זה פשוט data במקום index.checked אוקיי הערך של השדה אינדקס יקבע האם הצ'קבוקס לחוץ או לא לחוץ בנוסף לערך value יש לנו את האירוע onChange onChange היא בעצם פונקציה שמקבלת את הפרמטר שנקרא לו כרגע newValue קיצור של newValue ובכל
פעם שהשתנה הערך אנחנו רוצים כרגע להדפיס את הnewValue בואו נריץ ונראה מה קורה כרגע נהדר אנחנו רואים שלוש צ'קבוקסים וכשאנחנו משנים את הערך של אחד מהם אנחנו רואים טור ושום דבר ויזואלי לא משתנה בואו נטפל בזה אז קודם כל ברגע שמישהו משנה את הערך של הצ'קבוקס אנחנו רוצים לעדכן כמובן את הדאטה שלנו אז נגדיר שדאטה במקום
אינדקס נקודה שקט שווה לnewval בוא נריץ שוב ונשנה את הבחירה אנחנו רואים ששום דבר לא קורה למרות שאני באמת כן משנה הסיבה לכך היא שאנחנו צריכים לקרוא ל-set state אם לא קראנו ל-set state הווידג'ט לא יודע שהוא צריך להתרענן אז נקרא ל-set state וכאן נגדיר
לו מה באמת שונה אז set state ומה ששונה זה שהדאטה במקור אינדקס השתנה ל-newval עכשיו עכשיו נריץ שוב ואנחנו רואים שהערך משתנה ברגע שאני לוחץ על הצ'קבוקס נהדר עכשיו בנוסף לצ'קבוקס שהוא הילד הראשון נוסיף פסיק וניתן את הווידג'ט טקסט שהערך שלו יהיה כמובן דאטה במקום אינדקס נקודה טייטל כבר נראה את זה?
מעולה עכשיו מה קורה אם אנחנו רוצים להוסיף איבר חדש לרשימה? פשוט מאוד נוסיף כאן אייקון של פלוס בתוך האפ באר שלנו וכשלוחצים עליו ייפתח פופאפ כזה קטן שמאפשר לנו להכניס ערך חדש בואו נתחיל עם זה אז ניגש לאפ בר ולאפ בר יש שדה שנקרא אקשנס האקשנס הוא רשימה של ווידג'טים שיוצגו בחלק העליון
אז הווידג'ט שנוסיף יהיה פשוט אייקון בוטון אוקיי אייקון בוטון זה פשוט אייקון רגיל רק שהוא לחיץ אז הערך אייקון יהיה מופע חדש של אייקון ונבחר כאן אייקון של אד זה נראה כמו פלוס כזה וכאשר לוחצים עליו onPressed אנחנו נריץ פונקציה שכרגע פשוט לרשום פרינט קליט בואו נריץ ונראה אז קודם
כל האייקון של הפלוס מופיע ועכשיו שאני לוחץ עליו אנחנו רואים קליט נהדר אבל מה שאנחנו באמת רוצים לעשות זה להציג פופ-אפ או בשפה המקצועית דיאלוג ובדיאלוג הזה נוכל להזין