העברת מצב לרכיב ילד

חלק מהיחידה ניהול מצב במסלול ה-Flutter של Coddy. שיעור 1 מתוך 27.

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

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

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

ההורה מעביר את הערך שלו בכל פעם שהוא בונה את הילד: ScoreBoard(score: score). כשההורה קורא ל-setState, הוא נבנה מחדש, ולוח הניקוד מקבל את המספר החדש.

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

אתגר

קל

הלחצן +1 סופר נקודות, אבל לוח התוצאות מציג תמיד Score: 0.

הוסף ל-ScoreBoard שדה final int score, והגדר אותו באמצעות הבנאי שלו.
הגדר את הטקסט שלו כ-Score: ואחריו הניקוד הזה.
העבר את ה-score של הדף כשבונים את לוח התוצאות.

נסו בעצמכם

import 'package:flutter/material.dart';

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

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}