בניית עמוד LOGIN אמיתי מאפס בשפת DART
פרקי ההרצאה: בניית עמוד LOGIN אמיתי מאפס בשפת DART
תמלול ההרצאה: בניית עמוד LOGIN אמיתי מאפס בשפת DART
הטקסט המלא של הדקות הראשונות בהרצאה «בניית עמוד LOGIN אמיתי מאפס בשפת DART» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
טוב חברים, אז עכשיו אני רוצה לממש לראשונה עמוד אמיתי אפשר לראות שמדובר פה בעמוד התחברות, לוגין פייג' אם ננסה לנתח את המבנה של העמוד, אפשר לראות שמדובר פה בקולום עם תמונה, שתי שדות טקסט וכפתור אז בואו ניגש למימוש אז החלטתי כאן מבעוד מועד, מטריאל אפ כמו שאנחנו מכירים ואת ההום שלו
עדיין לא מימשנו אז בניגוד למה שעשינו בשיעורים הקודמים שיצרנו את כל הווידג'יטים באותו קובץ זה לא, זה לא הרגל הכי טוב.
אני רוצה ללמוד לפצל את כל הווידג'יטים שלי בקבצים שונים. אז בואו ניגש לתיקי הליב וניצור כאן תיקייה חדשה, נקרא לה Screens ובתוך התיקייה Screens ניצור קובץ Dart חדש, נקרא לו Login_Page וכאן למעשה אנחנו נממש את הלוגין פייג' שלנו. אז בואו נשתמש בקיצור stful נקרא לו LoginPage ונוצרו
עבורנו כמובן גם LoginPage וגם LoginPageState. עכשיו אנחנו חייבים לעשות אימפורט ל-Statefulווידג'ט אפשר לממש באופן ידני וגם אפשר לתת למערכת לעשות את זה בשבילנו אז אלט אנטר אימפורט לייברירי בוא נשתמש במאטריאל דארק במקום בקפרטינו קפרטינו זה בסך הכל עיצוב כמו של איוס אנחנו משתמשים בעיצוב כמו של גוגל שנקרא
מאטריאל דיזיין נהדר עכשיו נשתמש בעמוד החדש שיצרנו בקובץ מיין נחזור לקובץ מיין ובתור הום ניתן מופע חדש של לוגין פייג' גם כאן אני יכול לתת למערכת לעשות אימפורט אוטומטי עבורנו אבל בואו נעשה את זה פעם אחת ידנית אז נרשום אימפורט פקג' שם הפרויקט שלנו במקרה שלי זה x1 ניכנס לדקייה סקרינס
ובתוך סקרינס נמצא את לוגין פייג' נקודה דארט ונקודה פסיק בסוף אוקיי אז עכשיו הלוגין פייג' שלנו ממומש ותראו איזה קובץ מיין קצר ונקי ניכנס ללוגין פייג' שלנו ונתחיל במימוש אז כמו שאמרנו ברגע שמדובר במסך אנחנו נחזיר את בואו נשתמש בפונקציה getBody שעדיין לא בנינו
ועכשיו ניצור אותה. אז widget getBody וכאן נחזיר. אני אשתמש בקונטיינר בתור הווידג'ט הראשי שלי בגלל שכמו שהסברנו בשיעורים הקודמים הווידג'ט מאפשר לגמישות של מרג'ין, פדינג, צבע רקע ועוד כמה דברים.
אז בתוך הקונטיינר יש לנו child שהוא למעשה יהיה column ול-column יש children. בואו נציץ רגע בעיצוב ואנחנו רואים שהילד הראשון צריך להיות תמונה. אז איך מוסיפים תמונה לפרויקט?
אז ככה בשביל להוסיף תמונה לפרויקט צריך לעשות שתי דברים אחד להוסיף את קובץ התמונה בפועל לפרויקט ושתיים להגדיר את התמונה בקובץ pubspec.yaml אז בואו נתחיל עם החלק הראשון נוסיף תיקייה בשם images ולתוכה נגרור את התמונה שלנו אני בחרתי
תמונה של פלאטר אתם תוכלו לקחת כל תמונה שתרצו אז עשיתי העתק ועכשיו אני עושה הדבק לתוך התיקייה images והנה התמונה שלי את החלק רגע רגע רגע רגע שם סיימנו ועכשיו ניגש לקובץ pups.yaml שנמצא כאן ואפשר לראות שיש כאן הערה to add assets to your application add an asset section
like this ויש כאן דוגמא אנחנו ניצור את זה בעצמנו אז חשוב מאוד ללחוץ על tab פעם אחת ולהיכנס קצת פנימה וכאן לרשום assets סליחה assets.2 מקף ואת שם התמונה את כל הנתיב למעשה לתמונה אז imagers/logo.png אפשר לשמור ונחזור ללוגין פייג' מעולה, ועכשיו נשתמש בווידג'ט
לראשונה שנקרא אימג' אימג' ויש לנו כאן כל מיני סוגים של תמונות אפשר להציג תמונה מהאינטרנט על ידי שימוש ב-image.network כדי להשתמש בזה אנחנו רק צריכים להדביק את כתובת ה-URL של התמונה כמובן מקובץ ואנחנו במקרה שלנו משתמשים ב-asset אז שם ה-asset יהיה images/logo.png נוכל לתת גם גובה ורוחב לתמונה אז נשתמש בגובה של 150 וברוחב של
300 מעולה בואו נריץ ונראה מה קורה? אני רואה כאן שגיאה בשורה 48 בעמודה 5 Expected a key while parsing a block mapping אני רואה שיש לי כאן שגיאה עם הגדרה של האסט בואו ניכנס לקובץ pubspec.yaml ואני רואה שהאסט יותר מדי קדימה ניקח אותו תו אחד אחורה וגם את ה-images ניקח קצת אחורה נשמור את הקובץ וגדל ללחוץ על packages.get
בגלל שעשינו שינוי בקובץ ה-pubspec ננסה להריב שוב ועכשיו נראה שהפרויקט מתקמפל בואו נמתין לסיום אז יש לנו תמונה ואנחנו רואים שהיא צמודה מדי לחלק העליון ואנחנו צריכים להוסיף ריווח מלמעלה.
אז נחזור ללוגין פייג' ומעל התמונה נוסיף ווידג'ט חדש שנקרא סייזד בוקס. סייזד בוקס הוא סך הכל כמו שזה נשמע, קופסה בגודל מסוים.
אנחנו נחליט שהגובה שלה יהיה לדוגמה 20 ונשים פסיק, אנחנו חייבים להפריד בפסיק בין כל הווידג'טים בכלום. נריץ שוב והנה יש לנו ריווח קטן. נגדיל את הריווח ל-50.
מעולה, עכשיו זה נראה כמו שצריך. אז מה קורה מתחת לתמונה? עכשיו צריך להוסיף שדות טקסט. אז נוסיף עוד פסיק ונשום טקסט פילד, בואו נריץ ונראה.
אוקיי, אז יש לנו כאן טקסט פילד ואפשר להכניס כאן איזה תוכן שאנחנו רוצים. אבל אנחנו רוצים לעצב אותו בצורה כזאת שאם השדה טקסט שלנו הוא בפוקוס כרגע, זאת אומרת המשתמש נגע בו, אז הוא יהיה מעוגל רק משתי פינות ואם לא אז הוא יהיה מעוגל מכל ארבעת הפינות.
איך עושים את זה? אנחנו צריכים להוסיף לטקסט פילד שלנו שדה שנקרא DECORATION שאגב יש אותו להמון וידג'טים וניצור מופע חדש של INPUT DECORATION ב-INPUT DECORATION יש לנו אפשרות לשלוט על Focused BORDER זה למעשה איך ייראה הבורדר במצב של Focused ועל Enabled BORDER איך ייראה הבורדר במצב של Enabled זאת אומרת שהוא סתם
פעיל בואו נתחיל עם Enabled BORDER אז ניתן מופע חדש של Outline Input BORDER וכאן אנחנו מחליטים על שתי דברים אחד זה הבורדר רדיוס שזה בעצם יהיה רדיוס עגול מכל הכיוונים מכל ארבעת הפינות ובורדר סייד שיחליט על הצבע של הבורדר.
אז בורדר רדיוס ניתן מופע חדה של בורדר רדיוס נקודה all ולא only וonly נשתמש במצב של הפוקוס אז ב-all אנחנו ניתן לו כאן רדיוס נקודה סירקולר זאת אומרת רדיוס מרגלי ורדיוס של לדוגמה 20.
ובנוסף נזין את הבורדר סייד שיהיה מופע חדה של בורדר סייד קולו יהיה קולו נקודה נלך על ועכשיו נוסיף את הפוקוס בורדר אז ניתן מופע חדה של Outline input border אותו דבר בדיוק ובתור בורדר רדיוס ניתן לו הפעם בורדר רדיוס לא נקודה all אלא נקודה only ונחליט שה-top right יהיה רדיוס מעגלי של 20 dp ובנוסף ה-bottom left
שזה הצד השמאלי התחתון יהיה גם רדיוס מעגלי של 20 ונחליט על צבע באמצעות בורדר סייד יהיה מופע חדש של בורדר סייד עם צבע אותו צבע בדיוק color נקודה בואו נריץ אוקיי אז כרגע השדה שלנו הוא בפוקוס באופן אוטומטי ואפשר לראות שרק שתי הפינות מורגלות בדיוק כמו שרצינו בואו נשכפל את השדה טקסט רק כדי לראות שהנושא של הפוקוס עובד אז ניתן פה פסיק ונשכפל את השדה
טקסט נריץ שוב נהדר אז אפשר לראות שרק הראשון בפוקוס והשני לא אני אעביר את הפוקוס לשדה השני ואפשר לראות שהבורדר משתנה זה אפילו קורה באנימציה נהדר אז עכשיו חסר לנו להוסיף קצת רווח מלמעלה לפני שנמשיך לעבוד על הטקסט פילד אז לפני הטקסט פילד הראשון ניתן עוד פעם סייז
בוקס עם גובה של 30 אוקיי אפשר אפילו לתת פה פי 2 מהגובה 60 נהדר אז עכשיו איך אנחנו יכולים לקבל את הערך של שדה הטקסט אז בנוסף לדקוריישן נוסיף כאן ערך חדש שדה חדש הוא בעצם פונקציה וזה נקרא on-chain און צ'יינג' זה בעצם פונקציה אז נגדיר פונקציה אנונימית שמקבלת את הערך val אוקיי אפשר לקרוא לזה בכל שם שאנחנו רוצים אפשר לקרוא לזה אפילו user name
כי זה למעשה יהיה השדה של הuser name ובכל פעם שהשתנה הערך בשדה הטקסט של הuser name אנחנו כרגע נדפיס לקונסול את הערך שכרגע נרשם בואו נריץ ונראה את זה ונרשום כאן עכשיו a רואים שמופיע כאן a נרשום פשוט admin אוקיי מעולה אבל אבל בסוף כשנלחץ על הכפתור לוגין אנחנו נרצה לקבל את הערך הסופי של
היוזרניים ושל הפסוורד. אז איך נעשה את זה? נגדיר במחלקה שלנו משתנה, נקרא לו var user name שהוא ייצג את היוזרניים שהוקלד לבסוף וברגע שמשתנה הטקסט במקום להדפיס נגיד שuser name שווה לuser name וכדי לא להתבלבל נרשום dist.user name זאת אומרת משתנה
המחלקה שלנו שווה לuser name שהרגע התקבל. בעיה נוספת שאנחנו רואים כאן זה ששדות הטקסט מאוד מאוד צמודים לפינות וחייב לרווח אותם קצת. אז בשביל זה ניכנס לקונטיינר שלנו ונשתמש בשדה padding.
בפדינג נוכל להחליט על אדג' אינסטס ככה זה נקרא. באדג' אינסטס אפשר לבחור את הערך all ואז הוא נותן פדינג מכל הכיוונים ואנחנו נבחר בonly אוקיי אנחנו רוצים לתת פדינג מהצד השמאלי left נבחר לדוגמה 30 ומהצד הימני right וגם כאן ניתן 30. נוריד שוב ככה זה נראה הרבה יותר אוורירי.
בואו ניתן גם ריווח בין שתי סדולות הטקסט. נשתמש ב-SizeBox כמו מקודם. אז SizeBox עם גובה של 10 ו-Psy כמובן. עכשיו אפשר לראות גם שהפונקציה GetBody שלנו נהייתה קצת ארוכה מדי וקצת קשה להבין מה קורה כאן.
אז בשביל זה אנחנו נקרא לפונקציות שיחזירו לנו וידג'יטים. לדוגמה כדי לקבל את הטקסט פיד של ה-UserName נפנה לפונקציה שנקראת GetUserName. אז בואו נבנה אותה רגע widget.getUserName וכאן נעשה return של הערך הזה של הטקסט פיד וכאן רשות נרשום getUserName ואותו דבר לגבי הפסוורד נגזור את זה ונבנה פונקציה שמחזירה הווידג'ט הנקראת getPaswordReturn
ונדביק את התוכן לא לשלוח נקודה פסיק בסוף וכאן אחרי ה-getUserName ואחרי ה-sizeBox שלנו נפנה ל-getPasword ועכשיו אני חושב שהפונקציה getBud היא הרבה יותר ברורה יש לנו כאן column עם רווח תמונה רווח username רווח ותמונה האמת היא שגם את הרווח הזה אפשר להפוך לפונקציה רק כדי
להקל על העניינים אז בואו נבנה כאן פונקציה שתחזיר לנו ספייס זה נקרא get space והוא מקבל כפרמטר לדוגמה את ה-height איזה גובה של ספייס אנחנו רוצים והוא החזיר לנו sizebox שהגובה שלו הוא הגובה שקיבלנו ובשביל לקרוא לו כל מה שצריך לעשות את זה במקום לפנות לדבר הזה יש לנו כאן סייזבוקס עם גובה של ה-50 נקרא לגט ספייס עם 50
וגם כאן במקום לקרוא לסייזבוקס עם גובה של 60 נקרא לגט ספייס עם 60 וכנ"ל כאן בואו נאשר את זה עם קונטרול אלט ואל ונריץ שוב אז יש לנו כאן תקלה type int is not subtype of type double שימו לב שאני שלחתי כאן את הערכים בתור אינטג'ר לכן אני מקפיד להוסיף נקודה 0 כדי להפוך את זה ל-double אז אשנה את הערכים האלו לדאבל ונריב שוב ועכשיו הכל טוב בואו נממש
עכשיו את הכפתור לוגין כפתור לוגין נממש מיד לאחר הגט פספורד ונוסיף ווידג'ט שנקרא material button ל-material button יש גובה מסוים נחליט על גובה של 40 ובנוסף יש לו child שזה בעצם מה שיוצג בתוך הכפתור ובתוך הכפתור אנחנו רוצים להציג את השדה טקסט
עם המילה לוגין אוקיי בואו נראה איך זה נראה אוקיי אז יש לנו כאן כפתור לוגין שכרגע נראה לא משהו אז בואו נעצב אותו קודם כל ניתן לו color ונחליט על עצב ה-colors.blue accent זה blue טיפה יותר חזה נריץ ונראה ויש שום דבר לא השתנה בואו ננסה להבין למה אפשר לראות שיש לנו כאן הערה the parameter on-pressed is required מה זה אומר לכל כפתור יש
פונקציה שנקראת on-pressed שזה למעשה איך אתה רוצה להגיב ללחיצה על הכפתור בואו נדרוס את הפונקציה הזאתי on-pressed זה פונקציה אנונימית שלא מקבלת שום פרמטר ונשאיר לו כאן סתם לדוגמה print נדפיס לקונסול רק כדי שנדע לזהות לחיצה על הכפתור נריד שוב ועכשיו אפשר לראות שבאמת אפילו הרקע השתנה וכשאנחנו נוחצים על
הכפתור אנחנו רואים בקונסול קליקט עכשיו מה אם אנחנו רוצים שצבע הטקסט בתוך הכפתור יהיה לבן עשינו את זה כבר פעם אחת ניכנס לטקסט ונחליט שהערך סטייל יהיה מופע חדש של טקסט סטייל שהערך color יהיה colors.white נריד שוב אבל בעיצוב ראינו שהפינות של הכפתור מעוגלות אין בעיה אז נדרוס את השדה שי וניתן