Bir Liste Öğesine Dokunma

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 4 / 33.

Bir liste okunacak bir şeyden daha fazlasıdır: bir satıra dokunarak onu seçersin. ListTile içinde bir onTap: bulunur; bu, satıra dokunulduğunda çalışan bir işlevdir ve bir düğmenin onPressed: özelliğiyle aynı fikirdir.

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

onTap: özelliği olan bir karo, dokunduğunda bir dalgalanma efekti de gösterir; böylece düğme gibi hissettirir.

Karolar bir for döngüsüyle oluşturulduğunda, her karonun onTap özelliği kendi fruit değerini hatırlar. Kiwi'ye dokunmak, fruit değerinin 'Kiwi' olarak ayarlandığı Kiwi'nin işlevini çalıştırır.

Görev

Kolay

Uygulama çubuğunda Pick a fruit yazıyor. Her döşemeye bir onTap: ekleyerek, meyveye dokunulduğunda uygulama çubuğunun You picked Mango olarak değişmesini sağla (dokunulan meyvenin adıyla).

Kendin dene

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),
            ),
        ],
      ),
    );
  }
}