פונקציות Callback ששולחות ערך

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

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

הוסיפו לקריאה החוזרת פרמטר. הטיפוס void Function(String) הוא פונקציה שמקבלת String ולא מחזירה דבר:

class SizePicker extends StatelessWidget {
  const SizePicker({super.key, required this.onPick});

  final void Function(String) onPick;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => onPick('S'),
      child: Text('S'),
    );
  }
}

כל כפתור עוטף את הקריאה בפונקציה קצרה, () => onPick('S'), כדי שהיא תרוץ בעת ההקשה ולא במהלך הבנייה. הרכיב האב מקבל את הערך כפרמטר ושומר אותו:

SizePicker(
  onPick: (picked) {
    setState(() {
      size = picked;
    });
  },
)

ל-Flutter יש שם קצר לאותו טיפוס: ValueChanged<String>. ווידג'טים מובנים רבים משתמשים בו, למשל onChanged של TextField.

אתגר

בינוני

גרום ללחצני המידות לעבוד:

הוסף ל־SizePicker שדה final void Function(String) onPick, שנקבע באמצעות הבנאי שלו.
גרום לכל לחצן לקרוא ל־onPick עם האות שלו.
הצג בעמוד את המידה שנבחרה: Size: S, Size: M או Size: L.

נסו בעצמכם

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> {
  String size = 'M';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('T-shirt')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Size: $size', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const SizePicker(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(onPressed: () {}, child: const Text('S')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('M')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('L')),
      ],
    );
  }
}