Widgets מסוג const

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 15 מתוך 34.

const לפני ערך פירושו: הערך קבוע כשכותבים את הקוד, ולעולם אינו משתנה. const Text('Score') יציג את Score כל עוד האפליקציה פועלת.

למה לומר את זה ל-Dart? כש-setState בונה את המסך מחדש, Flutter יכול לדלג על כל ווידג'ט const, כי הוא יודע ששום דבר בתוכו לא השתנה. זו הסיבה שעורכי קוד של Flutter, כמו VS Code ו-Android Studio, מסמנים בקו תחתון ווידג'ט שיכול להיות const ומציעים להוסיף זאת. מכאן ואילך, האפליקציות בקורס הזה משתמשות ב-const במקומות המתאימים.

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

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

משתנה יכול להשתנות, ולכן הוא לעולם לא יכול להיות בתוך const. הציבו את Text('$_score') בעמודה הזאת, ו-Dart יסרב לקמפל אותה עם השגיאה "Not a constant expression". הפתרון: הסירו את const מהעמודה והוסיפו אותו לכל ילד שאינו משתנה:

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

אתגר

בינוני

הניקוד עולה כשלוחצים על כפתור הפלוס, אבל המסך אף פעם לא מציג אותו. מתחת ל־Score, הוסף Text('$_score') בגודל 48. יהיה עליך להעביר את const מ־Column לווידג'טים שבתוכו שלא משתנים.

נסו בעצמכם

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}