אפליקציית Flutter הראשונה שלך

1. מבוא

‫Flutter היא ערכת הכלים של Google לפיתוח ממשקי משתמש. היא מאפשרת לפתח אפליקציות למכשירים ניידים, לאינטרנט ולמחשבים – מ-codebase יחיד. ב-Codelab הזה תבנו את אפליקציית Flutter הבאה:

האפליקציה יוצרת שמות שנשמעים מגניבים, כמו newstay,‏ lightstream,‏ mainbrake או graypine. המשתמש יכול לבקש את השם הבא, להוסיף את השם הנוכחי למועדפים ולעיין ברשימת השמות המועדפים בדף נפרד. האפליקציה רספונסיבית לגדלים שונים של מסכים.

מה תלמדו

  • הסבר בסיסי על אופן הפעולה של Flutter
  • יצירת פריסות ב-Flutter
  • חיבור בין אינטראקציות של משתמשים (כמו לחיצות על לחצנים) לבין התנהגות האפליקציה
  • שמירה על סדר בקוד Flutter
  • התאמת האפליקציה למסכים שונים
  • איך יוצרים מראה ותחושה עקביים באפליקציה

תקבלו מסגרת בסיסית כדי שתוכלו לדלג ישר לחלקים המעניינים.

e9c6b402cd8003fd.png

בסרטון הבא, פיליפ מסביר את כל מה שצריך לדעת על ה-codelab.

לוחצים על Next (הבא) כדי להתחיל את המעבדה.

2. הגדרת סביבת Flutter

עריכה

כדי שה-codelab הזה יהיה פשוט ככל האפשר, אנחנו מניחים שתשתמשו ב-Visual Studio Code (VS Code) כסביבת הפיתוח שלכם. הוא בחינם ופועל בכל הפלטפורמות העיקריות.

כמובן שאפשר להשתמש בכל עורך שרוצים: Android Studio,‏ IntelliJ IDEs אחרים,‏ Emacs,‏ Vim או Notepad++. כולם עובדים עם Flutter.

מומלץ להשתמש ב-VS Code בשביל ה-codelab הזה, כי ההוראות מוגדרות כברירת מחדל לקיצורי דרך ספציפיים ל-VS Code. קל יותר לומר דברים כמו "לחץ כאן" או "לחץ על המקש הזה" במקום לומר משהו כמו "בצע את הפעולה המתאימה בעורך כדי לבצע את הפעולה X".

228c71510a8e868.png

בחירת יעד פיתוח

‫Flutter הוא ערכת כלים חוצת-פלטפורמות. האפליקציה יכולה לפעול בכל אחת ממערכות ההפעלה הבאות:

  • iOS
  • Android
  • Windows
  • macOS
  • Linux
  • אינטרנט

עם זאת, נהוג לבחור מערכת הפעלה אחת שבה בעיקר תפתחו את האפליקציה. זוהי 'מערכת ההפעלה לפיתוח' – מערכת ההפעלה שהאפליקציה פועלת בה במהלך הפיתוח.

16695777c07f18e5.png

לדוגמה, נניח שאתם משתמשים במחשב נייד עם Windows כדי לפתח אפליקציית Flutter. אם תבחרו ב-Android כיעד הפיתוח, בדרך כלל תחברו מכשיר Android למחשב הנייד עם Windows באמצעות כבל USB, והאפליקציה שאתם מפתחים תפעל במכשיר Android המחובר. אבל אפשר גם לבחור ב-Windows כיעד הפיתוח, מה שאומר שהאפליקציה שנמצאת בפיתוח תפעל כאפליקציית Windows לצד העורך.

יכול להיות שתתפתו לבחור באינטרנט כיעד הפיתוח. החיסרון בבחירה הזו הוא שמאבדים את אחד מפיצ'רי הפיתוח הכי שימושיים של Flutter: טעינה מחדש של מצב (Stateful Hot Reload). אי אפשר לבצע טעינה מחדש של אפליקציות אינטרנט ב-Flutter.

בוחרים עכשיו. חשוב לזכור: תמיד אפשר להריץ את האפליקציה במערכות הפעלה אחרות בהמשך. פשוט, כשיש יעד פיתוח ברור בראש, השלב הבא מתבצע בצורה חלקה יותר.

התקנת Flutter

ההוראות העדכניות ביותר להתקנת Flutter SDK זמינות תמיד בכתובת docs.flutter.dev.

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

  1. Flutter SDK
  2. קוד Visual Studio עם הפלאגין של Flutter
  3. התוכנה שנדרשת ליעד הפיתוח שבחרתם (לדוגמה: Visual Studio לטירגוט Windows או Xcode לטירגוט macOS)

בקטע הבא, תיצרו את פרויקט Flutter הראשון.

אם נתקלת בבעיות עד עכשיו, יכול להיות שחלק מהשאלות והתשובות האלה (מ-StackOverflow) יעזרו לך לפתור אותן.

שאלות נפוצות

3. יצירת פרויקט

יצירת פרויקט Flutter ראשון

מפעילים את Visual Studio Code ופותחים את לוח הפקודות (עם F1 או Ctrl+Shift+P או Shift+Cmd+P). מתחילים להקליד flutter new. בוחרים בפקודה Flutter: New Project (Flutter: פרויקט חדש).

לאחר מכן בוחרים באפשרות Application (אפליקציה) ואז בתיקייה שבה רוצים ליצור את הפרויקט. זה יכול להיות ספריית הבית או משהו כמו C:\src\.

ולבסוף, נותנים שם לפרויקט. משהו כמו namer_app או my_awesome_namer.

260a7d97f9678005.png

מערכת Flutter יוצרת את תיקיית הפרויקט ופותחת אותה ב-VS Code.

עכשיו תכתבו מחדש את התוכן של 3 קבצים עם פיגום בסיסי של האפליקציה.

העתקה והדבקה של האפליקציה הראשונית

בחלונית הימנית של VS Code, מוודאים שהאפשרות Explorer (סייר) נבחרה ופותחים את הקובץ pubspec.yaml.

e2a5bab0be07f4f7.png

מחליפים את התוכן של הקובץ בתוכן הבא:

pubspec.yaml

name: namer_app
description: "A new Flutter project."
publish_to: "none"
version: 0.1.0

environment:
  sdk: ^3.9.0

dependencies:
  flutter:
    sdk: flutter
  english_words: ^4.0.0
  provider: ^6.1.5

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

flutter:
  uses-material-design: true

קובץ ה-pubspec.yaml מציין מידע בסיסי על האפליקציה, כמו הגרסה הנוכחית שלה, התלות שלה בתוספים והנכסים שייכללו בה.

לאחר מכן, פותחים קובץ הגדרה נוסף בפרויקט, analysis_options.yaml.

a781f218093be8e0.png

מחליפים את התוכן שלו בתוכן הבא:

analysis_options.yaml

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    avoid_print: false
    prefer_const_constructors_in_immutables: false
    prefer_const_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_final_fields: false
    unnecessary_breaks: true
    use_key_in_widget_constructors: false

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

לבסוף, פותחים את הקובץ main.dart בספרייה lib/.

e54c671c9bb4d23d.png

מחליפים את התוכן של הקובץ בתוכן הבא:

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [Text('A random idea:'), Text(appState.current.asLowerCase)],
      ),
    );
  }
}

50 שורות הקוד האלה הן כל מה שיש באפליקציה עד עכשיו.

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

4. הוספת כפתור

בשלב הזה מוסיפים לחצן הבא כדי ליצור צמד מילים חדש.

הפעלת האפליקציה

קודם כול, פותחים את lib/main.dart ומוודאים שמכשיר היעד נבחר. בפינה השמאלית התחתונה של VS Code, יש לחצן שבו מוצג מכשיר היעד הנוכחי. כדי לשנות את ההגדרה, לוחצים עליה.

בזמן ש-lib/main.dart פתוח, מחפשים את לחצן ההפעלה b0a5d0200af5985d.png בפינה השמאלית העליונה של חלון VS Code ולוחצים עליו.

אחרי דקה בערך, האפליקציה מופעלת במצב ניפוי באגים. התוצאה לא נראית מרשימה במיוחד:

f96e7dfb0937d7f4.png

הפעלת Hot Reload בפעם הראשונה

בחלק התחתון של lib/main.dart, מוסיפים משהו למחרוזת באובייקט הראשון Text ושומרים את הקובץ (עם Ctrl+S או Cmd+S). לדוגמה:

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),  // ← Example change.
          Text(appState.current.asLowerCase),
        ],
      ),
    );

// ...

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

שאלות נפוצות

הוספת כפתור

לאחר מכן, מוסיפים לחצן בתחתית Column, ממש מתחת למופע השני של Text.

lib/main.dart

// ...

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(appState.current.asLowerCase),

          // ↓ Add this.
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),

        ],
      ),
    );

// ...

כששומרים את השינוי, האפליקציה מתעדכנת שוב: מופיע לחצן, וכשלוחצים עליו, במסוף הניפוי באגים ב-VS Code מופיעה ההודעה button pressed!‎.

קורס מהיר ב-Flutter ב-5 דקות

אמנם כיף לצפות במסוף ניפוי הבאגים, אבל אתם רוצים שהכפתור יעשה משהו משמעותי יותר. אבל לפני כן, כדאי לבחון את הקוד ב-lib/main.dart כדי להבין איך הוא פועל.

lib/main.dart

// ...

void main() {
  runApp(MyApp());
}

// ...

בחלק העליון של הקובץ נמצאת הפונקציה main(). במצב הנוכחי, הפקודה הזו רק אומרת ל-Flutter להריץ את האפליקציה שמוגדרת ב-MyApp.

lib/main.dart

// ...

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

// ...

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

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

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

// ...

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

  • ‫MyAppState מגדיר את הנתונים שהאפליקציה צריכה כדי לפעול. בשלב הזה, הוא מכיל רק משתנה אחד עם צמד המילים האקראי הנוכחי. תוכלו להוסיף לזה בהמשך.
  • מחלקת המצב מרחיבה את ChangeNotifier, מה שאומר שהיא יכולה להודיע לאחרים על השינויים שלה. לדוגמה, אם זוג המילים הנוכחי משתנה, חלק מהווידג'טים באפליקציה צריכים לדעת על כך.
  • הסטטוס נוצר ומסופק לאפליקציה כולה באמצעות ChangeNotifierProvider (אפשר לראות את הקוד למעלה ב-MyApp). כך כל ווידג'ט באפליקציה יכול לקבל את הסטטוס.

d9b6ecac5494a6ff.png

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {           // ← 1
    var appState = context.watch<MyAppState>();  // ← 2

    return Scaffold(                             // ← 3
      body: Column(                              // ← 4
        children: [
          Text('A random AWESOME idea:'),        // ← 5
          Text(appState.current.asLowerCase),    // ← 6
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),
        ],                                       // ← 7
      ),
    );
  }
}

// ...

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

  1. כל ווידג'ט מגדיר שיטת build() שמופעלת אוטומטית בכל פעם שהנסיבות של הווידג'ט משתנות, כדי שהווידג'ט תמיד יהיה עדכני.
  2. ‫MyHomePage עוקב אחרי שינויים במצב הנוכחי של האפליקציה באמצעות המתודה watch.
  3. כל שיטת build חייבת להחזיר ווידג'ט או (בדרך כלל) עץ מקונן של ווידג'טים. במקרה הזה, הווידג'ט ברמה העליונה הוא Scaffold. לא תעבדו עם Scaffold ב-codelab הזה, אבל זה ווידג'ט שימושי שמופיע ברוב האפליקציות של Flutter בעולם האמיתי.
  4. ‫Column הוא אחד מווידג'טים הפריסה הבסיסיים ביותר ב-Flutter. הוא מקבל מספר כלשהו של ילדים ומציב אותם בעמודה מלמעלה למטה. כברירת מחדל, הצאצאים של העמודה מוצגים בחלק העליון. בקרוב תשנו את זה כך שהעמודה תהיה מיושרת למרכז.
  5. שינית את הווידג'ט Text בשלב הראשון.
  6. ווידג'ט Text השני מקבל את appState וניגש לחבר היחיד בכיתה הזו, current (שהוא WordPair). WordPair מספק כמה פונקציות getter שימושיות, כמו asPascalCase או asSnakeCase. בדוגמה הזו אנחנו משתמשים ב-asLowerCase, אבל אפשר לשנות את זה עכשיו אם מעדיפים אחת מהאפשרויות האחרות.
  7. שימו לב שבקוד Flutter נעשה שימוש רב בפסיקים בסוף השורה. אין צורך בפסיק הזה, כי children הוא החבר האחרון (וגם היחיד) ברשימת הפרמטרים Column הזו. עם זאת, בדרך כלל מומלץ להשתמש בפסיקים מסוג trailing: הם מאפשרים להוסיף בקלות עוד חברים, והם גם משמשים כרמז לכלי לעיצוב אוטומטי של Dart כדי להוסיף שם שורה חדשה. מידע נוסף זמין במאמר בנושא עיצוב קוד.

בשלב הבא, מקשרים את הלחצן למצב.

ההתנהגות הראשונה

גוללים אל MyAppState ומוסיפים אמצעי תשלום getNext.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  // ↓ Add this.
  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

השיטה החדשה getNext() מקצה מחדש את current עם WordPair אקראי חדש. היא גם קוראת ל-notifyListeners()(שיטה של ChangeNotifier) שמבטיחה שכל מי שצופה ב-MyAppState יקבל הודעה.

כל מה שנותר הוא להפעיל את ה-method‏ getNext מהקריאה החוזרת של הלחצן.

lib/main.dart

// ...

    ElevatedButton(
      onPressed: () {
        appState.getNext();  // ← This instead of print().
      },
      child: Text('Next'),
    ),

// ...

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

בקטע הבא, נשפר את המראה של ממשק המשתמש.

5. שיפור המראה של האפליקציה

כך נראית האפליקציה כרגע.

3dd8a9d8653bdc56.png

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

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

2bbee054d81a3127.png

חילוץ ווידג'ט

השורה שאחראית להצגת צמד המילים הנוכחי נראית עכשיו כך: Text(appState.current.asLowerCase). כדי לשנות אותו למשהו מורכב יותר, כדאי לחלץ את השורה הזו לווידג'ט נפרד. השימוש בווידג'טים נפרדים לחלקים לוגיים נפרדים בממשק המשתמש הוא דרך חשובה לניהול מורכבות ב-Flutter.

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

לכן, צריך לכתוב מחדש את הווידג'ט MyHomePage באופן הבא:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;                 // ← Add this.

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(pair.asLowerCase),                // ← Change to this.
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

נחמד. הווידג'ט Text לא מתייחס יותר לכל appState.

עכשיו, מציגים את התפריט Refactor (ארגון מחדש). ב-VS Code, אפשר לעשות את זה באחת משתי דרכים:

  1. לוחצים לחיצה ימנית על קטע הקוד שרוצים לבצע בו רפקטורינג (Text במקרה הזה) ובוחרים באפשרות Refactor... (רפקטורינג...) מהתפריט הנפתח.

או

  1. מעבירים את הסמן לקטע הקוד שרוצים לבצע בו רפקטורינג (Text במקרה הזה) ומקישים על Ctrl+. (ב-Windows או ב-Linux) או על Cmd+. (ב-Mac).

בתפריט Refactor (שינוי מבנה הקוד), בוחרים באפשרות Extract Widget (הוצאת ווידג'ט). נותנים שם, למשל BigCard, ולוחצים על Enter.

כך נוצרת אוטומטית כיתה חדשה, BigCard, בסוף הקובץ הנוכחי. הכיתה נראית כך:

lib/main.dart

// ...

class BigCard extends StatelessWidget {
  const BigCard({super.key, required this.pair});

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}

// ...

שימו לב שהאפליקציה ממשיכה לפעול גם במהלך השינוי הזה.

הוספת כרטיס

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

מחפשים את המחלקה BigCard ואת ה-method build() בתוכה. כמו קודם, מציגים את התפריט Refactor (שינוי מבנה הקוד) בווידג'ט Text. אבל הפעם לא תחלצו את הווידג'ט.

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

הגדלת הריווח הפנימי מערך ברירת המחדל 8.0. לדוגמה, אפשר להשתמש במשהו כמו 20 כדי להגדיל את המרווח הפנימי.

לאחר מכן, עולים רמה אחת למעלה. מציבים את הסמן בווידג'ט Padding, פותחים את התפריט Refactor (שינוי מבנה) ובוחרים באפשרות Wrap with widget... (הוספת ווידג'ט מסביב).

כך תוכלו לציין את הווידג'ט הראשי. מקלידים Card ומקישים על Enter.

הווידג'ט הזה עוטף את הווידג'ט Padding, ולכן גם את הווידג'ט Text, בווידג'ט Card.

lib/main.dart

// ...

class BigCard extends StatelessWidget {
  const BigCard({super.key, required this.pair});

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }
}

// ...

האפליקציה תיראה עכשיו בערך כך:

6031adbc0a11e16b.png

עיצוב וסגנון

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

מבצעים את השינויים הבאים בשיטה של BigCard build().

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);       // ← Add this.

    return Card(
      color: theme.colorScheme.primary,    // ← And also this.
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }

// ...

שתי השורות החדשות האלה מבצעות הרבה עבודה:

  • קודם, הקוד מבקש את ערכת העיצוב הנוכחית של האפליקציה באמצעות Theme.of(context).
  • לאחר מכן, הקוד מגדיר את צבע הכרטיס כך שיהיה זהה למאפיין colorScheme של ערכת הנושא. ערכת הצבעים מכילה הרבה צבעים, והצבע primary הוא הצבע הבולט ביותר שמגדיר את האפליקציה.

הכרטיס צבוע עכשיו בצבע הראשי של האפליקציה:

a136f7682c204ea1.png

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

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

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

TextTheme

עדיין יש בעיה בכרטיס: הטקסט קטן מדי והצבע שלו מקשה על הקריאה. כדי לפתור את הבעיה, צריך לבצע את השינויים הבאים בשיטה build() של BigCard.

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    // ↓ Add this.
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        // ↓ Change this line.
        child: Text(pair.asLowerCase, style: style),
      ),
    );
  }

// ...

מה הסיבה לשינוי הזה:

  • כשמשתמשים ב-theme.textTheme,, מקבלים גישה לעיצוב הגופן של האפליקציה. המחלקות האלה כוללות חברים כמו bodyMedium (לטקסט רגיל בגודל בינוני), caption (לכתוביות של תמונות) או headlineLarge (לכותרות גדולות).
  • המאפיין displayMedium הוא סגנון גדול שמיועד לטקסט שמוצג. המילה תצוגה משמשת כאן במובן הטיפוגרפי, כמו בגופן לתצוגה. במסמכי התיעוד של displayMedium מצוין ש "סגנונות תצוגה שמורים לטקסט קצר וחשוב" – בדיוק כמו במקרה השימוש שלנו.
  • הערך של המאפיין displayMedium של העיצוב יכול להיות null. שפת התכנות Dart שבה אתם כותבים את האפליקציה הזו היא null-safe, ולכן לא תוכלו להפעיל מתודות של אובייקטים שעשויים להיות null. עם זאת, במקרה הזה אפשר להשתמש באופרטור ! ("אופרטור קריאה") כדי להבהיר ל-Dart שאתם יודעים מה אתם עושים. (displayMedium הוא בוודאות לא null במקרה הזה. הסיבה לכך לא מוסברת ב-codelab הזה).
  • הפונקציה copyWith() שמופעלת על displayMedium מחזירה עותק של סגנון הטקסט עם השינויים שהגדרתם. במקרה הזה, משנים רק את צבע הטקסט.
  • כדי לקבל את הצבע החדש, צריך להיכנס שוב לעיצוב של האפליקציה. המאפיין onPrimary של ערכת הצבעים מגדיר צבע שמתאים לשימוש על הצבע הראשי של האפליקציה.

האפליקציה אמורה להיראות עכשיו בערך כך:

2405e9342d28c193.png

אם רוצים, אפשר לשנות עוד את הכרטיס. רעיונות לשינויים:

  • copyWith() מאפשר לשנות הרבה יותר מסתם את הצבע של סגנון הטקסט. כדי לראות את הרשימה המלאה של הנכסים שאפשר לשנות, מציבים את הסמן בכל מקום בתוך הסוגריים של copyWith(), ומקישים על Ctrl+Shift+Space (Windows/Linux) או על Cmd+Shift+Space (Mac).
  • באופן דומה, אפשר לשנות עוד דברים בווידג'ט של Card. לדוגמה, אפשר להגדיל את הצל של הכרטיס על ידי הגדלת הערך של הפרמטר elevation.
  • כדאי להתנסות עם צבעים שונים. בנוסף ל-theme.colorScheme.primary, יש גם את .secondary, את .surface ועוד רבים אחרים. לכל הצבעים האלה יש מקבילות ב-onPrimary.

שיפור הנגישות

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

d1fad7944fb890ea.png

אבל לפעמים צריך לעשות קצת עבודה. במקרה של האפליקציה הזו, יכול להיות שלקורא המסך יהיו בעיות בהגיית חלק מזוגות המילים שנוצרו. בני אדם לא מתקשים לזהות את שתי המילים ב-cheaphead, אבל קורא מסך עלול להגות את הצירוף ph באמצע המילה כ-f.

אחד הפתרונות הוא להחליף את pair.asLowerCase ב-"${pair.first} ${pair.second}". האחרון משתמש בהצבת מחרוזת בתוך מחרוזת כדי ליצור מחרוזת (כמו "cheap head") משתי המילים שמופיעות ב-pair. שימוש בשתי מילים נפרדות במקום במילה מורכבת מבטיח שקוראי המסך יזהו אותן בצורה נכונה, ומספק חוויה טובה יותר למשתמשים עם ליקויי ראייה.

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

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: "${pair.first} ${pair.second}",
        ),
      ),
    );
  }

// ...

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

מרכוז ממשק המשתמש

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

קודם כל, חשוב לזכור שBigCard הוא חלק מColumn. כברירת מחדל, העמודות מקבצות את הנתונים של הילדים בחלק העליון, אבל אפשר לשנות את זה. עוברים לשיטה MyHomePage של build() ומבצעים את השינוי הבא:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,  // ← Add this.
        children: [
          Text('A random AWESOME idea:'),
          BigCard(pair: pair),
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

המאפיין הזה ממקם את רכיבי הצאצא במרכז של Column לאורך הציר הראשי (האנכי).

b555d4c7f5000edf.png

הילדים כבר ממוקמים במרכז לאורך ציר הצלב של העמודה (כלומר, הם כבר ממוקמים במרכז באופן אופקי). אבל Column הסרטון עצמו לא ממוקם במרכז בתוך Scaffold. אפשר לבדוק את זה באמצעות הכלי לבדיקת ווידג'טים.

השימוש ב-Widget Inspector הוא מעבר להיקף של ה-codelab הזה, אבל אפשר לראות שכשהרכיב Column מודגש, הוא לא תופס את כל הרוחב של האפליקציה. הוא תופס רק את המרחב האופקי שנדרש לרכיבי הצאצא שלו.

אפשר פשוט למרכז את העמודה עצמה. מציבים את הסמן על Column, פותחים את התפריט Refactor (עם Ctrl+. או Cmd+.) ובוחרים באפשרות Wrap with Center.

האפליקציה אמורה להיראות עכשיו בערך כך:

455688d93c30d154.png

אם רוצים, אפשר לבצע עוד שינויים.

  • אפשר להסיר את הווידג'ט Text שמופיע מעל BigCard. אפשר לטעון שהטקסט התיאורי ("רעיון אקראי ומדהים:") כבר לא נחוץ, כי ממשק המשתמש ברור גם בלעדיו. כך גם קל יותר לנקות.
  • אפשר גם להוסיף ווידג'ט SizedBox(height: 10) בין BigCard לבין ElevatedButton. כך יש יותר הפרדה בין שני הווידג'טים. הווידג'ט SizedBox תופס מקום ולא מציג שום דבר בעצמו. בדרך כלל משתמשים בו כדי ליצור 'פערים' חזותיים.

אחרי השינויים האופציונליים, הקוד הבא מופיע ב-MyHomePage:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

// ...

האפליקציה תיראה כך:

3d53d2b071e2f372.png

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

6. הוספת פונקציונליות

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

e6b01a8c90df8ffa.png

הוספת הלוגיקה העסקית

גוללים אל MyAppState ומוסיפים את הקוד הבא:

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  // ↓ Add the code below.
  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

// ...

בודקים את השינויים:

  • הוספת נכס חדש לחשבון MyAppState בשם favorites. הנכס הזה מאותחל עם רשימה ריקה: [].
  • ציינתם גם שהרשימה יכולה להכיל רק צמדי מילים: <WordPair>[], באמצעות גנריקה. כך האפליקציה תהיה חזקה יותר – Dart לא יאפשר אפילו להריץ את האפליקציה אם תנסו להוסיף לה משהו שהוא לא WordPair. כך תוכלו להשתמש ברשימת favorites בלי לחשוש שאובייקטים לא רצויים (כמו null) מסתתרים בה.
  • הוספת גם שיטה חדשה, toggleFavorite(), שמסירה את צמד המילים הנוכחי מרשימת המועדפים (אם הוא כבר נמצא שם) או מוסיפה אותו (אם הוא עדיין לא נמצא שם). בכל מקרה, הקוד קורא ל-notifyListeners(); לאחר מכן.

הוספת הכפתור

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

קודם כול, עוטפים את הלחצן הקיים בתג Row. עוברים לשיטה MyHomePage של build(), מציבים את הסמן על ElevatedButton, מציגים את התפריט Refactor באמצעות Ctrl+. או Cmd+., ובוחרים באפשרות Wrap with Row.

כששומרים, אפשר לראות שהפעולה של Row דומה לזו של Column – כברירת מחדל, הוא מקבץ את הצאצאים שלו בצד ימין. (Column קיבצה את כל הילדים למעלה). כדי לפתור את הבעיה, אפשר להשתמש באותה גישה כמו קודם, אבל עם mainAxisAlignment. עם זאת, למטרות דידקטיות (למידה), אפשר להשתמש ב-mainAxisSize. ההגדרה הזו אומרת ל-Row לא לתפוס את כל השטח האופקי שזמין.

מבצעים את השינוי הבא:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,   // ← Add this.
              children: [
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

ממשק המשתמש חוזר למצב שהיה לפני כן.

3d53d2b071e2f372.png

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

e6b01a8c90df8ffa.png

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

גם אם לא הצלחתם, זה בסדר גמור – זו השעה הראשונה שלכם עם Flutter.

252f7c4a212c94d2.png

זו דרך אחת להוסיף את הלחצן השני ל-MyHomePage. הפעם, משתמשים בבונה ElevatedButton.icon() כדי ליצור לחצן עם סמל. בראש השיטה build, בוחרים את הסמל המתאים בהתאם לשאלה אם צמד המילים הנוכחי כבר נמצא במועדפים. שימו לב גם לשימוש ב-SizedBox שוב, כדי להרחיק קצת בין שני הלחצנים.

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    // ↓ Add this.
    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [

                // ↓ And this.
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),

                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

האפליקציה אמורה להיראות כך:

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

7. הוספת פס ניווט

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

f62c54f5401a187.png

כדי להגיע למהות השלב הזה כמה שיותר מהר, מפצלים את MyHomePage לשני ווידג'טים נפרדים.

בוחרים את כל הטקסט MyHomePage, מוחקים אותו ומחליפים אותו בקוד הבא:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SafeArea(
            child: NavigationRail(
              extended: false,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.home),
                  label: Text('Home'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.favorite),
                  label: Text('Favorites'),
                ),
              ],
              selectedIndex: 0,
              onDestinationSelected: (value) {
                print('selected: $value');
              },
            ),
          ),
          Expanded(
            child: Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              child: GeneratorPage(),
            ),
          ),
        ],
      ),
    );
  }
}

class GeneratorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BigCard(pair: pair),
          SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: Text('Like'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.getNext();
                },
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

// ...

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

388bc25fe198c54a.png

בודקים את השינויים.

  • קודם כול, שימו לב שכל התוכן של MyHomePage מחולץ לווידג'ט חדש, GeneratorPage. החלק היחיד בווידג'ט הישן MyHomePage שלא חולץ הוא Scaffold.
  • ‫MyHomePage החדש מכיל Row עם שני צאצאים. הווידג'ט הראשון הוא SafeArea, והווידג'ט השני הוא Expanded.
  • המאפיין SafeArea מוודא שהצאצא לא מוסתר על ידי חריץ בחומרה או על ידי סרגל סטטוס. באפליקציה הזו, הווידג'ט עוטף את NavigationRail כדי למנוע את ההסתרה של לחצני הניווט על ידי סרגל סטטוס בנייד, למשל.
  • אפשר לשנות את השורה extended: false ב-NavigationRail ל-true. התוויות מוצגות לצד הסמלים. בשלב הבא נסביר איך לעשות את זה באופן אוטומטי כשיש לאפליקציה מספיק מקום אופקי.
  • סרגל הניווט כולל שני יעדים (דף הבית ומועדפים), עם הסמלים והתוויות שלהם. הוא גם מגדיר את selectedIndex הנוכחי. אינדקס נבחר של אפס בוחר את היעד הראשון, אינדקס נבחר של אחד בוחר את היעד השני וכן הלאה. בשלב הזה, הערך הוא אפס.
  • בסרגל הניווט מוגדר גם מה קורה כשהמשתמש בוחר באחד היעדים באמצעות onDestinationSelected. בשלב הזה, האפליקציה רק מוציאה את ערך האינדקס המבוקש באמצעות print().
  • הצאצא השני של Row הוא הווידג'ט Expanded. ווידג'טים מורחבים שימושיים מאוד בשורות ובעמודות – הם מאפשרים ליצור פריסות שבהן חלק מהווידג'טים תופסים רק את המקום שהם צריכים (SafeArea במקרה הזה), ווידג'טים אחרים תופסים כמה שיותר מהמקום שנותר (Expanded במקרה הזה). אחת הדרכים להבין את הווידג'טים של Expanded היא שהם "חמדנים". כדי להבין טוב יותר את התפקיד של הווידג'ט הזה, אפשר לנסות להוסיף עוד Expanded לווידג'ט SafeArea. הפריסה שמתקבלת נראית בערך כך:

6bbda6c1835a1ae.png

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

ווידג'טים בלי שמירת מצב לעומת ווידג'טים עם שמירת מצב

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

אבל זה עומד להשתנות.

צריך למצוא דרך לשמור את הערך של selectedIndex של סרגל הניווט. אתם רוצים גם לשנות את הערך הזה מתוך הקריאה החוזרת (callback) של onDestinationSelected.

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

e52d9c0937cc0823.jpeg

חלק מהמצבים רלוונטיים רק לווידג'ט אחד, ולכן הם צריכים להישאר בווידג'ט הזה.

מזינים את StatefulWidget, סוג של ווידג'ט שכולל State. קודם ממירים את MyHomePage לווידג'ט עם מצב.

מציבים את הסמן בשורה הראשונה של MyHomePage (השורה שמתחילה ב-class MyHomePage...) ומציגים את התפריט Refactor באמצעות Ctrl+. או Cmd+.. לאחר מכן בוחרים באפשרות Convert to StatefulWidget (המרה ל-StatefulWidget).

סביבת הפיתוח המשולבת יוצרת בשבילכם מחלקה חדשה, _MyHomePageState. הכיתה הזו מרחיבה את State, ולכן יכולה לנהל את הערכים שלה. (הוא יכול להשתנות מעצמו). שימו לב גם שהשיטה build מהווידג'ט הישן בלי שמירת מצב עברה אל _MyHomePageState (במקום להישאר בווידג'ט). הוא הועבר מילה במילה – לא היה שינוי בשיטה build. הוא פשוט נמצא במקום אחר.

setState

הווידג'ט החדש עם מצב צריך לעקוב רק אחרי משתנה אחד: selectedIndex. מבצעים את 3 השינויים הבאים ב-_MyHomePageState:

lib/main.dart

// ...

class _MyHomePageState extends State<MyHomePage> {

  var selectedIndex = 0;     // ← Add this property.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SafeArea(
            child: NavigationRail(
              extended: false,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.home),
                  label: Text('Home'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.favorite),
                  label: Text('Favorites'),
                ),
              ],
              selectedIndex: selectedIndex,    // ← Change to this.
              onDestinationSelected: (value) {

                // ↓ Replace print with this.
                setState(() {
                  selectedIndex = value;
                });

              },
            ),
          ),
          Expanded(
            child: Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              child: GeneratorPage(),
            ),
          ),
        ],
      ),
    );
  }
}

// ...

בודקים את השינויים:

  1. מגדירים משתנה חדש, selectedIndex, ומאתחלים אותו ל-0.
  2. משתמשים במשתנה החדש הזה בהגדרה של NavigationRail במקום במשתנה 0 שהיה שם עד עכשיו.
  3. כשקוראים לפונקציית הקריאה החוזרת onDestinationSelected, במקום רק להדפיס את הערך החדש במסוף, מקצים אותו ל-selectedIndex בתוך קריאה ל-setState(). הקריאה הזו דומה לשיטת notifyListeners() ששימשה בעבר – היא מוודאת שממשק המשתמש מתעדכן.

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

שימוש ב-selectedIndex

ממקמים את הקוד הבא בחלק העליון של השיטה build של _MyHomePageState, ממש לפני return Scaffold:

lib/main.dart

// ...

Widget page;
switch (selectedIndex) {
  case 0:
    page = GeneratorPage();
    break;
  case 1:
    page = Placeholder();
    break;
  default:
    throw UnimplementedError('no widget for $selectedIndex');
}

// ...

בודקים את קטע הקוד הזה:

  1. הקוד מכריז על משתנה חדש, page, מהסוג Widget.
  2. לאחר מכן, משפט switch מקצה מסך ל-page, בהתאם לערך הנוכחי ב-selectedIndex.
  3. מכיוון שעדיין אין FavoritesPage, אפשר להשתמש ב-Placeholder – ווידג'ט שימושי שמצייר מלבן עם קו חוצה בכל מקום שבו מציבים אותו, כדי לסמן את החלק הזה בממשק המשתמש כלא גמור.

5685cf886047f6ec.png

  1. בהתאם לעיקרון הכשל המהיר, משפט ה-switch מוודא גם שתוצג שגיאה אם selectedIndex הוא לא 0 ולא 1. כך אפשר למנוע באגים בהמשך. אם מוסיפים יעד חדש לסרגל הניווט ושוכחים לעדכן את הקוד הזה, התוכנית קורסת בשלב הפיתוח (במקום לנחש למה הדברים לא עובדים, או לפרסם קוד עם באגים בייצור).

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

כך נראה _MyHomePageState אחרי השינוי היחיד שנותר:

lib/main.dart

// ...

class _MyHomePageState extends State<MyHomePage> {
  var selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Widget page;
    switch (selectedIndex) {
      case 0:
        page = GeneratorPage();
        break;
      case 1:
        page = Placeholder();
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }

    return Scaffold(
      body: Row(
        children: [
          SafeArea(
            child: NavigationRail(
              extended: false,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.home),
                  label: Text('Home'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.favorite),
                  label: Text('Favorites'),
                ),
              ],
              selectedIndex: selectedIndex,
              onDestinationSelected: (value) {
                setState(() {
                  selectedIndex = value;
                });
              },
            ),
          ),
          Expanded(
            child: Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              child: page,  // ← Here.
            ),
          ),
        ],
      ),
    );
  }
}

// ...

האפליקציה עוברת עכשיו בין GeneratorPage לבין ה-placeholder שיהפוך בקרוב לדף מועדפים.

תגובה למשתמשים

בשלב הבא, הופכים את פס הניווט לרספונסיבי. כלומר, להגדיר שהתוויות יוצגו אוטומטית (באמצעות extended: true) כשיש מספיק מקום להצגה שלהן.

a8873894c32e0d0b.png

‫Flutter מספקת כמה ווידג'טים שעוזרים לכם ליצור אפליקציות רספונסיביות באופן אוטומטי. לדוגמה, Wrap הוא ווידג'ט שדומה ל-Row או ל-Column, שמציג את הצאצאים בשורה הבאה (שנקראת 'run') באופן אוטומטי כשאין מספיק מקום אנכי או אופקי. יש גם את FittedBox, ווידג'ט שמתאים באופן אוטומטי את הרכיב הצאצא שלו לשטח הזמין בהתאם להגדרות שלכם.

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

לדוגמה, אם רוצים להציג תוויות רק אם הרוחב של MyHomePage הוא לפחות 600 פיקסלים.

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

שוב, משתמשים בתפריט Refactor של Flutter ב-VS Code כדי לבצע את השינויים הנדרשים. אבל הפעם זה קצת יותר מסובך:

  1. בתוך השיטה _MyHomePageState של build, מציבים את הסמן על Scaffold.
  2. מציגים את התפריט Refactor (שינוי מבנה הקוד) באמצעות Ctrl+. (Windows/Linux) או Cmd+. (Mac).
  3. בוחרים באפשרות Wrap with Builder (הוספה ל-Builder) ומקישים על Enter.
  4. משנים את השם של Builder החדש שנוסף ל-LayoutBuilder.
  5. שינוי רשימת הפרמטרים של הקריאה החוזרת מ-(context) ל-(context, constraints).

הקריאה החוזרת (callback) של LayoutBuilder builder מתבצעת בכל פעם שהאילוצים משתנים. זה קורה למשל במקרים הבאים:

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

עכשיו הקוד יכול לקבוע אם להציג את התווית על ידי שליחת שאילתה לגבי הערך הנוכחי של constraints. מבצעים את השינוי הבא בשורה אחת בשיטה _MyHomePageState של build:

lib/main.dart

// ...

class _MyHomePageState extends State<MyHomePage> {
  var selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Widget page;
    switch (selectedIndex) {
      case 0:
        page = GeneratorPage();
        break;
      case 1:
        page = Placeholder();
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }

    return LayoutBuilder(builder: (context, constraints) {
      return Scaffold(
        body: Row(
          children: [
            SafeArea(
              child: NavigationRail(
                extended: constraints.maxWidth >= 600,  // ← Here.
                destinations: [
                  NavigationRailDestination(
                    icon: Icon(Icons.home),
                    label: Text('Home'),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.favorite),
                    label: Text('Favorites'),
                  ),
                ],
                selectedIndex: selectedIndex,
                onDestinationSelected: (value) {
                  setState(() {
                    selectedIndex = value;
                  });
                },
              ),
            ),
            Expanded(
              child: Container(
                color: Theme.of(context).colorScheme.primaryContainer,
                child: page,
              ),
            ),
          ],
        ),
      );
    });
  }
}


// ...

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

הפעולה היחידה שנותרה היא להחליף את Placeholder במסך מועדפים אמיתי. הסבר על כך מופיע בקטע הבא.

8. הוספת דף חדש

זוכרים את הווידג'ט Placeholder שבו השתמשנו במקום בדף מועדפים?

הגיע הזמן לתקן את זה.

אם אתם רוצים לנסות, אתם יכולים לבצע את השלב הזה בעצמכם. המטרה היא להציג את רשימת favorites בווידג'ט חדש בלי שמירת מצב, FavoritesPage, ואז להציג את הווידג'ט הזה במקום Placeholder.

ריכזנו כאן כמה טיפים:

  • אם רוצים להוסיף Column שאפשר לגלול בו, משתמשים בווידג'ט ListView.
  • חשוב לזכור שאפשר לגשת למופע MyAppState מכל ווידג'ט באמצעות context.watch<MyAppState>().
  • אם רוצים לנסות גם ווידג'ט חדש, ListTile כולל מאפיינים כמו title (בדרך כלל לטקסט), leading (לאייקונים או לאווטרים) ו-onTap (לאינטראקציות). אבל אפשר להשיג אפקטים דומים באמצעות הווידג'טים שאתם כבר מכירים.
  • ב-Dart אפשר להשתמש בלולאות for בתוך קבועים מילוליים של אוספים. לדוגמה, אם messages מכיל רשימה של מחרוזות, אפשר להשתמש בקוד כמו זה:

f0444bba08f205aa.png

לעומת זאת, אם אתם מכירים יותר תכנות פונקציונלי, אתם יכולים לכתוב קוד ב-Dart כמו messages.map((m) => Text(m)).toList(). וכמובן, תמיד אפשר ליצור רשימה של ווידג'טים ולהוסיף לה ווידג'טים באופן אימפרטיבי בתוך השיטה build.

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

252f7c4a212c94d2.png

בהמשך מוסבר על דרך אחת להטמעת דף המועדפים. אופן ההטמעה (בתקווה) יעורר בכם השראה לשחק עם הקוד – לשפר את ממשק המשתמש ולהתאים אותו אישית.

זוהי הכיתה החדשה FavoritesPage:

lib/main.dart

// ...

class FavoritesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    if (appState.favorites.isEmpty) {
      return Center(
        child: Text('No favorites yet.'),
      );
    }

    return ListView(
      children: [
        Padding(
          padding: const EdgeInsets.all(20),
          child: Text('You have '
              '${appState.favorites.length} favorites:'),
        ),
        for (var pair in appState.favorites)
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text(pair.asLowerCase),
          ),
      ],
    );
  }
}

מה הווידג'ט עושה:

  • הפונקציה מחזירה את המצב הנוכחי של האפליקציה.
  • אם רשימת המועדפים ריקה, מוצגת הודעה במרכז המסך: עדיין אין מועדפים.
  • אחרת, מוצגת רשימה (עם אפשרות גלילה).
  • הרשימה מתחילה בסיכום (לדוגמה, יש לך 5 מועדפים).
  • לאחר מכן הקוד חוזר על עצמו בכל המועדפים ויוצר ווידג'ט ListTile לכל אחד מהם.

כל מה שנותר לעשות הוא להחליף את הווידג'ט Placeholder בווידג'ט FavoritesPage. והנה!

אפשר למצוא את הקוד הסופי של האפליקציה הזו במאגר Codelab ב-GitHub.

9. השלבים הבאים

מזל טוב!

איזה יופי! לקחת פיגום לא פונקציונלי עם ווידג'ט Column ושני ווידג'טים Text, והפכת אותו לאפליקציה קטנה ונעימה עם תגובה מהירה.

d6e3d5f736411f13.png

מה נכלל

  • הסבר בסיסי על אופן הפעולה של Flutter
  • יצירת פריסות ב-Flutter
  • חיבור בין אינטראקציות של משתמשים (כמו לחיצות על לחצנים) לבין התנהגות האפליקציה
  • שמירה על סדר בקוד Flutter
  • הפיכת האפליקציה לרספונסיבית
  • איך יוצרים מראה ותחושה עקביים באפליקציה

מה עכשיו?

  • תתנסו יותר עם האפליקציה שכתבתם במהלך ה-Lab הזה.
  • כדי לראות איך אפשר להוסיף רשימות מונפשות, מעברי צבע, מעברי הדרגה ועוד, אפשר לעיין בקוד של הגרסה המתקדמת הזו של אותה אפליקציה.
  • כדי לעקוב אחרי תהליך הלמידה, אפשר להיכנס לכתובת flutter.dev/learn.