העברת פונקציית Callback לרכיב ילד

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

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

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

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

ההורה כותב מה הלחיצה עושה, עם setState כרגיל:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

כתוב onPressed: onAdd, ולא onAdd(). האפשרות הראשונה מעבירה את הפונקציה לכפתור כדי שיפעיל אותה מאוחר יותר. האפשרות השנייה קוראת לה מיד בזמן הבנייה, ומעבירה את הערך שהיא מחזירה.

אתגר

קל

הכפתור Add point נמצא ברכיב AddButton, והוא עדיין לא עושה כלום.

הוסף לרכיב AddButton שדה final VoidCallback onAdd, שיוגדר באמצעות הבנאי שלו.
השתמש בו בתור onPressed של הכפתור.
בדף, העבר פונקציה שמוסיפה 1 ל־score בתוך setState.

נסו בעצמכם

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: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}