MDC-101 Flutter: עקרונות בסיסיים על רכיבי החומר

1. מבוא

מהם Material Design וספריית Material Flutter?

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

הספרייה Material Flutter כוללת ווידג'טים של Flutter שמטמיעים את העיצובים של רכיבי Material Design (MDC בקיצור) כדי ליצור חוויית משתמש עקבית באפליקציות ובפלטפורמות. מערכת Material Design מתפתחת, ולכן הרכיבים האלה מתעדכנים כדי להבטיח הטמעה עקבית ברמת הפיקסל, בהתאם לתקנים של Google לפיתוח חזיתי.

ב-codelab הזה תלמדו איך ליצור דף כניסה באמצעות כמה רכיבים של Material Flutter.

מה תפַתחו

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

ב-codelab הזה תיצרו דף כניסה לאפליקציית Shrine, שיכלול:

• תמונה של הלוגו של Shrine
• שם האפליקציה (Shrine)
• שני שדות טקסט, אחד להזנת שם משתמש והשני להזנת סיסמה
• שני לחצנים

Android	iOS

זוהי סדנת ה-codelab הראשונה מתוך 4 שמדריכות אתכם בתהליך בניית אפליקציה למוצר שנקרא Shrine. מומלץ לבצע את כל ה-codelabs לפי הסדר, כי הם מתקדמים במשימות שלב אחר שלב.ה-codelabs הקשורים נמצאים בכתובת: ‫MDC-102 Flutter: Material Structure and Layout ‫MDC-103 Flutter: התאמת העיצוב של Google Material Design עם צבע, צורה, גובה וטיפוס ‫MDC-104 Flutter: רכיבים מתקדמים של Material

רכיבים ותת-מערכות של Material Flutter במעבדת התכנות הזו

• שדה טקסט
• כפתור
• אדוות דיו (משוב ויזואלי לאירועי מגע)

ב-codelab הזה תשתמשו ברכיבי ברירת המחדל שסופקו על ידי Material Flutter. בקורס MDC-103: Material Design Theming with Color, Shape, Elevation and Type (עיצוב ערכות נושא ב-Material Design באמצעות צבע, צורה, גובה וסוג) תלמדו איך להתאים אותם אישית.

איך היית מדרג את רמת הניסיון שלך בפיתוח ב-Flutter?

מתחילים ביניים מומחים

2. הגדרת סביבת הפיתוח של Flutter

כדי להשלים את שיעור ה-Lab הזה, תצטרכו שני סוגי תוכנה: Flutter SDK ועורך.

אפשר להריץ את ה-codelab באמצעות כל אחד מהמכשירים הבאים:

• מכשיר פיזי עם Android או iOS שמחובר למחשב ומוגדר למצב פיתוח.
• סימולטור iOS (נדרשת התקנה של כלי Xcode).
• ‫ אמולטור Android (נדרשת הגדרה ב-Android Studio).
• דפדפן (חובה להשתמש ב-Chrome לצורך ניפוי באגים).
• כאפליקציה למחשב Windows,‏ Linux או macOS. אתם צריכים לפתח בפלטפורמה שבה אתם מתכננים לבצע פריסה. לכן, אם רוצים לפתח אפליקציה למחשב שולחני עם Windows, צריך לפתח ב-Windows כדי לגשת לשרשרת הבנייה המתאימה. יש דרישות ספציפיות למערכות הפעלה שמוסברות בפירוט במאמר docs.flutter.dev/desktop.

3. הורדת אפליקציה לתחילת הדרך של ה-Codelab

הורדת פרויקט התחלתי

פרויקט המתחילים נמצא בספרייה material-components-flutter-codelabs-101-starter/mdc_100_series.

...או לשכפל אותו מ-GitHub

כדי לשכפל את ה-codelab הזה מ-GitHub, מריצים את הפקודות הבאות:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

לקבלת עזרה נוספת: שכפול מאגר מ-GitHub

הענף הימני

ה-Codelabs‏ MDC-101 עד 104 נבנים אחד על גבי השני. לכן, כשמסיימים את הקוד של 101, הוא הופך לקוד לתחילת הדרך של 102. הקוד מחולק לענפים שונים, ואפשר לראות את כולם באמצעות הפקודה הבאה:

git branch --list

כדי לראות את הקוד המלא, צריך לבדוק את הענף 102-starter_and_101-complete.

פותחים את הפרויקט ומריצים את האפליקציה

1. פותחים את הפרויקט בכלי העריכה הרצוי.
2. פועלים לפי ההוראות שבקטע תחילת העבודה: ניסיון נסיעה כדי להפעיל את האפליקציה בעורך שבחרתם.

הצלחת! קוד לתחילת הדרך של דף הכניסה של Shrine צריך לפעול במכשיר שלכם. הלוגו של Shrine והשם Shrine יופיעו מתחתיו.

Android	iOS

בואו נסתכל על הקוד.

הערות ה-TODO בקוד כוללות מספרים (101,‏ 102 וכו'), שמפנים למספר של ה-codelab שבו תטמיעו את השינוי.

ווידג'טים ב- login.dart

פותחים את login.dart. היא צריכה לכלול את הפרטים הבאים:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

שימו לב שהיא מכילה הצהרת import ושתי מחלקות חדשות:

• ההצהרה import מאפשרת להשתמש בספריית Material בקובץ הזה.
• המחלקות LoginPage מייצגות את כל הדף שמוצג בסימולטור.
• הפונקציה _LoginPageState class's build() שולטת באופן שבו נוצרים כל הווידג'טים בממשק המשתמש שלנו.

כדי לקבל מידע נוסף על היסודות של ממשק המשתמש של Flutter ועל הווידג'טים, אפשר לעיין בסיור ב-Flutter Widget Framework או לבצע את ה-codelab Write Your First Flutter App, part 1.

4. הוספת ווידג'טים מסוג TextField

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

שדרגנו משמעותית את שדות הטקסט של Material כדי לשפר את הגמישות של המותג, והשיפורים מבוססים על מחקר מקיף של חוויית המשתמש (UX) כדי לשפר את השימושיות והעיצוב החזותי.

מידע נוסף על שדות הטקסט החדשים זמין במאמר ההנחיות של Material.

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

הוספת הווידג'טים TextField

מוסיפים שני שדות טקסט חדשים ואלמנט ריווח אחרי const SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

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

שומרים את הפרויקט (באמצעות צירוף המקשים: Command + s) ומבצעים טעינה מחדש.

עכשיו אמור להופיע דף עם שני שדות טקסט: Username (שם משתמש) ו-Password (סיסמה). כדאי לבדוק את האנימציה של התווית הצפה:

Android	iOS

התכונות של TextField כוללות:

• אפשר לשנות בקלות את המראה של הווידג'ט TextField. בשדה העיטור, מציינים ערך InputDecoration.
• שדה הטקסט מציג כברירת מחדל משוב למגע (שנקרא אדווה או 'דיו').
• ‫FormField הוא ווידג'ט דומה עם תכונות מיוחדות להטמעת שדות בטפסים.
• מסמכי עזרה בנושא המחלקה TextField

5. הוספת כפתורים

בשלב הבא, נוסיף שני לחצנים לדף הכניסה: 'ביטול' ו'הבא'. נשתמש בשני סוגים של ווידג'טים של לחצנים: TextButton ו-ElevatedButton.

בחירה בין לחצני טקסט לבין לחצנים מוגבהים

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

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

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

מידע נוסף על היררכיית הכפתורים זמין במאמר Buttons (כפתורים) בהנחיות של Material.

הוספת OverflowBar

אחרי שדות הטקסט, מוסיפים את OverflowBar לילדים של ListView:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

הרכיב OverflowBar מסדר את רכיבי הצאצא שלו בשורה.

הוספת הלחצנים

לאחר מכן מוסיפים שני לחצנים לרשימת children של OverflowBar:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

למה יש בלוקים ריקים בשדות onPressed: ‎?

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

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

שומרים את הפרויקט. מתחת לשדה הטקסט האחרון, אמורים להופיע שני לחצנים:

Android	iOS

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

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

הוספת TextEditingControllers

כדי לאפשר ניקוי של ערכי שדות הטקסט, נוסיף TextEditingControllers כדי לשלוט בטקסט שלהם.

מתחת להצהרה של המחלקה _LoginPageState, מוסיפים את בקרים כמשתנים final.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

בשדה controller: של שדה הטקסט הראשון, מגדירים את _usernameController:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

בשדה controller: של שדה הטקסט השני, מגדירים עכשיו את _passwordController:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

עריכה של onPressed

מוסיפים פקודה לניקוי כל בקר בפונקציה onPressed: של TextButton:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

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

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

הבלטה

כדי לסגור את התצוגה הזו, אנחנו רוצים להוציא (או להסיר) את הדף הזה (שנקרא ב-Flutter route) ממערך הניווט.

‫Navigator שומר על מחסנית של מסלולים בדיוק כמו UINavigationController ב-iOS. העברה של מסלול מעבירה אותו לחלק העליון של הערימה. הוצאה מהמחסנית מסירה את המסלול האחרון שנוסף. בapp.dart של האפליקציה שלנו, כשמתקשרים לinitialRoute: '/login',, מסך הכניסה מתווסף לחלונית הניווט.

מידע על מסלולים וניווט זמין במאמר בנושא היסודות של הניווט.

בפונקציה onPressed: של ElevatedButton, מוציאים את המסלול האחרון מ-Navigator:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

לבסוף, פותחים את home.dart ומגדירים את resizeToAvoidBottomInset ל-false ב-Scaffold:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

כך מוודאים שהמקלדת לא תשנה את הגודל של דף הבית או של הווידג'טים שבו.

זהו! שומרים את הפרויקט. לוחצים על 'הבא'.

כל הכבוד!

Android	iOS

המסך הזה הוא נקודת ההתחלה של ה-Codelab הבא שלנו, שתעבדו עליו ב-MDC-102.

מידע על לחצנים:

• בנוסף ל-TextButton ול-ElevatedButton, יש גם OutlinedButton, ‏ FloatingActionButton, ‏ IconButton ועוד.

6. מעולה!

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

אפליקציית MDC-101 המלאה זמינה בענף 102-starter_and_101-complete.

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

השלבים הבאים

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

אפשר גם לעבור אל MDC-102: Material Design Structure and Layout כדי לקבל מידע על הרכיבים שמוסברים ב-MDC-102 ל-Flutter.

ה-codelab הבא

הצלחתי להשלים את ה-codelab הזה בזמן סביר ובמאמץ סביר

נכון מאוד נכון אין לי דעה לכאן או לכאן לא נכון לא נכון בכלל

אני רוצה להמשיך להשתמש ב-Material Components בעתיד

נכון מאוד נכון אין לי דעה לכאן או לכאן לא נכון לא נכון בכלל