הקישו על אריח ברשימה

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 4 מתוך 33.

רשימה היא יותר ממשהו שקוראים: מקישים על שורה כדי לבחור אותה. ל־ListTile יש onTap:, פונקציה שרצה כשמקישים על השורה, בדומה ל־onPressed: של כפתור.

ListTile(
  title: Text(fruit),
  onTap: () {
    setState(() {
      picked = fruit;
    });
  },
)

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

כשהאריחים נוצרים באמצעות for, ה־onTap של כל אריח זוכר את ה־fruit שלו. הקשה על Kiwi מפעילה את הפונקציה של Kiwi, כאשר fruit מוגדר ל־'Kiwi'.

אתגר

קל

בסרגל האפליקציה מופיע Pick a fruit. הוסף לכל אריח onTap:, כך שהקשה על פרי תשנה את סרגל האפליקציה ל־You picked Mango (עם הפרי שעליו הקשת).

נסו בעצמכם

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: FruitPicker(),
    );
  }
}

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

  @override
  State<FruitPicker> createState() => _FruitPickerState();
}

class _FruitPickerState extends State<FruitPicker> {
  final List<String> fruits = ['Apple', 'Banana', 'Kiwi', 'Mango', 'Peach'];
  String picked = 'Pick a fruit';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(picked)),
      body: ListView(
        children: [
          for (String fruit in fruits)
            ListTile(
              title: Text(fruit),
            ),
        ],
      ),
    );
  }
}