הסבר על Provider ב-Flutter
notifyListeners כדי לעדכן את כל המאזינים.listen: false, אחרת נזרקת שגיאה.פרקי ההרצאה: הסבר על Provider ב-Flutter
תמלול ההרצאה: הסבר על Provider ב-Flutter
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Provider ב-Flutter» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז בשיעור הקודם הבנו איך להעביר פרמטרים ממסך למסך. אבל נחשפנו גם לבעיה המאוד קריטית בפלאטר שאם אנחנו רוצים לשתף אובייקט מסוים עם כל האפליקציה אנחנו ממש נהיה חייבים להעביר את אותו אובייקט ממסך למסך למסך וגם אם אנחנו מייצרים וידג'טים משלנו אנחנו נצטרך להעביר את אותו אובייקט
גם לאותם הווידג'טים מובן שלהתעסק עם כל הדבר הזה זה סרבול אחד גדול ואף אחד בטח לא רוצה את זה כאן בדיוק נכנס לתמונה הפרוביידר.
פרוביידר הוא כלי שמאפשר לנו לשתף אובייקט אחד או כמה אובייקטים עם כל האפליקציה. מובטח לנו שיהיה רק מופע אחד של אותו אובייקט, ונוכל לגשת אליו מכל וידג'ט ווידג'ט בכל עץ הווידג'טים של האפליקציה שלנו.
איך זה עובד? אנחנו כמובן ניגע בזה בצורה מעשית בשיעור הזה, אבל בגדול אנחנו מייצרים מופע של פרוביידר, בדוגמה שלנו נקרא לו User Provider כי הוא מספק לנו את היוזר, ואנחנו עוטפים את ה-Material App שלנו, כותבים אותו בווידג'ט אחד, רמה אחת נוספת מלמעלה, וזה אמור להיראות משהו כזה.
אז יש לנו מופע של User Provider, והבן שלו הוא ה-Material App. עכשיו, מובטח לנו שיש רק מופע אחד כזה של User Provider, ובכל מקום באפליקציה שאנחנו רוצים להשתמש, לצרוך את אותו אובייקט, את אותו מופע, אנחנו פשוט מוסיפים ווידג'ט שנקרא Consumer.
ה-Consumer הזה, במקרה הזה, הוא יהיה גם מסוג של User Provider, וברגע שיש עדכון כלשהו של אותו יוזר, בדוגמה שלנו, שמישהו הוסיף תחביב או מחק תחביב, אנחנו פשוט נעדכן ספציפית את הווידג'ט הזה בלבד, ולא נרדר את כל העץ מההתחלה.
עכשיו, את אותו קונסומר אפשר לשים בכמה מקומות בעץ וברמות שונות בעץ. לדוגמה, אם כאן למטה הוספתי איזשהו קאסטום ווידג'ט משלי, והקאסטום ווידג'ט הזה צריך להשתמש במופע של יוזר, אז אני יכול לעטוף גם אותו בקונסומר מסוג של יוזר פרוביידר ולהשתמש באותו מופע, ספציפית כאן.
ושוב אני חוזר, הדבר הכי יפה בפרוביידר זה שברגע שיש עדכון מסוים במופע, כל הצמתים שמאזינים לאותו מופע יתרעננו באותו רגע, גם אם הם נמצאים במסכים שונים לגמרי.
אז עכשיו, כשיש לנו הבנה תיאורטית על הפרוביידר, אנחנו נצלול לו קוד ונראה איך מיישמים בדיוק כל חלק. אוקיי, אז בשלב הראשון אנחנו נוסיף את הספרייה Provider לפרויקט שלנו.
אז אם נרשום בגוגל Provider Dart או Provider Flutter, מיד נגיע לעמוד הזה, ונלחץ על Installing, וכמו שאנחנו כבר יודעים נעתיק את השורה הזאת לפרויקט שלנו, לתוך pubspec.yaml.
נשמור ונלחץ על Packages Get. אגב, אם אתם חווים איזושהי בעיה עם התקנה של הספרייה הזאת או כל ספרייה אחרת, תוכלו לנסות לעדכן את גרסת ה-flutter שלכם, או על ידי לחיצה על פלאטר אפגרייד, או על ידי רישום של הפקודה פלאטר אפגרייד כאן בטרמינל.
פלאטר רווח אפגרייד, אוקיי? מעולה, אז הוספנו את הספרייה, ועכשיו נוכל להגדיר את הפרוביידר שלנו. אז ניגש למודל, ונוסיף כאן קובץ Dart חדש, נקרא לו UserProvider, כאן תהיה לנו מחלקה Class UserProvider with, אני תכף אסביר מה זה with, Change Notifier.
אוקיי, אז מה זה ה-with הזה? בפלאטר יש לנו שלוש אפשרויות להשתמש במחלקות אחרות. אחת זה על ידי שימוש במילה Extends, כך אנחנו יורשים ממחלקה אחרת.
השנייה זה על ידי שימוש במילה Implement, כך אנחנו מממשים אינטרפייס כלשהו, ממשק כלשהו. והשלישית היא באמצעות שימוש במילה With, כך אנחנו מייבאים מיקסינג.
יש לנו קלאס, מחלקה, יש לנו ממשק אינטרפייס ויש לנו מיקסינג. במיקסינג נשתמש כשאנחנו רוצים להגדיר אסופה של פונקציות נוכל לערבב אותם to mix עם מחלקה אחרת.
אז יש לנו את ה-user provider שמשתמש ב-change notifier. וב-user provider הזה נרצה להגדיר קודם כל את המופע של ה-user, user-user, הוא כמובן יהיה private אז נוסיף underscore לפני ו-import ו-constructor ועכשיו נרצה להוסיף גם פונקציה להוספת תחביב ולמחיקת
תחביב. אז נגדיר כאן פונקציה addHobby שמקבלת הובי כלשהו ומה שהיא עושה היא אומרת user.hobbies.add אותו הובי ועכשיו החלק המעניין כאן נפנה לפונקציה notify listeners זאת אומרת שכל מי שפונה ל-add הובי אנחנו נוסיף את התחביב לרשימת התחביבים של היוזר ומיד נפנה ל-notify listeners שבעצם יעדכן את כל מי שמאזין לפרוביידר שלנו כל מי
שמאזין ליוזר פרוביידר מיד יקבל עדכון לא חשוב באיזה מסך ובאיזה ווידג'ט באותו אופן נבנה גם פונקציה delete הובי, שמקבלת גם כאן הובי, סליחה, יש לי כאן שלוש ביז, ו-user, הוביז, רימוב, סליחה, רימוב של אותו הובי שקיבלנו,
ומיד נפנה גם ל-Notify listeners. נבנה גם איזשהו גטר ליוזר שלנו, אז user.get זאת תהיה פונקציה שמחזירה פשוט את היוזר שלנו. מעולה, אז בואו נסכם את מה שקרה פה.
הגדרנו מחלקה בשם UserProvider, זה בעצם הפרוביידר שלנו, הוא מחזיק מופע של יוזר פרטי, עם גטר, בקונסטרקטור אנחנו נקבל איזשהו יוזר כדי להתחיל את היוזר שלנו, ויש לנו בנוסף בפרוביידר שתי אפשרויות, אחת זה להוסיף תחביב
ליוזר, והשנייה זה למחוק תחביב מהיוזר. כל אחת מהפעולות האלו תעדכן את כל ה-Consumers, את כל הצרכנים שמאזינים ל-User Provider שלנו.
אז עד כאן זה מאוד מאוד פשוט, אבל לא עשינו שום דבר מעשי, זאת אומרת רק הגדרנו את ה-Provider שלנו ולא השתמשנו בו. לכן, כמו שתיארנו בגרף הזה, נעטוף את ה-Material App שלנו עם User Provider.
בואו נראה איך עושים את זה. אז ניגש לקובץ המיינד שלנו, ובמקום להחזיר Material App אנחנו נעטוף אותו Wrap with Widget, והווידג'ט שאנחנו נוטפים אותו יהיה פשוט Change Notifier Provider.
Change Notifier Provider מסוג של User Provider. זאת אומרת שה-Change Notifier Provider הוא מחלקת טמפלט או מחלקה שיכולה להתמודד עם כמה סוגים של פרוביידרים, ואנחנו בוחרים להשתמש ב-User Provider שהגדרנו עכשיו.
ה-Change Notifier Provider מקבל שתי שרדות עיקריים. אחד זה ה-Child, שכמובן נהיה ה-Material App, והשני זה Create.
ב-Create אנחנו בעצם מייצרים מופע של אותו User Provider. אז המופע הזה הוא על ידי שימוש בפונקציה שמקבלת קונטקסט, והיא מחזירה את המופע.
אז כאן נחזיר פשוט מופע חדש של ה-User Provider שלנו. User Provider, ואנחנו רואים שהוא מקבל כפרמטר מופע של User.
אז לפני שניצור פה מופע חדש של User, אני רוצה להסביר שוב את מה שקרה פה, כי זה מאוד מאוד חשוב. אז בהתחלה הראש של העץ שלנו היה המטריאל אפ, ועכשיו עטפנו אותו עם וידג'ט שנקרא Change Notifier Provider מסוג User Provider שהגדרנו, זאת אומרת שאנחנו יכולים להגדיר כמה פרוביידרים שאנחנו רוצים.
במקרה הזה אנחנו עוטפים אותו עם Change Notifier Provider מסוג User Provider. ה-Change Notifier Provider מקבל שתי פרמטרים, אחד זה Child כמעט כמו כל וידג'ט בפלאטר והשני זה Create.
Create היא פונקציה שמקבלת קונטקסט ומחזירה לנו מופע של אותו User Provider. זה הכל בעיקרון. אז בואו ניתן פה מופע חדש של יוזר, אז נגדיר כאן יוזר חדש, איי-די שלו יהיה סתם אחד, השם שלו יהיה קובי, היוזרניים יהיה פשוט יוזר, אימייל יהיה קובי, שטרודל ג'ימייל נקודה קום,
ונגדיר כאן גם הוביז, שיהיה פשוט מערך עם בסקטבול. הוא צועק עלינו כי צריך להוסיף אימפורט, אז נוסיף אימפורט, ונראה שהכל בסדר.
אז עכשיו כמו ב-U מובטח לנו שיש לנו מופע אחד של יוזר פרוביידר, ונוכל להשתמש בו באופן תאורטי בכל מקום שנרצה כאן באפליקציה.
אז עכשיו כשהגדרנו את הפרוביידר בואו נראה איך משתמשים בו כ-Consumer. אז ניגש למסך לוגין, וכאן ב-OnPressed שלחצנו על הכפתור לוגין אנחנו מביאים את היוזר מאיפשהו, אני כרגע אוותר על זה מתוך הנחה שיש לנו כבר יוזר שמותחל בתוך הפרוביידר, אתם זוכרים בפונקציה Create?
ועכשיו אנחנו עוברים למסך יוזר פייג' ומעבירים אליו את היוזר. אז כל המטרה של פרוביידר זה שלא נצטרך להעביר פרמטרים ממסך למסך, לכן אני אמחק את הפרמטר הזה.
ובואו נעבור למסך יוזר פייג' על ידי לחיצה על קומנד בי או קונטרול בי, וכאן נוכל למחוק את הפרמטר, ולמעשה נוכל בכלל למחוק את השדה. אבל עכשיו הקומפיינר יצעק עליי כי הוא לא יודע מה זה widget.user, כי מחקנו לפני רגע את השדה.
אז איך אנחנו בכל זאת מביאים את היוזר מהפרוביידר? אז כמו שהזכרתי, יש לנו שתי אופציות, אני כרגע אשתמש באחת.
אז כאן בתוך ה-build אנחנו נגדיר user user שווה ועכשיו נביא את היוזר עצמו מהפרוביידר, פשוט נרשום provider.off ניסוג user provider וניתן כאן איזשהו קונטקסט, ניתן אימפורט לפרוביידר ועכשיו ברגע הזה קיבלנו מופע של user provider אבל אותנו מעניין היוזר עצמו אז אם נלחץ על נקודה
נראה שיש לנו גישה לדיליט הובי ולאד הובי. אני משום מה לא רואה את הגטר של היוזר, כנראה שהוא מוגדר לא נכון. ניגש ליוזר פרוביידר, וכן, זה צריך להיות user get, השם של הפונקציה יהיה user, ועכשיו הגטר של היוזר מוגדר נכון. זאת אומרת, אם פונים לשדה user, שהוא בעצם גטר, מקבלים
את המשתנה הפרטי underscore user. אז אם נלחץ עכשיו נקודה, נראה את היוזר שלנו. מעולה, אני אאשר את הקוד.
ומה שיש לנו עכשיו זה מופע של יוזר שהגיע ישירות מהפרוביידר, ועכשיו נוכל להשתמש בו בפונקציית בילד שלנו. אז במקום widget.user.name זה פשוט יהיה