הסבר על Flutter Web - Building
פרקי ההרצאה: הסבר על Flutter Web - Building
תמלול ההרצאה: הסבר על Flutter Web - Building
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Flutter Web - Building» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
טוב חברים, אז בשיעור הזה נבנה את אתר הפלאטר הראשון שלנו, בואו פשוט ניצור פרויקט חדש, פייל ניו, ניו פלאטר פרוג'קט, פלאטר אפליקיישן, נקרא לו MyCarsWebsite, כי אנחנו נציג פה רשימה של רכבים, ונמשיך.
פיניש, מעולה. אז הפרויקט נפתח, נוכל לסגור את הפרויקט הקודם שלנו. עכשיו שימו לב שיש לנו כאן אפשרות חדשה ב-Devices, יש לנו כאן חרום, זאת אומרת שדפדפן אחרום מוגדר כרגע כמכשיר שאפשר לרוץ עליו, ובואו נראה איך זה קורה.
נלחץ על run, האפליקציה הדיפולטיבית של פלאטר עלתה ועכשיו היא פועלת גם בווב. אז נלחץ על פלוס, אנחנו כבר מכירים את האפליקציה הזאת מאחד השיעורים הראשונים בפלאטר, ותראו, זה עובד נהדר.
אבל לנו אין כל כך מה לעשות עם האפליקציה הזאת, אנחנו רוצים לבנות אתר ריספונסיבי שמציג רשימה של רכבים, וגם תפריט שנפתח מהצד.
אז בואו ניגש לעבודה. קודם כל נמחק את כל הקוד הדיפולטיבי, נמחק פשוט את כל התוכן כאן, ואת התוכן הזה, ונמחק את כל התוכן של הפונקציה בילד.
נמחק גם את כל ההערות כאן. מעולה, אז יש לנו ממש אפליקציה ריקה בלי שום דבר. אם נריץ אותה לדעתי נקבל אפילו מסך לבן. כן, מסך לבן בלי שום דבר.
מעולה. אז עכשיו, כדי להפוך אתר לרספונסיבי, אני רוצה להוסיף ספרייה נהדרת שנקראת Responsive Builder, היא מאפשרת לנו לזהות את הגודל של המסך.
אז בואו ניגש ל-pubspec.yaml, תחת dependencies נוכל להוסיף כאן את הספרייה, responsive_builder, נשמור ונלחץ על packages get, חזור למיין, יופי. עכשיו, מה שהספרייה הזאת מאפשרת לנו לעשות זה בעצם לזהות בכל פעם את גודל המסך, בואו נראה איך עושים את זה.
ניגש לבילד, וכאן נחזיר כרגע דבר שנקרא Responsive Builder. ריספונסיב בילדר מגיע מהספרייה, הוא כמובן עשה אימפורט אוטומטי.
לריספונסיב בילדר יש שדה שנקרא בילדר, והבילדר הזה הוא פונקציה שמקבלת קונטקסט ומשתנה שנקרא סייז אינפו. הסייז אינפו הזה הוא למעשה נותן לנו מידע, כמו שאמרתי, לגבי גודל המסך.
סייז אינפו נקודה, תראו יש לנו כאן איז מובייל, איז דסטופ, איז טאבלט ואפילו איז וואץ'. בנוסף יש לנו פרמטרים נוספים כמו סקרין סייז, ובסקאפול נרצה לדוגמה להציג אפ-בר רק במקרה מסוים, למשל אני רוצה להציג אפ-בר רק אם אנחנו נמצאים במובייל, אז נשאל size info.ismobile אם כן אנחנו נחזיר
כאן מופע חדש של אפ-בר, אבל בכל מקרה אחר נחזיר פשוט נאל, זאת אומרת שלא יהיה שום אפ-בר. בואו נריץ את זה ונראה מה קורה. build function return null.
The offending widget is my home page. מה קורה פה? אוקיי, שכחתי להוסיף לסקאפול שלנו body, בואו נגדיר כאן ה-body סתם כ-container, בלי שום דבר, נריץ שוב.
אוקיי, אז האפליקציה שלנו עלתה, ושימו לב, אם עכשיו אני אצמצם את הגודל עד למצב שהוגיע למובייל, הופה, פתאום אנחנו רואים עכשיו את האבר שלנו.
זאת אומרת, כשאנחנו מגדילים לגודל של טאבלט ועכשיו לגודל של דסטופ, אנחנו לא רואים שום דבר, בדיוק כמו שציפינו. עכשיו בואו ניקח את זה צעד אחד קדימה.
בואו נניח שבטאבלט ובדסטופ אנחנו רוצים להציג איזשהו הדר עם לוגה של יוזר ועם תפריט כלשהו בצד השני. אוקיי, אבל שוב זה צריך לקרות רק בטאבלט ומעלה.
אוקיי, אז בואו נשים בתוך הקונטיינר שלנו איזשהו קולום, והילד הראשון של הקולום יהיה ההדר, אבל זה אמור לקרות שוב רק במצב של טאבלט ומעלה.
אז בואו נגדיר פונקציה getHeader, והפונקציה הזאת תהיה איזשהו קונטיינר עם פדינג מסוים, בואו נגיד, והצ'יילד שלו יהיה רואו.
עכשיו ברור זה, אני רוצה לשים בצד אחד אייקון של יוזר, ובצד שני שלושה כפתורים לתפריט, אוקיי?
אז נגדיר קודם כל אייקון, ככה זה צריך להיכנס בתוך צ'ילדרן. אז צ'ילדרן, האיקון שלנו זה הילד הראשון, והילד השני יהיה עוד רואו, וברואו זה יהיו שלושה ילדים, שהם בעצם טקסטים.
טקסט אחד יהיה About, טקסט שני יהיה Contact, והטקסט שלישי יהיה פרופייל. עכשיו שכחתי להוסיף children אז אני אגזור את זה.
נראה לי עכשיו בואו נשתמש בהדר הזה כאן בקולום. אז בקולום אנחנו רוצים להוסיף את ההדר כאמור רק בטאבלט ומעלה, אז size info.ismobile אז אם זה מובייל אנחנו נוסיף כאן null, ובכל מקרה אחר נפנה ל-get header, נריץ את זה ונראה מה קורה.
יפה, אז עכשיו אנחנו רואים את ההדר ואם אנחנו יורדים למטה לטאבלט אנחנו עדיין רואים אותו ובמובייל הוא כבר לא מוצג. יש כאן שגיאה, אני רואה שיש כאן null, תכף נטפל בה, נחזור חזרה, יופי, אז קודם כל כמו שראינו בהדר אנחנו רוצים להפריט בין האייקון של היוזר לבין שלושת האייקונים האלו, אז נחזור לפונקציה getHeader ונגדיר כאן שה-MainAxisAlignment
יהיה MainAxisAlignment.spaceBetween, בואו נראה את זה, זה נראה יותר טוב, בואו ניתן גם ריווח קטן בין כל אחד מהכפתורים כאן, אז בין הטקסט הראשון לשני נגדיר sizeBox שה-width יהיה 20 ונשכפל את השורה הזאת גם כאן, מעולה, זה נראה הרבה יותר טוב,
יפה, אז ההדר הזה מופיע כמו שאמרנו, רק בטאבלט ומעלה, ועכשיו נוכל לטפל בחלק התחתון. אבל בואו ניתן אז איזשהו רקע קטן להדר הזה.
color יהיה colors. ניתן רקע אפור. מעולה. עכשיו בחלק התחתון אנחנו רוצים להציג grid view. grid view זה כמו טבלה שמציגה ריבועים, אז בואו נממש את זה רגע.
כאן בקולום שלנו כבר הוספנו את ההדר כשצריך, ועכשיו נוסיף את הגריד ויו, אבל לפני כן ראינו שיש לנו שגיאה כאן של נעל, אז במקום להוסיף נעל במובייל, פשוט נוסיף סייז בוקס בגודל של 0, והכול אמור להיות בסדר. בואו נריץ את זה שוב רגע, צמצם לגודל של טלפון, מעולה, זה נראה בסדר גמור.
אז עכשיו בואו נממש את הגריד ויו שלנו. אז הילד השני אחרי העדר יהיה אקספנדד, כי אנחנו רוצים לתפוס את כל המקום שנשאר, ותחת ה-expanded נוסיף child עם grid view builder.
ושימו לב, ה-grid view מקבל מה שנקרא grid delegate והוא צריך את ה-delegate הזה כדי לדעת כמה אלמנטים הוא שם בכל שורה, כי אפשר להציג טבלאים, שתי עמודות, חמש עמודות וכן